ITAM/src/components/Guide.ts

import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';

// ─── 자산별 가이드 콘텐츠 정의 ───
interface GuideTabConfig {
  id: string;
  label: string;
  content: string;
}

const GUIDE_TABS: GuideTabConfig[] = [
  {
    id: 'overview',
    label: '📋 개요',
    content: `
      <section class="guide-section">
        <h3>IT 자산관리 시스템 개요</h3>
        <p class="guide-text">
          HM IT 자산관리 시스템(ITAM)은 기업의 IT 자산을 <strong>도입부터 폐기까지</strong> 전 과정에서 효율적으로 관리하기 위한 통합 플랫폼입니다.<br>
          하드웨어(PC, 서버, 스토리지, 전산비품, 모바일기기)와 소프트웨어(구독SW, 영구SW, 클라우드)를 체계적으로 추적하고 유지보수합니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>전체 자산관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">도입/구매</span><p class="step-desc">자산 구매 요청 → 승인 → 발주</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">등록/배정</span><p class="step-desc">자산번호 부여 → 시스템 등록 → 사용자 할당</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">운영/유지</span><p class="step-desc">현황 모니터링 → 점검/수리 → 이력 관리</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">4</span>
              <div><span class="step-label">반납/폐기</span><p class="step-desc">자산 회수 → 데이터 소거 → 폐기 처리</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>시스템 기본 사용법</h3>
        <table class="guide-info-table">
          <thead><tr><th>기능</th><th>방법</th></tr></thead>
          <tbody>
            <tr><td><strong>자산 조회</strong></td><td>상단 네비게이션에서 카테고리(하드웨어/소프트웨어) 선택 → 하위 탭에서 자산유형 선택</td></tr>
            <tr><td><strong>자산 등록</strong></td><td>[자산추가] 버튼 클릭 → 양식 입력 → 저장</td></tr>
            <tr><td><strong>자산 수정</strong></td><td>테이블에서 행 클릭 → 모달에서 [수정] → 내용 변경 → 저장</td></tr>
            <tr><td><strong>엑셀 업로드</strong></td><td>[업로드] 버튼 → 양식에 맞는 .xlsx 파일 선택 → 자동 일괄 등록</td></tr>
            <tr><td><strong>엑셀 다운로드</strong></td><td>[엑셀저장] 버튼 → 전체 자산 데이터 Excel 파일로 저장</td></tr>
            <tr><td><strong>양식 다운로드</strong></td><td>[양식] 버튼 → 엑셀 업로드용 빈 양식 다운로드</td></tr>
          </tbody>
        </table>
      </section>
    `
  },
  {
    id: 'pc',
    label: '💻 개인PC',
    content: `
      <section class="guide-section">
        <h3>개인PC 관리 가이드</h3>
        <p class="guide-text">
          개인PC는 임직원에게 지급되는 데스크톱 및 노트북을 관리합니다. 자산의 지급, 교체, 반납까지의 전체 생애주기를 시스템에서 추적합니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">구매 및 입고</span><p class="step-desc">구매 요청 → 발주 → 입고 검수</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">자산 등록</span><p class="step-desc">자산코드 부여, 사양(CPU/RAM/Storage) 등록</p></div>
            </div>
          </div>
          <i data-lucide="chevron-down" class="flow-arrow"></i>
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">사용자 지급</span><p class="step-desc">사용자·사용조직 지정, 설치위치 기록</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">4</span>
              <div><span class="step-label">운영 관리</span><p class="step-desc">OS 업데이트, 보안 점검, 품의서 관리</p></div>
            </div>
          </div>
          <i data-lucide="chevron-down" class="flow-arrow"></i>
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">5</span>
              <div><span class="step-label">교체/반납</span><p class="step-desc">노후 장비 회수, 데이터 소거, 신규 장비 지급</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">6</span>
              <div><span class="step-label">폐기 처리</span><p class="step-desc">폐기 대장 등록, 물리적 파기 또는 매각</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>주요 관리 항목 (테이블 컬럼)</h3>
        <table class="guide-info-table">
          <thead><tr><th>항목</th><th>설명</th><th>관리 주기</th></tr></thead>
          <tbody>
            <tr><td>구매법인</td><td>자산을 구매한 법인</td><td>등록 시 1회</td></tr>
            <tr><td>현 사용조직</td><td>현재 자산을 사용하는 조직/부서</td><td>인사 변동 시</td></tr>
            <tr><td>자산코드</td><td>사내 고유 자산 식별 번호</td><td>등록 시 1회</td></tr>
            <tr><td>사용자</td><td>자산을 실제 사용하는 직원명</td><td>인사 변동 시</td></tr>
            <tr><td>위치</td><td>자산이 실제 설치된 건물/층/좌석</td><td>이동 시 즉시</td></tr>
            <tr><td>CPU / RAM / Storage</td><td>하드웨어 사양 정보</td><td>등록/증설 시</td></tr>
            <tr><td>구매일</td><td>장비 구매 일자</td><td>등록 시 1회</td></tr>
            <tr><td>금액</td><td>구매 비용</td><td>등록 시 1회</td></tr>
            <tr><td>품의서</td><td>구매 증빙 첨부 파일</td><td>등록 시 1회</td></tr>
          </tbody>
        </table>
      </section>

      <div class="guide-tip">
        <strong>💡 팁:</strong> PC 교체 시 기존 장비의 상태를 '반납'으로 변경하고, 신규 장비를 새로 등록하여 이력을 분리 관리하세요.
      </div>
    `
  },
  {
    id: 'server',
    label: '🖥️ 서버',
    content: `
      <section class="guide-section">
        <h3>서버 관리 가이드</h3>
        <p class="guide-text">
          물리 서버와 가상 서버를 포함한 서버급 자산을 관리합니다. 안정적인 서비스 운영을 위해 체계적인 관리가 필요합니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">도입 계획</span><p class="step-desc">용도 정의, 사양 산정, 구매 승인</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">설치 및 등록</span><p class="step-desc">랙 배치, 네트워크 설정, 자산 등록</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">운영 관리</span><p class="step-desc">모니터링, 패치 적용, 장애 대응</p></div>
            </div>
          </div>
          <i data-lucide="chevron-down" class="flow-arrow"></i>
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">4</span>
              <div><span class="step-label">정기 점검</span><p class="step-desc">보안 취약점 점검, 성능 확인, 백업 검증</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">5</span>
              <div><span class="step-label">폐기/교체</span><p class="step-desc">데이터 마이그레이션 후 장비 교체 또는 폐기</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>주요 관리 항목 (테이블 컬럼)</h3>
        <table class="guide-info-table">
          <thead><tr><th>항목</th><th>설명</th><th>관리 주기</th></tr></thead>
          <tbody>
            <tr><td>구매법인 / 현 사용조직</td><td>법인 및 조직 정보</td><td>등록 / 변동 시</td></tr>
            <tr><td>자산번호</td><td>서버 식별 번호</td><td>등록 시 1회</td></tr>
            <tr><td>용도 / 상세</td><td>서버의 역할과 상세 설명</td><td>변경 시</td></tr>
            <tr><td>설치위치</td><td>데이터센터, 랙 번호, 유닛 위치</td><td>이전 시</td></tr>
            <tr><td>담당자 (정/부)</td><td>관리 담당자 정보</td><td>변동 시</td></tr>
            <tr><td>IP주소</td><td>서버 네트워크 주소 (최대 2개)</td><td>변경 시</td></tr>
            <tr><td>모델명</td><td>서버 하드웨어 모델</td><td>등록 시</td></tr>
            <tr><td>OS</td><td>운영체제 종류 및 버전</td><td>업데이트 시</td></tr>
            <tr><td>CPU / RAM / Storage</td><td>서버 사양 정보</td><td>증설 시</td></tr>
          </tbody>
        </table>
      </section>

      <div class="guide-warn">
        <strong>⚠️ 주의:</strong> 서버 폐기 전에는 반드시 데이터 마이그레이션과 백업 검증을 완료하고, 관련 서비스의 DNS/IP 변경 여부를 확인하세요.
      </div>
    `
  },
  {
    id: 'storage',
    label: '💾 스토리지',
    content: `
      <section class="guide-section">
        <h3>스토리지 관리 가이드</h3>
        <p class="guide-text">
          NAS, SAN, DAS 등 스토리지 장비에 대한 자산 관리입니다. 저장 용량의 효율적 운용과 데이터 안전성 확보가 핵심입니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">용량 산정</span><p class="step-desc">현재 사용량 분석 및 증설 필요 여부 판단</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">도입/설치</span><p class="step-desc">스토리지 구매 → 설치 → 네트워크 연결</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">운영 관리</span><p class="step-desc">용량 모니터링, RAID 상태 점검, 백업 스케줄</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>주요 관리 항목 (테이블 컬럼)</h3>
        <table class="guide-info-table">
          <thead><tr><th>항목</th><th>설명</th></tr></thead>
          <tbody>
            <tr><td>구매법인 / 현 사용조직</td><td>법인 및 조직 정보</td></tr>
            <tr><td>자산번호</td><td>스토리지 식별 번호</td></tr>
            <tr><td>용도 / 상세</td><td>스토리지 사용 목적과 세부 설명</td></tr>
            <tr><td>설치위치</td><td>데이터센터 내 물리적 위치</td></tr>
            <tr><td>담당자 (정/부)</td><td>관리 담당자 정보</td></tr>
            <tr><td>모델명</td><td>스토리지 하드웨어 모델</td></tr>
            <tr><td>Storage</td><td>총 용량 및 디스크 구성 정보</td></tr>
          </tbody>
        </table>
      </section>

      <div class="guide-tip">
        <strong>💡 팁:</strong> 스토리지 용량이 80%를 초과하면 증설을 검토하세요. 비고란에 용량 변경 이력을 기록하면 추적에 유용합니다.
      </div>
    `
  },
  {
    id: 'equip',
    label: '🔌 전산비품',
    content: `
      <section class="guide-section">
        <h3>전산비품 관리 가이드</h3>
        <p class="guide-text">
          모니터, 프린터, 네트워크 장비(스위치, AP), UPS, CPU, GPU, RAM, HDD 등 IT 관련 부속장비를 관리합니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">구매/입고</span><p class="step-desc">소모품 및 장비 구매 → 입고 확인</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">등록/배치</span><p class="step-desc">자산코드 부여 → 유형 지정 → 관리자 배정</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">유지보수</span><p class="step-desc">고장 수리, 소모품 교체, 상태 점검</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">4</span>
              <div><span class="step-label">폐기</span><p class="step-desc">노후화 시 폐기 처리 및 대장 기록</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>주요 관리 항목 (테이블 컬럼)</h3>
        <table class="guide-info-table">
          <thead><tr><th>항목</th><th>설명</th></tr></thead>
          <tbody>
            <tr><td>구매법인 / 현 사용조직</td><td>법인 및 조직 정보</td></tr>
            <tr><td>유형</td><td>비품 분류 (CPU, GPU, RAM, HDD, 태블릿 등)</td></tr>
            <tr><td>자산번호</td><td>비품 고유 식별 번호</td></tr>
            <tr><td>모델명</td><td>비품 하드웨어 모델</td></tr>
            <tr><td>관리자</td><td>비품 관리 담당자</td></tr>
            <tr><td>구매일</td><td>비품 구매 일자</td></tr>
            <tr><td>금액</td><td>구매 비용</td></tr>
          </tbody>
        </table>
      </section>
    `
  },
  {
    id: 'mobile',
    label: '📱 모바일기기',
    content: `
      <section class="guide-section">
        <h3>모바일기기 관리 가이드</h3>
        <p class="guide-text">
          업무용 스마트폰, 태블릿 등 모바일 기기의 지급 및 회수를 관리합니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">기기 구매</span><p class="step-desc">통신사 계약, 기기 선정, 구매</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">등록/지급</span><p class="step-desc">자산번호 부여, 관리자 지정, 사용자 지급</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">운영</span><p class="step-desc">OS 업데이트, 앱 관리</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">4</span>
              <div><span class="step-label">회수/교체</span><p class="step-desc">퇴직/교체 시 기기 회수, 초기화</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>주요 관리 항목 (테이블 컬럼)</h3>
        <table class="guide-info-table">
          <thead><tr><th>항목</th><th>설명</th></tr></thead>
          <tbody>
            <tr><td>구매법인 / 현 사용조직</td><td>법인 및 조직 정보</td></tr>
            <tr><td>유형</td><td>기기 분류 (모바일, 태블릿 등)</td></tr>
            <tr><td>자산번호</td><td>기기 고유 식별 번호</td></tr>
            <tr><td>모델명</td><td>기기 모델 (예: Galaxy S24, iPad Pro)</td></tr>
            <tr><td>관리자</td><td>기기를 관리하는 담당자</td></tr>
            <tr><td>구매일</td><td>기기 구매 일자</td></tr>
            <tr><td>금액</td><td>구매 비용</td></tr>
          </tbody>
        </table>
      </section>

      <div class="guide-warn">
        <strong>⚠️ 주의:</strong> 모바일기기 회수 시 반드시 공장초기화를 수행하세요.
      </div>
    `
  },
  {
    id: 'sub-sw',
    label: '🔄 구독SW',
    content: `
      <section class="guide-section">
        <h3>구독형 소프트웨어 관리 가이드</h3>
        <p class="guide-text">
          월간/연간 구독 방식의 소프트웨어(SaaS)를 관리합니다. <strong>만료일 관리</strong>와 <strong>라이선스 최적화</strong>가 핵심입니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>갱신 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <div class="step-number" style="background-color: #ff9800;">!</div>
              <div><span class="step-label">만료 알림 확인</span><p class="step-desc">대시보드에서 만료 예정 자산 목록 확인</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">A</span>
              <div><span class="step-label">수요조사</span><p class="step-desc">실제 사용자 파악, 불필요 라이선스 정리</p></div>
            </div>
          </div>
          <i data-lucide="chevron-down" class="flow-arrow"></i>
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">B</span>
              <div><span class="step-label">계약 연장</span><p class="step-desc">공급사에 갱신 요청, 수량/금액 확정, 결제</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <div class="step-number" style="background-color: var(--guide-accent);">✓</div>
              <div><span class="step-label">시스템 업데이트</span><p class="step-desc">시작일/만료일 갱신, 갱신 이력 자동 기록</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>주요 관리 항목 (테이블 컬럼)</h3>
        <table class="guide-info-table">
          <thead><tr><th>항목</th><th>설명</th><th>관리 주기</th></tr></thead>
          <tbody>
            <tr><td>상태</td><td>사용중 / 만료 (만료일 기준 자동 판별)</td><td>자동</td></tr>
            <tr><td>분야</td><td>업무공통, 개발S/W, 디자인, 설계S/W 등</td><td>등록 시</td></tr>
            <tr><td>법인 / 부서</td><td>구매 법인 및 사용 부서</td><td>등록 시</td></tr>
            <tr><td>제품명</td><td>소프트웨어 제품명</td><td>등록 시</td></tr>
            <tr><td>구매일</td><td>최초 구매 일자</td><td>등록 시</td></tr>
            <tr><td>시작일 / 만료일</td><td>구독 계약 기간</td><td>갱신 시 업데이트</td></tr>
            <tr><td>금액</td><td>연간/월간 구독 비용</td><td>갱신 시</td></tr>
            <tr><td>수량 / 사용가능</td><td>구매 수량 대비 배정 후 잔여 수량</td><td>배정 시</td></tr>
          </tbody>
        </table>
      </section>

      <div class="guide-tip">
        <strong>💡 팁:</strong> 대시보드의 만료 예정 위젯을 정기적으로 확인하세요. 기간 변경 시 갱신 이력이 자동으로 기록됩니다.
      </div>
    `
  },
  {
    id: 'perm-sw',
    label: '🔑 영구SW',
    content: `
      <section class="guide-section">
        <h3>영구 라이선스 소프트웨어 관리 가이드</h3>
        <p class="guide-text">
          1회 구매로 영구적으로 사용 가능한 소프트웨어입니다. 라이선스 키 관리 및 설치 현황 추적이 중요합니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">구매/도입</span><p class="step-desc">라이선스 구매 → 키 수령 → 시스템 등록</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">배포/설치</span><p class="step-desc">대상 PC에 설치 → 사용자 관리에서 매핑</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">현황 관리</span><p class="step-desc">잔여 수량 확인, 사용가능 수량 추적</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>주요 관리 항목 (테이블 컬럼)</h3>
        <table class="guide-info-table">
          <thead><tr><th>항목</th><th>설명</th></tr></thead>
          <tbody>
            <tr><td>상태</td><td>유지보수 유효 / 없음</td></tr>
            <tr><td>분야</td><td>업무공통, 개발S/W, 디자인, 설계S/W 등</td></tr>
            <tr><td>법인 / 부서</td><td>구매 법인 및 사용 부서</td></tr>
            <tr><td>제품명</td><td>소프트웨어 제품명</td></tr>
            <tr><td>구매일</td><td>최초 구매 일자</td></tr>
            <tr><td>시작일 / 만료일</td><td>유지보수 계약 기간 (해당 시)</td></tr>
            <tr><td>금액</td><td>라이선스 구매 비용</td></tr>
            <tr><td>수량 / 사용가능</td><td>보유 라이선스 대비 잔여 수량</td></tr>
          </tbody>
        </table>
      </section>

      <div class="guide-warn">
        <strong>⚠️ 주의:</strong> 영구 라이선스도 보유 수량을 초과하여 설치하면 저작권 위반이 됩니다. [사용자 관리] 버튼을 통해 실제 배정 현황을 파악하세요.
      </div>
    `
  },
  {
    id: 'cloud',
    label: '☁️ 클라우드',
    content: `
      <section class="guide-section">
        <h3>클라우드 서비스 관리 가이드</h3>
        <p class="guide-text">
          AWS, Azure, GCP 등 클라우드 인프라 서비스와 Notion, Slack 등 SaaS 서비스를 관리합니다. 비용 최적화와 계정 관리가 핵심입니다.
        </p>
      </section>

      <section class="guide-section">
        <h3>관리 프로세스</h3>
        <div class="flow-container">
          <div class="flow-row">
            <div class="flow-step">
              <span class="step-number">1</span>
              <div><span class="step-label">서비스 도입</span><p class="step-desc">서비스 선정, 비용 산정, 계정 생성</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">2</span>
              <div><span class="step-label">등록/설정</span><p class="step-desc">시스템 등록, 결제수단 설정, 관리자 배정</p></div>
            </div>
            <span class="flow-arrow-right"><i data-lucide="chevron-right"></i></span>
            <div class="flow-step">
              <span class="step-number">3</span>
              <div><span class="step-label">운영/비용관리</span><p class="step-desc">월별 청구액 추적, 계정 관리, 갱신</p></div>
            </div>
          </div>
        </div>
      </section>

      <section class="guide-section">
        <h3>주요 관리 항목 (테이블 컬럼)</h3>
        <table class="guide-info-table">
          <thead><tr><th>항목</th><th>설명</th></tr></thead>
          <tbody>
            <tr><td>플랫폼명</td><td>클라우드 플랫폼 이름 (예: AWS, Azure)</td></tr>
            <tr><td>법인 / 담당부서</td><td>서비스 소속 법인 및 관리 부서</td></tr>
            <tr><td>진행 프로젝트 (사용용도)</td><td>서비스 사용 목적</td></tr>
            <tr><td>계정명 (관리자)</td><td>관리자 계정 또는 루트 계정 정보</td></tr>
            <tr><td>결제수단</td><td>법인카드 또는 인보이스(월별송금)</td></tr>
            <tr><td>결제일</td><td>월 결제일</td></tr>
            <tr><td>당월 청구액</td><td>이번 달 결제 금액</td></tr>
            <tr><td>비고</td><td>추가 메모 및 변경 이력</td></tr>
          </tbody>
        </table>
      </section>

      <div class="guide-tip">
        <strong>💡 팁:</strong> 클라우드 비용은 매월 변동될 수 있으므로, 비고란을 활용하여 비용 변경 이력을 메모해 두면 예산 관리에 도움이 됩니다.
      </div>
    `
  }
];

// ─── 가이드 모달 초기화 ───
export function initGuide() {
  const body = document.body;

  // 오버레이
  const overlay = document.createElement('div');
  overlay.className = 'guide-overlay';
  overlay.id = 'guide-overlay';

  // 모달
  const modal = document.createElement('div');
  modal.className = 'guide-modal';
  modal.id = 'guide-modal';

  // 탭 바 생성
  const tabsHtml = GUIDE_TABS.map((tab, i) =>
    `<div class="guide-tab ${i === 0 ? 'active' : ''}" data-guide-tab="${tab.id}">${tab.label}</div>`
  ).join('');

  // 탭 패널 생성
  const panelsHtml = GUIDE_TABS.map((tab, i) =>
    `<div class="guide-tab-panel ${i === 0 ? 'active' : ''}" data-guide-panel="${tab.id}">${tab.content}</div>`
  ).join('');

  modal.innerHTML = `
    <div class="guide-header">
      <h2><i data-lucide="book-open"></i> IT 자산관리 프로세스 가이드</h2>
      <button class="btn-close-guide" id="btn-close-guide">
        <i data-lucide="x"></i>
      </button>
    </div>
    <div class="guide-tabs">${tabsHtml}</div>
    <div class="guide-body">${panelsHtml}</div>
  `;

  overlay.appendChild(modal);
  body.appendChild(overlay);

  // ─── 이벤트 바인딩 ───
  const openGuide = () => overlay.classList.add('active');
  const closeGuide = () => overlay.classList.remove('active');

  // 헤더 버튼
  document.getElementById('btn-open-guide-header')?.addEventListener('click', openGuide);

  // 오버레이 배경 클릭
  overlay.addEventListener('click', (e) => {
    if (e.target === overlay) closeGuide();
  });

  // 닫기 버튼
  document.getElementById('btn-close-guide')?.addEventListener('click', closeGuide);

  // 탭 전환
  const tabs = modal.querySelectorAll('.guide-tab');
  const panels = modal.querySelectorAll('.guide-tab-panel');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const targetId = tab.getAttribute('data-guide-tab');

      tabs.forEach(t => t.classList.remove('active'));
      panels.forEach(p => p.classList.remove('active'));

      tab.classList.add('active');
      modal.querySelector(`.guide-tab-panel[data-guide-panel="${targetId}"]`)?.classList.add('active');
    });
  });

  // 아이콘 렌더링
  createIcons({
    icons: { BookOpen, X, ChevronDown, ChevronRight, RefreshCw }
  });
}