@extends('layouts.app')

@section('title', 'Git 관리도구')

@push('styles')
<style>
    .help-balloon-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #f5f3ff;
        color: #6d28d9;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        border: 1.5px solid #c4b5fd;
        vertical-align: middle;
        margin-left: 4px;
        transition: all 0.15s ease;
        position: relative;
        user-select: none;
    }
    .help-balloon-trigger:hover {
        background: #6d28d9;
        color: white;
        border-color: #7c3aed;
    }
    .help-balloon {
        display: none;
        position: absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) scale(0.95);
        background: #1e293b;
        color: #f1f5f9;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.6;
        padding: 10px 14px;
        border-radius: 10px;
        max-width: 300px;
        min-width: 200px;
        width: max-content;
        white-space: normal;
        word-break: keep-all;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        z-index: 40;
        opacity: 0;
        transition: opacity 0.15s ease, transform 0.15s ease;
        pointer-events: none;
    }
    .help-balloon::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 7px solid transparent;
        border-top-color: #1e293b;
    }
    .help-balloon-trigger.is-active .help-balloon {
        display: block;
        opacity: 1;
        transform: translateX(-50%) scale(1);
        pointer-events: auto;
    }
    .help-balloon-trigger.is-active .help-balloon.balloon-right {
        left: auto;
        right: -10px;
        transform: scale(1);
    }
    .help-balloon-trigger.is-active .help-balloon.balloon-right::after {
        left: auto;
        right: 14px;
        transform: none;
    }

    .code-block {
        background: #1e1e2e;
        color: #a6e3a1;
        border-radius: 0.75rem;
        padding: 1rem 1.25rem;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.75rem;
        line-height: 1.7;
        overflow-x: auto;
        white-space: pre;
    }
    .code-block .code-comment { color: #6c7086; }
    .code-block .code-keyword { color: #cba6f7; }
    .code-block .code-string { color: #a6e3a1; }
    .code-block .code-flag { color: #89b4fa; }
    .code-block .code-path { color: #f9e2af; }
    .code-block .code-output { color: #9399b2; }
    .code-block .code-danger { color: #f38ba8; }
    .code-block .code-prompt { color: #89dceb; }

    .tool-card {
        transition: all 0.15s ease;
    }
    .tool-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transform: translateY(-1px);
    }

    .star-rating { color: #f59e0b; letter-spacing: 1px; }
    .star-empty { color: #d1d5db; }
</style>
@endpush

@section('content')
<div class="max-w-6xl mx-auto">

    {{-- ============================================================ --}}
    {{-- 히어로 배너 --}}
    {{-- ============================================================ --}}
    <div class="rounded-2xl overflow-hidden mb-8 shadow-lg" style="background: linear-gradient(135deg, #2e1065 0%, #0f172a 100%);">
        <div class="flex items-center" style="flex-wrap: wrap;">
            <div style="flex: 1 1 300px; padding: 2rem 2.5rem;">
                <div class="flex items-center gap-2 text-sm mb-2" style="color: #c4b5fd;">
                    <span>아카데미</span>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                    <span style="color: #e9d5ff;">Git 관리도구</span>
                </div>
                <h1 class="text-3xl font-bold mb-2" style="color: #ffffff;">Git 관리도구</h1>
                <p class="text-sm" style="color: #cbd5e1;">VS Code 기반 IDE에서 Git 브랜치를 시각적으로 관리하는 도구 추천과 사용법</p>
            </div>
            <div class="shrink-0" style="width: 240px; padding: 1.5rem;">
                <div class="text-center" style="font-size: 100px; line-height: 1;">
                    <span style="filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));">&#x1F500;</span>
                </div>
            </div>
        </div>
    </div>

    <div class="flex gap-8">
        {{-- ============================================================ --}}
        {{-- 좌측 고정 목차 (TOC) --}}
        {{-- ============================================================ --}}
        <nav class="hidden lg:block shrink-0" style="width: 220px;">
            <div class="sticky top-24">
                <div class="bg-violet-50 border border-violet-200 rounded-xl p-5">
                    <h2 class="font-semibold text-violet-800 mb-3 flex items-center gap-2 text-sm">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
                        목차
                    </h2>
                    <div class="space-y-0.5 text-xs">
                        <a href="#why-visual-tools" class="block text-violet-700 hover:text-violet-900 py-1 font-medium">1. 왜 시각화 도구가 필요한가?</a>
                        <a href="#cli-limits" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">CLI의 한계</a>
                        <a href="#visual-benefits" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">시각화 장점</a>

                        <a href="#git-graph" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">2. Git Graph</a>
                        <a href="#git-graph-install" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">설치 및 사용</a>

                        <a href="#gitlens" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">3. GitLens</a>
                        <a href="#gitlens-features" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">핵심 기능</a>

                        <a href="#vscode-scm" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">4. VS Code 내장 SCM</a>
                        <a href="#scm-shortcuts" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">단축키</a>

                        <a href="#gui-tools" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">5. 독립 GUI 도구 비교</a>
                        <a href="#gui-comparison" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">비교 테이블</a>

                        <a href="#rebase-vs-merge" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">6. Rebase vs Merge</a>
                        <a href="#rebase-warning" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">주의사항</a>

                        <a href="#sam-workflow" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">7. SAM 실전 워크플로우</a>
                        <a href="#sam-repos" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">3개 저장소 관리</a>

                        <a href="#terminal-tools" class="block text-violet-700 hover:text-violet-900 py-1 font-medium mt-2">8. 터미널 도구</a>
                        <a href="#lazygit-usage" class="block text-violet-600 hover:text-violet-800 py-0.5 pl-3">lazygit</a>
                    </div>
                </div>
            </div>
        </nav>

        {{-- ============================================================ --}}
        {{-- 우측 콘텐츠 --}}
        {{-- ============================================================ --}}
        <div class="flex-1 min-w-0 space-y-10">

            {{-- 모바일 목차 --}}
            <div class="lg:hidden bg-violet-50 border border-violet-200 rounded-xl p-4 mb-6">
                <details>
                    <summary class="font-semibold text-violet-800 text-sm cursor-pointer flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
                        목차 보기
                    </summary>
                    <nav class="mt-3 space-y-1 text-sm">
                        <a href="#why-visual-tools" class="block text-violet-700 hover:text-violet-900 py-1">1. 왜 시각화 도구가 필요한가?</a>
                        <a href="#git-graph" class="block text-violet-700 hover:text-violet-900 py-1">2. Git Graph</a>
                        <a href="#gitlens" class="block text-violet-700 hover:text-violet-900 py-1">3. GitLens</a>
                        <a href="#vscode-scm" class="block text-violet-700 hover:text-violet-900 py-1">4. VS Code 내장 SCM</a>
                        <a href="#gui-tools" class="block text-violet-700 hover:text-violet-900 py-1">5. 독립 GUI 도구 비교</a>
                        <a href="#rebase-vs-merge" class="block text-violet-700 hover:text-violet-900 py-1">6. Rebase vs Merge</a>
                        <a href="#sam-workflow" class="block text-violet-700 hover:text-violet-900 py-1">7. SAM 실전 워크플로우</a>
                        <a href="#terminal-tools" class="block text-violet-700 hover:text-violet-900 py-1">8. 터미널 도구</a>
                    </nav>
                </details>
            </div>

            {{-- ============================================================ --}}
            {{-- 1. 왜 시각화 도구가 필요한가? --}}
            {{-- ============================================================ --}}
            <section id="why-visual-tools" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
                        왜 Git 시각화 도구가 필요한가?
                    </h2>

                    <div id="cli-limits" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            CLI만으로는 부족하다
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">터미널에서 git log --graph를 실행하면 브랜치를 볼 수 있지만, 복잡한 프로젝트에서는 읽기 어렵다.</span></span>
                        </h3>
                        <div class="bg-amber-50 rounded-lg p-4 border border-amber-100 mb-4">
                            <p class="font-semibold text-amber-800 mb-1">비유: 네비게이션 없이 운전하기</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                주소만 보고 처음 가는 곳을 찾아가는 것은 가능하지만, <strong>네비게이션이 있으면 훨씬 빠르고 안전</strong>하다.
                                Git 시각화 도구는 코드 저장소의 네비게이션이다.
                            </p>
                        </div>
                        <div class="space-y-4">
                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-2">CLI에서 보는 브랜치 그래프</p>
                                <div class="code-block"><span class="code-prompt">$</span> <span class="code-keyword">git</span> log <span class="code-flag">--oneline --graph --all</span>
<span class="code-output">* 3a7f2c1 (HEAD -> feature/calendar) feat: 달력 기능 추가
| * b8e4d3a (develop) fix: 로그인 오류 수정
|/
* 1c5e9f0 (main) chore: 초기 설정
| * d4a2b7c (feature/dashboard) feat: 대시보드 추가
|/
* 9e3f1a2 docs: README 업데이트</span>
<span class="code-comment"># 브랜치가 10개 이상이면 이 그래프는 읽기 힘들어진다</span></div>
                            </div>
                            <div class="bg-violet-50 rounded-lg p-4 border border-violet-200">
                                <p class="text-sm font-semibold text-violet-800 mb-2">시각화 도구에서 보는 같은 내용</p>
                                <p class="text-xs text-violet-700 leading-relaxed">
                                    시각화 도구는 <strong>색상으로 브랜치를 구분</strong>하고, <strong>마우스 클릭만으로 커밋 상세 정보</strong>를 볼 수 있다.
                                    Merge와 Rebase 결과도 즉시 확인할 수 있어 실수를 방지한다.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div id="visual-benefits" class="scroll-mt-20">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            시각화 도구의 장점
                        </h3>
                        <div class="grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));">
                            <div class="bg-white rounded-lg p-4 border border-violet-100 shadow-sm">
                                <div class="text-2xl mb-2">&#x1F3A8;</div>
                                <p class="font-semibold text-gray-800 text-sm mb-1">색상 구분</p>
                                <p class="text-xs text-gray-600">브랜치별 다른 색상으로 한눈에 구분 가능</p>
                            </div>
                            <div class="bg-white rounded-lg p-4 border border-violet-100 shadow-sm">
                                <div class="text-2xl mb-2">&#x1F5B1;</div>
                                <p class="font-semibold text-gray-800 text-sm mb-1">클릭 조작</p>
                                <p class="text-xs text-gray-600">명령어 대신 마우스 클릭으로 Merge, Rebase 실행</p>
                            </div>
                            <div class="bg-white rounded-lg p-4 border border-violet-100 shadow-sm">
                                <div class="text-2xl mb-2">&#x1F50D;</div>
                                <p class="font-semibold text-gray-800 text-sm mb-1">Diff 미리보기</p>
                                <p class="text-xs text-gray-600">커밋 클릭만으로 변경 사항을 바로 확인</p>
                            </div>
                            <div class="bg-white rounded-lg p-4 border border-violet-100 shadow-sm">
                                <div class="text-2xl mb-2">&#x26A0;</div>
                                <p class="font-semibold text-gray-800 text-sm mb-1">실수 방지</p>
                                <p class="text-xs text-gray-600">위험한 작업 전 시각적 확인으로 사고 방지</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 2. Git Graph --}}
            {{-- ============================================================ --}}
            <section id="git-graph" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
                        Git Graph
                        <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full font-medium">필수 설치</span>
                    </h2>

                    <div id="git-graph-install" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            설치 및 기본 사용
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">Cursor, AntiGravity 등 VS Code 기반 IDE에서 동일하게 사용 가능하다.</span></span>
                        </h3>

                        <div class="bg-amber-50 rounded-lg p-4 border border-amber-100 mb-4">
                            <p class="font-semibold text-amber-800 mb-1">비유: 지하철 노선도</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                Git Graph는 <strong>지하철 노선도</strong>처럼 브랜치를 보여준다.
                                각 노선(브랜치)이 어디서 갈라지고 합쳐지는지 한눈에 파악할 수 있다.
                            </p>
                        </div>

                        <div class="space-y-4">
                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-2">설치 방법</p>
                                <div class="code-block"><span class="code-comment"># VS Code / Cursor / AntiGravity 확장 마켓플레이스에서 설치</span>
<span class="code-comment"># Extension ID:</span>
<span class="code-string">mhutchie.git-graph</span>

<span class="code-comment"># 또는 명령 팔레트 (Ctrl+Shift+P)에서:</span>
<span class="code-keyword">ext install</span> <span class="code-string">mhutchie.git-graph</span></div>
                            </div>

                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-2">사용 방법</p>
                                <div class="space-y-2 text-xs text-gray-700">
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">1</span>
                                        <span>Source Control 탭에서 <strong>"Git Graph"</strong> 아이콘 클릭 (또는 명령 팔레트에서 <code class="bg-gray-200 px-1 rounded">Git Graph: View Git Graph</code>)</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">2</span>
                                        <span>전체 브랜치 그래프가 <strong>색상별</strong>로 표시됨</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">3</span>
                                        <span>커밋을 <strong>클릭</strong>하면 변경 파일 목록과 Diff를 볼 수 있음</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">4</span>
                                        <span>커밋을 <strong>우클릭</strong>하면 Cherry-pick, Revert, Reset 등 Git 작업 메뉴 표시</span>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-3">주요 기능</p>
                                <div class="overflow-x-auto">
                                    <table class="w-full text-xs">
                                        <thead>
                                            <tr class="bg-violet-50">
                                                <th class="text-left p-2 font-semibold text-violet-800">기능</th>
                                                <th class="text-left p-2 font-semibold text-violet-800">설명</th>
                                                <th class="text-left p-2 font-semibold text-violet-800">사용법</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-100">
                                            <tr><td class="p-2 font-medium">브랜치 그래프</td><td class="p-2">모든 브랜치를 색상별 그래프로 표시</td><td class="p-2">자동 표시</td></tr>
                                            <tr><td class="p-2 font-medium">커밋 상세</td><td class="p-2">변경 파일, Diff 미리보기</td><td class="p-2">커밋 클릭</td></tr>
                                            <tr><td class="p-2 font-medium">브랜치 생성</td><td class="p-2">커밋에서 새 브랜치 생성</td><td class="p-2">커밋 우클릭 > Create Branch</td></tr>
                                            <tr><td class="p-2 font-medium">Merge</td><td class="p-2">브랜치를 현재 브랜치에 병합</td><td class="p-2">브랜치 우클릭 > Merge</td></tr>
                                            <tr><td class="p-2 font-medium">Rebase</td><td class="p-2">현재 브랜치를 다른 브랜치 위에 재배치</td><td class="p-2">브랜치 우클릭 > Rebase</td></tr>
                                            <tr><td class="p-2 font-medium">Cherry-pick</td><td class="p-2">특정 커밋만 가져오기</td><td class="p-2">커밋 우클릭 > Cherry Pick</td></tr>
                                            <tr><td class="p-2 font-medium">태그</td><td class="p-2">커밋에 버전 태그 추가</td><td class="p-2">커밋 우클릭 > Add Tag</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 3. GitLens --}}
            {{-- ============================================================ --}}
            <section id="gitlens" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">3</span>
                        GitLens
                        <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full font-medium">필수 설치</span>
                    </h2>

                    <div id="gitlens-features" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            핵심 기능
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">GitLens는 코드 편집기 안에서 "누가, 언제, 왜 이 코드를 바꿨는지"를 바로 보여준다.</span></span>
                        </h3>

                        <div class="bg-amber-50 rounded-lg p-4 border border-amber-100 mb-4">
                            <p class="font-semibold text-amber-800 mb-1">비유: CCTV 재생</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                GitLens는 코드의 <strong>CCTV</strong>와 같다. 어떤 줄이든 클릭하면
                                <strong>누가(작성자), 언제(날짜), 왜(커밋 메시지)</strong> 수정했는지 바로 확인할 수 있다.
                            </p>
                        </div>

                        <div class="space-y-4">
                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-2">설치 방법</p>
                                <div class="code-block"><span class="code-comment"># Extension ID:</span>
<span class="code-string">eamodio.gitlens</span>

<span class="code-comment"># 또는 명령 팔레트에서:</span>
<span class="code-keyword">ext install</span> <span class="code-string">eamodio.gitlens</span></div>
                            </div>

                            <div class="space-y-3">
                                <div class="tool-card bg-gray-50 rounded-lg p-4 border border-gray-200">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="bg-violet-100 text-violet-800 text-xs font-bold px-2 py-0.5 rounded">무료</span>
                                        <span class="text-sm font-semibold text-gray-800">Inline Blame</span>
                                    </div>
                                    <p class="text-xs text-gray-600 mb-2">코드 줄 끝에 <strong>최근 수정자와 커밋 메시지</strong>가 흐릿하게 표시된다. 커서를 올리면 상세 정보를 볼 수 있다.</p>
                                    <div class="code-block"><span class="code-comment">// 코드 편집기에서 이렇게 보인다:</span>
<span class="code-keyword">function</span> <span class="code-string">calculateTotal</span>() {     <span class="code-output">// 홍길동, 3일 전 — fix: 합계 계산 오류 수정</span>
    <span class="code-keyword">return</span> items.reduce(...)   <span class="code-output">// 김철수, 1주 전 — feat: 합계 기능 추가</span>
}</div>
                                </div>

                                <div class="tool-card bg-gray-50 rounded-lg p-4 border border-gray-200">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="bg-violet-100 text-violet-800 text-xs font-bold px-2 py-0.5 rounded">무료</span>
                                        <span class="text-sm font-semibold text-gray-800">File History</span>
                                    </div>
                                    <p class="text-xs text-gray-600">파일의 전체 변경 이력을 시간순으로 보여준다. 특정 시점의 내용으로 쉽게 비교할 수 있다.</p>
                                </div>

                                <div class="tool-card bg-gray-50 rounded-lg p-4 border border-gray-200">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="bg-orange-100 text-orange-800 text-xs font-bold px-2 py-0.5 rounded">유료</span>
                                        <span class="text-sm font-semibold text-gray-800">Commit Graph</span>
                                    </div>
                                    <p class="text-xs text-gray-600">Git Graph와 유사한 시각적 브랜치 그래프. GitLens+ (유료) 기능이지만, Git Graph 확장으로 대체 가능하다.</p>
                                </div>
                            </div>

                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-3">무료 vs 유료 비교</p>
                                <div class="overflow-x-auto">
                                    <table class="w-full text-xs">
                                        <thead>
                                            <tr class="bg-violet-50">
                                                <th class="text-left p-2 font-semibold text-violet-800">기능</th>
                                                <th class="text-center p-2 font-semibold text-violet-800">무료</th>
                                                <th class="text-center p-2 font-semibold text-violet-800">유료 (Pro)</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-100">
                                            <tr><td class="p-2">Inline Blame</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td></tr>
                                            <tr><td class="p-2">File History</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td></tr>
                                            <tr><td class="p-2">Line History</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td></tr>
                                            <tr><td class="p-2">Status Bar Blame</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td></tr>
                                            <tr><td class="p-2">Commit Graph</td><td class="p-2 text-center text-red-500 font-bold">&#x2718;</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td></tr>
                                            <tr><td class="p-2">Visual File History</td><td class="p-2 text-center text-red-500 font-bold">&#x2718;</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td></tr>
                                            <tr><td class="p-2">Worktrees</td><td class="p-2 text-center text-red-500 font-bold">&#x2718;</td><td class="p-2 text-center text-green-600 font-bold">&#x2714;</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <p class="text-xs text-gray-500 mt-2">* 무료 기능만으로도 충분히 유용하다. Commit Graph는 Git Graph 확장으로 대체하면 된다.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 4. VS Code 내장 Source Control --}}
            {{-- ============================================================ --}}
            <section id="vscode-scm" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">4</span>
                        VS Code 내장 Source Control
                    </h2>

                    <div id="scm-shortcuts" class="scroll-mt-20">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            별도 설치 없이 바로 사용
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">VS Code, Cursor, AntiGravity 모두 기본 내장되어 있다. 확장 설치 없이 바로 사용 가능하다.</span></span>
                        </h3>

                        <div class="space-y-4">
                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-3">주요 단축키</p>
                                <div class="overflow-x-auto">
                                    <table class="w-full text-xs">
                                        <thead>
                                            <tr class="bg-violet-50">
                                                <th class="text-left p-2 font-semibold text-violet-800">단축키</th>
                                                <th class="text-left p-2 font-semibold text-violet-800">기능</th>
                                                <th class="text-left p-2 font-semibold text-violet-800">설명</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-100">
                                            <tr><td class="p-2 font-mono font-medium">Ctrl+Shift+G</td><td class="p-2">Source Control 열기</td><td class="p-2">Git 패널 열기</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">Ctrl+Shift+P</td><td class="p-2">명령 팔레트</td><td class="p-2">"Git:" 입력 후 모든 Git 명령 접근</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">Ctrl+Enter</td><td class="p-2">커밋</td><td class="p-2">Source Control에서 메시지 입력 후 커밋</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">파일 클릭</td><td class="p-2">Diff 보기</td><td class="p-2">변경된 파일 클릭 시 Diff 뷰어 열림</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">+ 버튼</td><td class="p-2">Stage (git add)</td><td class="p-2">파일 옆 + 클릭 시 스테이징</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">- 버튼</td><td class="p-2">Unstage</td><td class="p-2">스테이지된 파일 옆 - 클릭 시 언스테이지</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-3">내장 기능 활용</p>
                                <div class="space-y-2 text-xs text-gray-700">
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-1.5 py-0.5 rounded shrink-0">Diff</span>
                                        <span>변경된 파일 클릭 시 좌우 분할 Diff 뷰어가 열린다. 어떤 줄이 추가/삭제/수정되었는지 색상으로 구분된다.</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-1.5 py-0.5 rounded shrink-0">Timeline</span>
                                        <span>파일 탐색기 하단의 <strong>Timeline</strong> 패널에서 파일의 변경 이력을 시간순으로 볼 수 있다.</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-1.5 py-0.5 rounded shrink-0">Gutter</span>
                                        <span>편집기 좌측 거터에 <strong>변경 표시</strong>(초록: 추가, 파랑: 수정, 빨강: 삭제)가 나타난다.</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-1.5 py-0.5 rounded shrink-0">Branch</span>
                                        <span>하단 상태바의 브랜치 이름을 클릭하면 <strong>브랜치 전환</strong>이나 <strong>새 브랜치 생성</strong>을 할 수 있다.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 5. 독립 GUI 도구 비교 --}}
            {{-- ============================================================ --}}
            <section id="gui-tools" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">5</span>
                        독립 GUI 도구 비교
                    </h2>

                    <div id="gui-comparison" class="scroll-mt-20">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            전체 도구 비교 테이블
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">VS Code 확장으로 충분하지만, 더 복잡한 Git 작업이 필요하면 독립 GUI 도구를 고려해 볼 수 있다.</span></span>
                        </h3>

                        <div class="overflow-x-auto">
                            <table class="w-full text-xs border-collapse">
                                <thead>
                                    <tr class="bg-violet-50">
                                        <th class="text-left p-2 font-semibold text-violet-800 border border-violet-100">도구</th>
                                        <th class="text-left p-2 font-semibold text-violet-800 border border-violet-100">분류</th>
                                        <th class="text-left p-2 font-semibold text-violet-800 border border-violet-100">가격</th>
                                        <th class="text-center p-2 font-semibold text-violet-800 border border-violet-100">OS</th>
                                        <th class="text-center p-2 font-semibold text-violet-800 border border-violet-100">Rebase 시각화</th>
                                        <th class="text-left p-2 font-semibold text-violet-800 border border-violet-100">장점</th>
                                        <th class="text-left p-2 font-semibold text-violet-800 border border-violet-100">단점</th>
                                        <th class="text-center p-2 font-semibold text-violet-800 border border-violet-100">추천도</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    <tr class="bg-green-50">
                                        <td class="p-2 font-medium border border-violet-100">Git Graph</td>
                                        <td class="p-2 border border-violet-100">VS Code 확장</td>
                                        <td class="p-2 border border-violet-100"><span class="text-green-700 font-bold">무료</span></td>
                                        <td class="p-2 text-center border border-violet-100">All</td>
                                        <td class="p-2 text-center border border-violet-100 text-green-600 font-bold">&#x2714;</td>
                                        <td class="p-2 border border-violet-100">IDE 통합, 경량</td>
                                        <td class="p-2 border border-violet-100">대규모 레포에서 느림</td>
                                        <td class="p-2 text-center border border-violet-100"><span class="star-rating">&#x2605;&#x2605;&#x2605;</span></td>
                                    </tr>
                                    <tr class="bg-green-50">
                                        <td class="p-2 font-medium border border-violet-100">GitLens</td>
                                        <td class="p-2 border border-violet-100">VS Code 확장</td>
                                        <td class="p-2 border border-violet-100"><span class="text-green-700 font-bold">무료</span>+유료</td>
                                        <td class="p-2 text-center border border-violet-100">All</td>
                                        <td class="p-2 text-center border border-violet-100">유료</td>
                                        <td class="p-2 border border-violet-100">Inline Blame, 상세 이력</td>
                                        <td class="p-2 border border-violet-100">일부 기능 유료</td>
                                        <td class="p-2 text-center border border-violet-100"><span class="star-rating">&#x2605;&#x2605;&#x2605;</span></td>
                                    </tr>
                                    <tr>
                                        <td class="p-2 font-medium border border-violet-100">VS Code SCM</td>
                                        <td class="p-2 border border-violet-100">내장</td>
                                        <td class="p-2 border border-violet-100"><span class="text-green-700 font-bold">무료</span></td>
                                        <td class="p-2 text-center border border-violet-100">All</td>
                                        <td class="p-2 text-center border border-violet-100 text-red-500 font-bold">&#x2718;</td>
                                        <td class="p-2 border border-violet-100">설치 불필요, 기본 제공</td>
                                        <td class="p-2 border border-violet-100">그래프 없음</td>
                                        <td class="p-2 text-center border border-violet-100"><span class="star-rating">&#x2605;&#x2605;</span><span class="star-empty">&#x2605;</span></td>
                                    </tr>
                                    <tr>
                                        <td class="p-2 font-medium border border-violet-100">GitKraken</td>
                                        <td class="p-2 border border-violet-100">독립 GUI</td>
                                        <td class="p-2 border border-violet-100"><span class="text-orange-700 font-bold">유료</span></td>
                                        <td class="p-2 text-center border border-violet-100">Win/Mac/Linux</td>
                                        <td class="p-2 text-center border border-violet-100 text-green-600 font-bold">&#x2714;</td>
                                        <td class="p-2 border border-violet-100">직관적 UI, 드래그&드롭</td>
                                        <td class="p-2 border border-violet-100">유료, 무거움</td>
                                        <td class="p-2 text-center border border-violet-100"><span class="star-rating">&#x2605;&#x2605;</span><span class="star-empty">&#x2605;</span></td>
                                    </tr>
                                    <tr>
                                        <td class="p-2 font-medium border border-violet-100">Sourcetree</td>
                                        <td class="p-2 border border-violet-100">독립 GUI</td>
                                        <td class="p-2 border border-violet-100"><span class="text-green-700 font-bold">무료</span></td>
                                        <td class="p-2 text-center border border-violet-100">Win/Mac</td>
                                        <td class="p-2 text-center border border-violet-100 text-green-600 font-bold">&#x2714;</td>
                                        <td class="p-2 border border-violet-100">무료, Atlassian 제품</td>
                                        <td class="p-2 border border-violet-100">Linux 미지원, 느림</td>
                                        <td class="p-2 text-center border border-violet-100"><span class="star-rating">&#x2605;&#x2605;</span><span class="star-empty">&#x2605;</span></td>
                                    </tr>
                                    <tr>
                                        <td class="p-2 font-medium border border-violet-100">Fork</td>
                                        <td class="p-2 border border-violet-100">독립 GUI</td>
                                        <td class="p-2 border border-violet-100"><span class="text-orange-700 font-bold">유료</span></td>
                                        <td class="p-2 text-center border border-violet-100">Win/Mac</td>
                                        <td class="p-2 text-center border border-violet-100 text-green-600 font-bold">&#x2714;</td>
                                        <td class="p-2 border border-violet-100">경량, 빠른 속도</td>
                                        <td class="p-2 border border-violet-100">Linux 미지원</td>
                                        <td class="p-2 text-center border border-violet-100"><span class="star-rating">&#x2605;&#x2605;</span><span class="star-empty">&#x2605;</span></td>
                                    </tr>
                                    <tr>
                                        <td class="p-2 font-medium border border-violet-100">lazygit</td>
                                        <td class="p-2 border border-violet-100">터미널</td>
                                        <td class="p-2 border border-violet-100"><span class="text-green-700 font-bold">무료</span></td>
                                        <td class="p-2 text-center border border-violet-100">All</td>
                                        <td class="p-2 text-center border border-violet-100 text-green-600 font-bold">&#x2714;</td>
                                        <td class="p-2 border border-violet-100">터미널 전용, 초경량</td>
                                        <td class="p-2 border border-violet-100">학습 필요</td>
                                        <td class="p-2 text-center border border-violet-100"><span class="star-rating">&#x2605;&#x2605;</span><span class="star-empty">&#x2605;</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="bg-violet-50 rounded-lg p-4 border border-violet-200 mt-4">
                            <p class="text-xs text-violet-800 leading-relaxed">
                                <strong>SAM 프로젝트 추천 조합:</strong>
                                <strong>Git Graph</strong> (브랜치 시각화) + <strong>GitLens</strong> (코드 이력 추적) + <strong>VS Code SCM</strong> (기본 Git 작업).
                                이 3개면 별도 GUI 도구 없이 모든 Git 작업을 처리할 수 있다.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 6. Rebase vs Merge --}}
            {{-- ============================================================ --}}
            <section id="rebase-vs-merge" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">6</span>
                        Rebase vs Merge 시각으로 이해하기
                    </h2>

                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            Merge: 합류 기록을 남긴다
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">두 도로가 만나는 교차로를 만드는 것과 같다. "여기서 합쳐졌다"는 기록이 남는다.</span></span>
                        </h3>
                        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200 mb-4">
                            <p class="text-xs text-gray-600 mb-2">Merge 후 그래프 (다이아몬드 형태)</p>
                            <div class="code-block"><span class="code-comment"># git merge feature/calendar</span>

<span class="code-output">    * ─── M (Merge commit) ← develop
    |\
    | * ── C3 (feat: 날짜 선택)
    | * ── C2 (feat: 달력 UI)
    |/
    * ──── C1 (이전 커밋) ← 분기점

    두 브랜치가 합쳐지는 "다이아몬드" 형태
    Merge 커밋(M)이 생성되어 합류 기록이 남는다</span></div>
                        </div>

                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            Rebase: 직선으로 정리한다
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">줄을 서다가 맨 앞으로 끼어드는 것과 같다. 이력이 깔끔한 직선이 된다.</span></span>
                        </h3>
                        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200 mb-4">
                            <p class="text-xs text-gray-600 mb-2">Rebase 후 그래프 (직선 형태)</p>
                            <div class="code-block"><span class="code-comment"># git rebase develop  (feature 브랜치에서 실행)</span>

<span class="code-output">    * ── C3' (feat: 날짜 선택) ← feature/calendar
    * ── C2' (feat: 달력 UI)
    * ── C1  (이전 커밋) ← develop

    브랜치 분기 없이 깔끔한 "직선" 형태
    커밋이 develop 위에 재배치(re-base)된다</span></div>
                        </div>
                    </div>

                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            비교 정리
                        </h3>
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs">
                                <thead>
                                    <tr class="bg-violet-50">
                                        <th class="text-left p-2 font-semibold text-violet-800">항목</th>
                                        <th class="text-left p-2 font-semibold text-violet-800">Merge</th>
                                        <th class="text-left p-2 font-semibold text-violet-800">Rebase</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    <tr><td class="p-2 font-medium">그래프 모양</td><td class="p-2">다이아몬드 (분기+합류)</td><td class="p-2">직선</td></tr>
                                    <tr><td class="p-2 font-medium">이력</td><td class="p-2">합류 기록 보존</td><td class="p-2">깔끔한 직선 이력</td></tr>
                                    <tr><td class="p-2 font-medium">Merge 커밋</td><td class="p-2">생성됨</td><td class="p-2">생성 안 됨</td></tr>
                                    <tr><td class="p-2 font-medium">안전성</td><td class="p-2">안전 (기존 커밋 변경 없음)</td><td class="p-2">주의 필요 (커밋 해시 변경)</td></tr>
                                    <tr><td class="p-2 font-medium">추천 상황</td><td class="p-2">공유 브랜치, PR 머지</td><td class="p-2">로컬 feature 브랜치 정리</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div id="rebase-warning" class="scroll-mt-20">
                        <div class="bg-red-50 rounded-lg p-4 border border-red-200">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="text-red-600 font-bold text-sm">&#x26A0; 절대 주의!</span>
                            </div>
                            <p class="text-xs text-red-800 leading-relaxed mb-2">
                                <strong>이미 Push한 브랜치에서 Rebase를 하면 안 된다!</strong>
                            </p>
                            <p class="text-xs text-red-700 leading-relaxed mb-3">
                                Rebase는 커밋의 해시값을 변경한다. Push한 브랜치를 Rebase하면 원격 저장소와 이력이 달라져
                                다른 팀원들의 작업이 꼬이게 된다. <strong>Force Push가 필요해지며, 이는 매우 위험하다.</strong>
                            </p>
                            <div class="code-block"><span class="code-comment"># &#x2714; 안전: 아직 Push하지 않은 로컬 브랜치에서 Rebase</span>
<span class="code-keyword">git</span> checkout feature/my-work
<span class="code-keyword">git</span> rebase develop

<span class="code-comment"># &#x2718; 위험: 이미 Push한 브랜치에서 Rebase</span>
<span class="code-keyword">git</span> checkout feature/shared-work   <span class="code-danger"># 이미 push됨!</span>
<span class="code-keyword">git</span> rebase develop                  <span class="code-danger"># &#x2718; 하면 안 됨!</span>
<span class="code-keyword">git</span> push <span class="code-flag">--force</span>                   <span class="code-danger"># &#x2718; 더 위험!</span></div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 7. SAM 프로젝트 실전 워크플로우 --}}
            {{-- ============================================================ --}}
            <section id="sam-workflow" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">7</span>
                        SAM 프로젝트 실전 워크플로우
                    </h2>

                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            브랜치 흐름 도식
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">SAM 프로젝트의 Git 정책은 <a href="{{ route('academy.git-policy') }}" class="text-blue-300 underline">Git 정책</a> 페이지에서 자세히 확인할 수 있다.</span></span>
                        </h3>
                        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200 mb-4">
                            <div class="code-block"><span class="code-comment"># SAM 프로젝트 브랜치 전략</span>

<span class="code-string">feature/*</span> ──push──&gt; <span class="code-keyword">develop</span> ──PR merge──&gt; <span class="code-danger">main/master</span>
                         |                        |
                         v                        v
                   <span class="code-flag">개발 서버</span>               <span class="code-danger">운영 서버</span>
                 (자동 배포)           (Jenkins CI/CD)

<span class="code-comment"># 저장소 3개 (각각 독립적으로 관리)</span>
<span class="code-path">mng/</span>   ── 관리자 웹 (Laravel)
<span class="code-path">api/</span>   ── API 서버 (Laravel)
<span class="code-path">react/</span> ── 프론트엔드 (Next.js)</div>
                        </div>
                    </div>

                    <div id="sam-repos" class="scroll-mt-20 mb-8">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            3개 저장소 관리 팁
                        </h3>
                        <div class="space-y-3">
                            <div class="tool-card bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-2">Git Graph에서 3개 저장소 전환하기</p>
                                <div class="space-y-2 text-xs text-gray-700">
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">1</span>
                                        <span>VS Code에서 <strong>File > Open Folder</strong>로 원하는 저장소 폴더를 연다 (<code class="bg-gray-200 px-1 rounded">mng/</code>, <code class="bg-gray-200 px-1 rounded">api/</code>, <code class="bg-gray-200 px-1 rounded">react/</code>)</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">2</span>
                                        <span>Git Graph 아이콘을 클릭하면 <strong>해당 저장소의 브랜치 그래프</strong>가 표시됨</span>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <span class="bg-violet-100 text-violet-800 font-bold px-2 py-0.5 rounded shrink-0">3</span>
                                        <span>또는 <strong>Workspace</strong> 기능으로 3개 폴더를 한 번에 열어 전환 가능</span>
                                    </div>
                                </div>
                            </div>

                            <div class="tool-card bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-2">Step-by-Step: feature 브랜치 작업 흐름</p>
                                <div class="code-block"><span class="code-comment"># 1. develop 브랜치에서 최신 코드 받기</span>
<span class="code-keyword">git</span> checkout develop
<span class="code-keyword">git</span> pull origin develop

<span class="code-comment"># 2. feature 브랜치 생성</span>
<span class="code-keyword">git</span> checkout <span class="code-flag">-b</span> feature/calendar

<span class="code-comment"># 3. 작업 후 커밋 (SAM 커밋 메시지 규칙 준수)</span>
<span class="code-keyword">git</span> add <span class="code-path">app/Http/Controllers/CalendarController.php</span>
<span class="code-keyword">git</span> commit <span class="code-flag">-m</span> <span class="code-string">"feat: [calendar] 달력 기능 추가"</span>

<span class="code-comment"># 4. develop에 Push (자동 배포됨)</span>
<span class="code-keyword">git</span> checkout develop
<span class="code-keyword">git</span> merge feature/calendar
<span class="code-keyword">git</span> push origin develop

<span class="code-comment"># 5. feature 브랜치 정리</span>
<span class="code-keyword">git</span> branch <span class="code-flag">-d</span> feature/calendar</div>
                            </div>
                        </div>

                        <div class="bg-violet-50 rounded-lg p-4 border border-violet-200 mt-4">
                            <p class="text-xs text-violet-800 leading-relaxed">
                                <strong>&#x1F4D6; 관련 문서:</strong>
                                SAM 프로젝트의 Git 정책, 커밋 메시지 규칙, 브랜치 전략은
                                <a href="{{ route('academy.git-policy') }}" class="text-violet-600 underline hover:text-violet-800 font-medium">Git 정책</a> 페이지에서 자세히 확인할 수 있다.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 8. 터미널 기반 도구 --}}
            {{-- ============================================================ --}}
            <section id="terminal-tools" class="scroll-mt-20">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
                        <span class="w-8 h-8 bg-violet-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">8</span>
                        터미널 기반 도구
                    </h2>

                    <div id="lazygit-usage" class="scroll-mt-20">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-violet-400 rounded-full"></span>
                            lazygit
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">터미널에서 동작하는 Git GUI. SSH 접속 환경에서도 사용할 수 있어 서버 작업 시 유용하다.</span></span>
                        </h3>

                        <div class="bg-amber-50 rounded-lg p-4 border border-amber-100 mb-4">
                            <p class="font-semibold text-amber-800 mb-1">비유: 터미널 속 미니 Git 데스크톱</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                lazygit는 터미널 안에서 동작하는 <strong>미니 Git 데스크톱 앱</strong>이다.
                                키보드만으로 Stage, Commit, Push, Branch 전환, Rebase까지 모든 Git 작업을 할 수 있다.
                            </p>
                        </div>

                        <div class="space-y-4">
                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-2">설치 방법</p>
                                <div class="code-block"><span class="code-comment"># Ubuntu/WSL</span>
<span class="code-keyword">sudo</span> add-apt-repository ppa:lazygit-team/release
<span class="code-keyword">sudo</span> apt update
<span class="code-keyword">sudo</span> apt install lazygit

<span class="code-comment"># macOS</span>
<span class="code-keyword">brew</span> install lazygit

<span class="code-comment"># Windows (scoop)</span>
<span class="code-keyword">scoop</span> install lazygit</div>
                            </div>

                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-2">실행 및 기본 사용</p>
                                <div class="code-block"><span class="code-comment"># Git 저장소에서 실행</span>
<span class="code-prompt">$</span> <span class="code-keyword">lazygit</span>

<span class="code-comment"># 화면 구성 (5개 패널)</span>
<span class="code-output">┌─ Status ──────┬─ Files ──────────────────────────┐
│               │  M app/Controller.php            │
│ On branch:    │  M resources/views/index.blade    │
│   develop     │  A new-file.php                  │
│               │                                  │
├─ Branches ────┤──────────────────────────────────┤
│ * develop     │  Diff / Commit details           │
│   feature/cal │                                  │
│   main        │                                  │
├─ Commits ─────┤                                  │
│ abc1234 feat  │                                  │
│ def5678 fix   │                                  │
└───────────────┴──────────────────────────────────┘</span></div>
                            </div>

                            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                                <p class="text-sm font-semibold text-gray-700 mb-3">핵심 단축키</p>
                                <div class="overflow-x-auto">
                                    <table class="w-full text-xs">
                                        <thead>
                                            <tr class="bg-violet-50">
                                                <th class="text-left p-2 font-semibold text-violet-800">키</th>
                                                <th class="text-left p-2 font-semibold text-violet-800">기능</th>
                                                <th class="text-left p-2 font-semibold text-violet-800">설명</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-100">
                                            <tr><td class="p-2 font-mono font-medium">Space</td><td class="p-2">Stage/Unstage</td><td class="p-2">파일 또는 줄 단위 스테이징</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">c</td><td class="p-2">Commit</td><td class="p-2">스테이지된 파일 커밋</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">P</td><td class="p-2">Push</td><td class="p-2">원격 저장소에 Push</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">p</td><td class="p-2">Pull</td><td class="p-2">원격 저장소에서 Pull</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">n</td><td class="p-2">New Branch</td><td class="p-2">새 브랜치 생성</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">r</td><td class="p-2">Rebase</td><td class="p-2">선택한 브랜치에 Rebase</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">M</td><td class="p-2">Merge</td><td class="p-2">선택한 브랜치 Merge</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">e</td><td class="p-2">Edit</td><td class="p-2">에디터로 파일 열기</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">q</td><td class="p-2">Quit</td><td class="p-2">lazygit 종료</td></tr>
                                            <tr><td class="p-2 font-mono font-medium">?</td><td class="p-2">Help</td><td class="p-2">전체 단축키 보기</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="bg-violet-50 rounded-lg p-4 border border-violet-200">
                                <p class="text-xs text-violet-800 leading-relaxed">
                                    <strong>SSH 환경에서의 장점:</strong>
                                    개발 서버에 SSH로 접속하면 GUI 도구를 사용할 수 없다.
                                    lazygit를 설치해두면 서버에서도 <strong>시각적으로 Git을 관리</strong>할 수 있다.
                                    <code class="bg-violet-100 px-1 rounded">ssh pro@114.203.209.83</code> 접속 후
                                    <code class="bg-violet-100 px-1 rounded">cd /home/webservice/mng && lazygit</code>로 바로 사용 가능.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

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

<script>
(function(){
    // 도움말 풍선 토글
    window.toggleBalloon = function(el) {
        var wasActive = el.classList.contains('is-active');
        document.querySelectorAll('.help-balloon-trigger.is-active').forEach(function(t) {
            t.classList.remove('is-active');
        });
        if (!wasActive) {
            el.classList.add('is-active');
        }
    };

    // 풍선 외부 클릭 시 닫기
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.help-balloon-trigger')) {
            document.querySelectorAll('.help-balloon-trigger.is-active').forEach(function(t) {
                t.classList.remove('is-active');
            });
        }
    });
})();
</script>

@include('components.academy-glossary', ['domain' => 'git-tools'])
@endsection
