@extends('layouts.app')

@section('title', 'Git 정책')

@push('styles')
<style>
    .academy-img-hover {
        transition: box-shadow 0.2s ease;
    }
    .academy-img-hover:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .academy-img-wrap {
        overflow: hidden;
        border-radius: 0.75rem;
    }

    #hover-preview {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 45;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(3px);
        pointer-events: none;
    }
    #hover-preview.is-active {
        display: flex;
        pointer-events: none;
    }
    #hover-preview img {
        max-height: 80vh;
        max-width: 85vw;
        border-radius: 0.75rem;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
        opacity: 0;
        transform: scale(0.3);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    #hover-preview.is-active img {
        opacity: 1;
        transform: scale(1);
    }
    #hover-preview .hover-caption {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255,255,255,0.85);
        font-size: 0.8rem;
        background: rgba(0,0,0,0.5);
        padding: 0.4rem 1rem;
        border-radius: 2rem;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.3s ease 0.15s;
    }
    #hover-preview.is-active .hover-caption {
        opacity: 1;
    }

    #lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 50;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(4px);
    }
    #lightbox.is-open {
        display: flex;
    }
    #lightbox img {
        max-height: 90vh;
        max-width: 90vw;
        border-radius: 0.5rem;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    }

    .help-balloon-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #f0fdfa;
        color: #0f766e;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        border: 1.5px solid #5eead4;
        vertical-align: middle;
        margin-left: 4px;
        transition: all 0.15s ease;
        position: relative;
        user-select: none;
    }
    .help-balloon-trigger:hover {
        background: #0f766e;
        color: white;
        border-color: #0d9488;
    }
    .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.6;
        overflow-x: auto;
        white-space: pre;
    }
    .code-block .code-comment { color: #6c7086; }
    .code-block .code-tag { color: #89b4fa; }
    .code-block .code-attr { color: #f9e2af; }
    .code-block .code-string { color: #a6e3a1; }
    .code-block .code-keyword { color: #cba6f7; }
    .code-block .code-func { color: #89dceb; }
    .code-block .code-number { color: #fab387; }
</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, #042f2e 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: #5eead4;">
                    <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: #99f6e4;">Git 정책</span>
                </div>
                <h1 class="text-3xl font-bold mb-2" style="color: #ffffff;">Git 정책</h1>
                <p class="text-sm" style="color: #cbd5e1;">버전 관리의 기초부터 SAM 프로젝트 Git 정책까지 — 비개발자도 이해하는 Git 가이드</p>
            </div>
            <div class="shrink-0" style="width: 240px; padding: 1.5rem;">
                <div class="overflow-hidden rounded-xl">
                    <img src="{{ asset('images/academy/git-policy/1.svg') }}" alt="버전 관리의 필요성"
                         class="w-full rounded-xl cursor-pointer academy-img-hover"
                         onclick="openLightbox(this)">
                </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-teal-50 border border-teal-200 rounded-xl p-5">
                    <h2 class="font-semibold text-teal-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="#what-is-vcs" class="block text-teal-700 hover:text-teal-900 py-1 font-medium">1. 버전 관리란?</a>
                        <a href="#why-vcs" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">파일 혼돈의 시대</a>
                        <a href="#git-solves" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">Git이 해결하는 것</a>

                        <a href="#git-basics" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">2. Git 기초 개념</a>
                        <a href="#three-stages" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">3단계 구조</a>
                        <a href="#commit-hash" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">커밋과 해시</a>

                        <a href="#remote-repo" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">3. 원격 저장소</a>
                        <a href="#push-pull" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">Push / Pull</a>
                        <a href="#clone-origin" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">Clone과 Origin</a>

                        <a href="#branching" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">4. 브랜치</a>
                        <a href="#branch-types" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">브랜치 종류</a>
                        <a href="#branch-merge" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">머지</a>

                        <a href="#commit-messages" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">5. 커밋 메시지</a>
                        <a href="#sam-convention" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">SAM 컨벤션</a>
                        <a href="#commit-types" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">7가지 타입</a>

                        <a href="#collaboration" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">6. 협업 워크플로우</a>
                        <a href="#pr-review" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">PR과 코드 리뷰</a>
                        <a href="#team-workflow" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">팀 워크플로우</a>

                        <a href="#conflict-resolution" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">7. 충돌 해결</a>
                        <a href="#conflict-markers" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">충돌 마커</a>
                        <a href="#resolve-steps" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">해결 3단계</a>

                        <a href="#sam-git-policy" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">8. SAM Git 정책</a>
                        <a href="#multi-repo" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">3개 저장소</a>
                        <a href="#push-policy" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">푸시 정책</a>

                        <a href="#gitignore-security" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">9. .gitignore와 보안</a>
                        <a href="#gitignore-rules" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">.gitignore 규칙</a>
                        <a href="#env-security" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">.env 보안</a>

                        <a href="#cicd-deployment" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">10. 배포와 CI/CD</a>
                        <a href="#git-deploy" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">Git 기반 배포</a>
                        <a href="#rollback" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">롤백</a>
                    </div>
                </div>
            </div>
        </nav>

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

            {{-- 모바일 목차 --}}
            <div class="lg:hidden bg-teal-50 border border-teal-200 rounded-xl p-4 mb-6">
                <details>
                    <summary class="font-semibold text-teal-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="#what-is-vcs" class="block text-teal-700 hover:text-teal-900 py-1">1. 버전 관리란?</a>
                        <a href="#git-basics" class="block text-teal-700 hover:text-teal-900 py-1">2. Git 기초 개념</a>
                        <a href="#remote-repo" class="block text-teal-700 hover:text-teal-900 py-1">3. 원격 저장소와 클론</a>
                        <a href="#branching" class="block text-teal-700 hover:text-teal-900 py-1">4. 브랜치</a>
                        <a href="#commit-messages" class="block text-teal-700 hover:text-teal-900 py-1">5. 커밋 메시지 작성법</a>
                        <a href="#collaboration" class="block text-teal-700 hover:text-teal-900 py-1">6. 협업 워크플로우</a>
                        <a href="#conflict-resolution" class="block text-teal-700 hover:text-teal-900 py-1">7. 충돌 해결</a>
                        <a href="#sam-git-policy" class="block text-teal-700 hover:text-teal-900 py-1">8. SAM Git 정책</a>
                        <a href="#gitignore-security" class="block text-teal-700 hover:text-teal-900 py-1">9. .gitignore와 보안</a>
                        <a href="#cicd-deployment" class="block text-teal-700 hover:text-teal-900 py-1">10. 배포와 CI/CD</a>
                    </nav>
                </details>
            </div>

            {{-- ============================================================ --}}
            {{-- 1. 버전 관리란? --}}
            {{-- ============================================================ --}}
            <section id="what-is-vcs" 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-teal-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
                        버전 관리란?
                    </h2>

                    <div id="why-vcs" 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-teal-400 rounded-full"></span>
                            파일 혼돈의 시대
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">버전 관리 시스템(VCS)이 없던 시절, 대부분의 팀은 파일명에 날짜나 버전 번호를 붙여 관리했다. 이 방식은 파일이 늘어날수록 어떤 것이 최신인지 알 수 없게 된다.</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-2">비유: 견적서_최종_진짜최종.xlsx의 악몽</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                엑셀 파일을 수정할 때마다 <strong>"견적서_수정.xlsx"</strong>, <strong>"견적서_최종.xlsx"</strong>,
                                <strong>"견적서_최종_수정.xlsx"</strong>, <strong>"견적서_진짜최종_v3.xlsx"</strong>...
                                이렇게 파일이 불어난 경험이 있을 것이다. 어느 것이 진짜 최종인지 아무도 모른다.
                                <span class="glossary-term" data-tooltip="소스 코드 버전 관리 시스템">Git</span>은 이 악몽을 완전히 해결한다.
                            </p>
                        </div>
                        <div class="bg-teal-50 rounded-lg p-5 border border-teal-100 mb-4">
                            <p class="text-sm text-teal-900 leading-relaxed">
                                <strong><span class="glossary-term" data-tooltip="파일의 변경 이력을 체계적으로 기록·관리하는 것">버전 관리</span></strong>란 파일의 변경 이력을 체계적으로 기록하고 관리하는 것이다.
                                누가, 언제, 무엇을, 왜 변경했는지를 자동으로 추적하며,
                                필요하면 과거의 어떤 시점으로든 되돌릴 수 있다.
                            </p>
                        </div>
                    </div>

                    <div id="git-solves" class="scroll-mt-20 mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            Git이 해결하는 3가지 문제
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs mb-4">
                            <div class="bg-teal-50 rounded-lg p-4 border border-teal-200 text-center">
                                <div class="mb-2">
                                    <svg class="w-8 h-8 mx-auto text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                </div>
                                <p class="font-bold text-teal-800 mb-1">1. 이력 추적</p>
                                <p class="text-teal-700">모든 변경이 기록된다.<br>누가, 언제, 왜 바꿨는지<br>언제든 확인 가능.</p>
                            </div>
                            <div class="bg-teal-50 rounded-lg p-4 border border-teal-200 text-center">
                                <div class="mb-2">
                                    <svg class="w-8 h-8 mx-auto text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                                </div>
                                <p class="font-bold text-teal-800 mb-1">2. 동시 작업</p>
                                <p class="text-teal-700">여러 사람이 같은 파일을<br>동시에 수정해도<br>안전하게 합칠 수 있다.</p>
                            </div>
                            <div class="bg-teal-50 rounded-lg p-4 border border-teal-200 text-center">
                                <div class="mb-2">
                                    <svg class="w-8 h-8 mx-auto text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
                                </div>
                                <p class="font-bold text-teal-800 mb-1">3. 되돌리기</p>
                                <p class="text-teal-700">실수해도 과거 시점으로<br>자유롭게 복원 가능.<br>파일이 깨질 걱정 없음.</p>
                            </div>
                        </div>
                        <div class="bg-teal-50 rounded-lg p-4 border border-teal-100 mb-4">
                            <p class="text-xs text-teal-800 leading-relaxed">
                                <strong>Git vs 클라우드 동기화:</strong>
                                Google Drive나 OneDrive도 파일 이력을 보여주지만, <span class="glossary-term" data-tooltip="소스 코드 버전 관리 시스템">Git</span>과는 근본적으로 다르다.
                                클라우드는 자동 저장이지만, Git은 <strong>의미 있는 단위로 직접 기록</strong>한다.
                                "견적 금액 10% 인상 반영"처럼 변경 이유까지 남길 수 있다.
                            </p>
                        </div>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/git-policy/1.svg') }}" alt="버전 관리의 필요성"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">버전 관리 전후 비교 — 파일명 혼돈 vs Git 타임라인</p>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 2. Git 기초 개념 --}}
            {{-- ============================================================ --}}
            <section id="git-basics" 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-teal-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
                        Git 기초 개념
                    </h2>

                    <div id="three-stages" 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-teal-400 rounded-full"></span>
                            Git의 3단계 구조
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">Git은 파일을 3개 영역으로 관리한다. Working Directory(작업 공간), Staging Area(준비 영역), Repository(저장소). 각 영역의 역할을 이해하면 Git의 핵심을 파악한 것이다.</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-2">비유: 책상 → 봉투 → 캐비닛</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                <strong>Working Directory</strong>는 작업 중인 <strong>책상</strong>이다. 파일을 자유롭게 수정한다.
                                <strong><span class="glossary-term" data-tooltip="커밋할 파일을 미리 모아두는 중간 영역">Staging Area</span></strong>는 보낼 서류를 담는 <strong>봉투</strong>다. git add로 봉투에 넣는다.
                                <strong><span class="glossary-term" data-tooltip="Git이 파일과 변경 이력을 보관하는 공간">Repository</span></strong>는 최종 보관하는 <strong>캐비닛</strong>이다. git commit으로 캐비닛에 저장한다.
                            </p>
                        </div>
                        <div class="code-block mb-4"><span class="code-comment"># 1. 책상에서 파일 수정 (Working Directory)</span>
<span class="code-func">파일을 수정한다</span>

<span class="code-comment"># 2. 봉투에 넣기 (Staging Area)</span>
<span class="code-keyword">git add</span> <span class="code-string">파일이름.php</span>

<span class="code-comment"># 3. 캐비닛에 보관 (Repository)</span>
<span class="code-keyword">git commit</span> <span class="code-attr">-m</span> <span class="code-string">"feat: [order] 주문 기능 추가"</span></div>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/git-policy/2.svg') }}" alt="Git 3단계 구조"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">Git 3단계 — Working Directory → Staging → Repository</p>
                    </div>

                    <div id="commit-hash" class="scroll-mt-20 mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            커밋과 해시
                        </h3>
                        <div class="bg-teal-50 rounded-lg p-5 border border-teal-100 mb-4">
                            <p class="text-sm text-teal-900 leading-relaxed">
                                <strong><span class="glossary-term" data-tooltip="변경 사항을 저장소에 기록하는 행위">Commit</span></strong>은 특정 시점의 스냅샷이다.
                                각 커밋에는 <strong><span class="glossary-term" data-tooltip="각 커밋에 부여되는 40자리 고유 식별자">커밋 해시</span></strong>라는 고유 ID가 자동 부여된다.
                                예: <code class="text-xs bg-teal-100 px-1 rounded">a1b2c3d</code>.
                                이 해시로 어떤 커밋이든 정확히 찾아갈 수 있다.
                            </p>
                        </div>
                        <div class="overflow-x-auto mb-4">
                            <table class="w-full text-sm border-collapse">
                                <thead>
                                    <tr class="border-b-2 border-gray-200 bg-gray-50">
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">명령어</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">역할</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">비유</th>
                                    </tr>
                                </thead>
                                <tbody class="text-xs text-gray-700">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-teal-600">git status</td>
                                        <td class="py-2 px-3">현재 상태 확인</td>
                                        <td class="py-2 px-3">책상 위 정리 상태 확인</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-teal-600">git add</td>
                                        <td class="py-2 px-3">스테이징에 추가</td>
                                        <td class="py-2 px-3">서류를 봉투에 넣기</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-teal-600">git commit</td>
                                        <td class="py-2 px-3">변경 기록 저장</td>
                                        <td class="py-2 px-3">봉투를 캐비닛에 보관</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-teal-600">git log</td>
                                        <td class="py-2 px-3">커밋 이력 조회</td>
                                        <td class="py-2 px-3">캐비닛 보관 목록 열람</td>
                                    </tr>
                                    <tr>
                                        <td class="py-2 px-3 font-mono font-bold text-teal-600">git diff</td>
                                        <td class="py-2 px-3">변경 내용 비교</td>
                                        <td class="py-2 px-3">수정 전후 대조</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 3. 원격 저장소와 클론 --}}
            {{-- ============================================================ --}}
            <section id="remote-repo" 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-teal-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">3</span>
                        원격 저장소와 클론
                    </h2>

                    <div id="push-pull" 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-teal-400 rounded-full"></span>
                            Push와 Pull
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">원격 저장소(Remote)는 팀원 모두가 접근할 수 있는 중앙 서버에 있는 저장소다. GitHub, GitLab, Gitea 등이 원격 저장소 서비스를 제공한다.</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-2">비유: 팀 공용 캐비닛</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                로컬 저장소가 <strong>내 책상의 캐비닛</strong>이라면, 원격 저장소는 <strong>팀 공용 캐비닛</strong>이다.
                                <strong><span class="glossary-term" data-tooltip="로컬 커밋을 원격 저장소에 업로드하는 것">Push</span></strong>는 내 서류를 공용 캐비닛에 올리는 것이고,
                                <strong><span class="glossary-term" data-tooltip="원격 저장소의 최신 변경 사항을 로컬로 가져오는 것">Pull</span></strong>은 다른 사람이 올린 서류를 내 책상으로 가져오는 것이다.
                            </p>
                        </div>
                        <div class="code-block mb-4"><span class="code-comment"># 내 작업을 원격에 업로드</span>
<span class="code-keyword">git push</span> <span class="code-func">origin</span> <span class="code-string">develop</span>

<span class="code-comment"># 원격의 최신 변경을 가져오기</span>
<span class="code-keyword">git pull</span> <span class="code-func">origin</span> <span class="code-string">develop</span></div>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/git-policy/3.svg') }}" alt="원격 저장소"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">원격 저장소 — 로컬 ↔ 중앙 서버 동기화</p>
                    </div>

                    <div id="clone-origin" class="scroll-mt-20 mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            Clone과 Origin
                        </h3>
                        <div class="bg-teal-50 rounded-lg p-5 border border-teal-100 mb-4">
                            <p class="text-sm text-teal-900 leading-relaxed">
                                <strong><span class="glossary-term" data-tooltip="원격 저장소의 전체 내용을 로컬에 복사하는 것">Clone</span></strong>은 원격 저장소를 통째로 내 PC에 복사하는 것이다.
                                프로젝트에 처음 참여할 때 한 번만 실행한다.
                                Clone하면 원격 저장소에 자동으로 <strong><span class="glossary-term" data-tooltip="원격 저장소의 기본 이름">Origin</span></strong>이라는 이름이 붙는다.
                            </p>
                        </div>
                        <div class="code-block mb-4"><span class="code-comment"># 프로젝트 처음 참여 시 — 전체 복사</span>
<span class="code-keyword">git clone</span> <span class="code-string">https://gitea.example.com/sam/mng.git</span>

<span class="code-comment"># 이후에는 pull로 최신 변경만 동기화</span>
<span class="code-keyword">git pull</span></div>
                        <div class="bg-teal-50 rounded-lg p-4 border border-teal-100 mb-4">
                            <p class="text-xs text-teal-800 leading-relaxed">
                                <strong>SAM의 원격 저장소:</strong>
                                SAM은 자체 호스팅 <span class="glossary-term" data-tooltip="경량 자체 호스팅 Git 서비스">Gitea</span> 서버를 사용한다.
                                GitHub처럼 웹 브라우저에서 코드를 보고, PR을 만들고, 이슈를 관리할 수 있다.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 4. 브랜치 --}}
            {{-- ============================================================ --}}
            <section id="branching" 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-teal-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">4</span>
                        브랜치
                    </h2>

                    <div id="branch-types" 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-teal-400 rounded-full"></span>
                            브랜치란?
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">브랜치(Branch)는 '가지'라는 뜻이다. 나무 줄기(main)에서 가지가 뻗어나가듯, 메인 코드에서 분기하여 독립적으로 작업한 뒤 다시 합친다.</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-2">비유: 생산라인 분기점</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                공장의 메인 생산라인(main)에서 <strong>시험 생산라인</strong>을 따로 만들어 새 제품을 테스트하는 것이다.
                                테스트가 성공하면 메인 라인에 합류시키고(merge), 실패하면 시험 라인만 폐쇄하면 된다.
                                메인 라인은 영향 없이 계속 가동된다.
                            </p>
                        </div>
                        <div class="overflow-x-auto mb-4">
                            <table class="w-full text-sm border-collapse">
                                <thead>
                                    <tr class="border-b-2 border-gray-200 bg-gray-50">
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">브랜치</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">역할</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">예시</th>
                                    </tr>
                                </thead>
                                <tbody class="text-xs text-gray-700">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-teal-600">main</td>
                                        <td class="py-2 px-3">운영 서버에 배포된 안정 코드</td>
                                        <td class="py-2 px-3">실제 서비스 중인 코드</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-teal-600"><span class="glossary-term" data-tooltip="개발 통합 브랜치">develop</span></td>
                                        <td class="py-2 px-3">개발 통합 브랜치</td>
                                        <td class="py-2 px-3">다음 릴리즈 준비 코드</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-blue-600"><span class="glossary-term" data-tooltip="새 기능을 개발하는 임시 브랜치">feature/*</span></td>
                                        <td class="py-2 px-3">새 기능 개발</td>
                                        <td class="py-2 px-3">feature/file-upload</td>
                                    </tr>
                                    <tr>
                                        <td class="py-2 px-3 font-mono font-bold text-red-600"><span class="glossary-term" data-tooltip="운영 중 긴급 버그를 수정하는 브랜치">hotfix/*</span></td>
                                        <td class="py-2 px-3">긴급 버그 수정</td>
                                        <td class="py-2 px-3">hotfix/login-session-bug</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/git-policy/4.svg') }}" alt="브랜치 전략"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">브랜치 전략 — main / develop / feature / hotfix</p>
                    </div>

                    <div id="branch-merge" class="scroll-mt-20 mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            브랜치 만들기와 머지
                        </h3>
                        <div class="code-block mb-4"><span class="code-comment"># 새 기능 브랜치 만들기</span>
<span class="code-keyword">git checkout</span> <span class="code-attr">-b</span> <span class="code-string">feature/file-upload</span>

<span class="code-comment"># 작업 후 커밋</span>
<span class="code-keyword">git add</span> <span class="code-string">.</span>
<span class="code-keyword">git commit</span> <span class="code-attr">-m</span> <span class="code-string">"feat: [file] 파일 업로드 기능 추가"</span>

<span class="code-comment"># develop 브랜치로 돌아와서 머지</span>
<span class="code-keyword">git checkout</span> <span class="code-string">develop</span>
<span class="code-keyword">git merge</span> <span class="code-string">feature/file-upload</span></div>
                        <div class="bg-teal-50 rounded-lg p-4 border border-teal-100 mb-4">
                            <p class="text-xs text-teal-800 leading-relaxed">
                                <strong><span class="glossary-term" data-tooltip="두 브랜치의 변경 사항을 하나로 합치는 것">Merge</span></strong>는 분기된 작업을 다시 하나로 합치는 것이다.
                                feature 브랜치에서 개발을 완료하면 develop에 merge하고,
                                develop이 안정화되면 main에 merge한다.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 5. 커밋 메시지 작성법 --}}
            {{-- ============================================================ --}}
            <section id="commit-messages" 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-teal-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">5</span>
                        커밋 메시지 작성법
                    </h2>

                    <div id="sam-convention" 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-teal-400 rounded-full"></span>
                            SAM 커밋 메시지 컨벤션
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">커밋 메시지 컨벤션이란 팀 전체가 동일한 형식으로 커밋 메시지를 작성하는 약속이다. 통일된 형식은 이력 검색과 코드 리뷰를 빠르게 만든다.</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-2">비유: 작업 일지</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                커밋 메시지는 <strong>공장의 작업 일지</strong>다. "작업함"이라고 적으면 나중에 아무도 내용을 알 수 없다.
                                <strong>"셔터 A라인 모터 교체 완료 — 소음 문제 해결"</strong>처럼 구체적으로 적어야 한다.
                            </p>
                        </div>
                        <div class="bg-teal-50 rounded-lg p-5 border border-teal-100 mb-4">
                            <p class="text-sm text-teal-900 leading-relaxed mb-3">
                                <strong>SAM 프로젝트 커밋 메시지 형식:</strong>
                            </p>
                            <div class="code-block"><span class="code-keyword">type</span>: [<span class="code-attr">scope</span>] <span class="code-string">작업 내용</span>

<span class="code-comment">- 세부 항목 (선택)</span>
<span class="code-comment">- 세부 항목 2</span></div>
                        </div>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/git-policy/5.svg') }}" alt="커밋 메시지"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">좋은 커밋 메시지 vs 나쁜 커밋 메시지</p>
                    </div>

                    <div id="commit-types" class="scroll-mt-20 mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            7가지 커밋 타입
                        </h3>
                        <div class="overflow-x-auto mb-4">
                            <table class="w-full text-sm border-collapse">
                                <thead>
                                    <tr class="border-b-2 border-gray-200 bg-gray-50">
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">타입</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">설명</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">예시</th>
                                    </tr>
                                </thead>
                                <tbody class="text-xs text-gray-700">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-green-600">feat</td>
                                        <td class="py-2 px-3">새로운 기능 추가</td>
                                        <td class="py-2 px-3">feat: [file] 파일 업로드 기능 추가</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-red-600">fix</td>
                                        <td class="py-2 px-3">버그 수정</td>
                                        <td class="py-2 px-3">fix: [auth] 세션 만료 오류 수정</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-purple-600">refactor</td>
                                        <td class="py-2 px-3">코드 구조 개선</td>
                                        <td class="py-2 px-3">refactor: [user] 서비스 메서드 분리</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-blue-600">docs</td>
                                        <td class="py-2 px-3">문서 변경</td>
                                        <td class="py-2 px-3">docs: API 문서 업데이트</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-yellow-600">chore</td>
                                        <td class="py-2 px-3">설정/빌드 변경</td>
                                        <td class="py-2 px-3">chore: composer 패키지 업데이트</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-orange-600">style</td>
                                        <td class="py-2 px-3">코드 스타일 수정</td>
                                        <td class="py-2 px-3">style: <span class="glossary-term" data-tooltip="Laravel 공식 코드 포맷터">Pint</span> 포맷팅 적용</td>
                                    </tr>
                                    <tr>
                                        <td class="py-2 px-3 font-mono font-bold text-cyan-600">test</td>
                                        <td class="py-2 px-3">테스트 추가/수정</td>
                                        <td class="py-2 px-3">test: Product API 테스트 추가</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs mb-4">
                            <div class="bg-green-50 rounded-lg p-3 border border-green-200">
                                <p class="font-bold text-green-800 mb-1">fix = 깨진 것을 고친다</p>
                                <p class="text-green-700">버그, 오류, 잘못된 결과</p>
                            </div>
                            <div class="bg-blue-50 rounded-lg p-3 border border-blue-200">
                                <p class="font-bold text-blue-800 mb-1">feat = 없던 것을 만든다</p>
                                <p class="text-blue-700">신규 기능, 기능 확장</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-3 border border-purple-200">
                                <p class="font-bold text-purple-800 mb-1">refactor = 같은 것을 더 좋게</p>
                                <p class="text-purple-700">구조 개선, 중복 제거</p>
                            </div>
                        </div>
                        <div class="bg-teal-50 rounded-lg p-4 border border-teal-100 mb-4">
                            <p class="text-xs text-teal-800 leading-relaxed">
                                <strong>커밋 빈도:</strong>
                                "논리적 단위"로 커밋한다. 파일 하나 수정마다 커밋하는 것은 너무 잦고,
                                몇 시간 작업을 한 번에 커밋하면 되돌리기 어렵다.
                                하나의 의미 있는 변경이 완성되면 커밋한다.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 6. 협업 워크플로우 --}}
            {{-- ============================================================ --}}
            <section id="collaboration" 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-teal-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">6</span>
                        협업 워크플로우
                    </h2>

                    <div id="pr-review" 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-teal-400 rounded-full"></span>
                            Pull Request와 코드 리뷰
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">Pull Request(PR)란 내가 만든 변경 사항을 팀 브랜치에 합쳐달라고 요청하는 것이다. 다른 개발자가 코드를 검토(리뷰)한 후 승인하면 머지된다.</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-2">비유: 품질검사 신청서</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                <span class="glossary-term" data-tooltip="코드 변경을 본 브랜치에 합쳐달라는 요청">Pull Request</span>는 <strong>품질검사 신청서</strong>다.
                                생산라인에서 만든 제품을 바로 출하하지 않고, 품질검사 부서에 "검사해주세요"라고 신청한다.
                                검사관(리뷰어)이 확인하고 "합격"을 주면 출하(merge)된다.
                            </p>
                        </div>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/git-policy/6.svg') }}" alt="PR 워크플로우"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">PR 워크플로우 — 브랜치 → 커밋 → PR → 리뷰 → 머지</p>
                    </div>

                    <div id="team-workflow" class="scroll-mt-20 mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            팀 워크플로우
                        </h3>
                        <div class="bg-teal-50 rounded-lg p-5 border border-teal-100 mb-4">
                            <p class="text-sm text-teal-900 leading-relaxed mb-3">
                                <strong>SAM 프로젝트의 일반적인 작업 흐름:</strong>
                            </p>
                            <div class="space-y-2 text-xs text-teal-800">
                                <div class="flex items-start gap-2">
                                    <span class="bg-teal-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs shrink-0">1</span>
                                    <span>develop에서 feature 브랜치를 만든다</span>
                                </div>
                                <div class="flex items-start gap-2">
                                    <span class="bg-teal-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs shrink-0">2</span>
                                    <span>기능을 개발하고 커밋한다</span>
                                </div>
                                <div class="flex items-start gap-2">
                                    <span class="bg-teal-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs shrink-0">3</span>
                                    <span>Pull Request를 생성하여 코드 리뷰를 요청한다</span>
                                </div>
                                <div class="flex items-start gap-2">
                                    <span class="bg-teal-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs shrink-0">4</span>
                                    <span>리뷰 승인 후 develop에 머지한다</span>
                                </div>
                                <div class="flex items-start gap-2">
                                    <span class="bg-teal-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs shrink-0">5</span>
                                    <span>develop이 안정되면 main에 머지하고 배포한다</span>
                                </div>
                            </div>
                        </div>
                        <div class="code-block mb-4"><span class="code-comment"># 1. 브랜치 생성</span>
<span class="code-keyword">git checkout</span> <span class="code-attr">-b</span> <span class="code-string">feature/file-storage-system</span>

<span class="code-comment"># 2. 작업 및 커밋</span>
<span class="code-keyword">git add</span> <span class="code-string">.</span>
<span class="code-keyword">git commit</span> <span class="code-attr">-m</span> <span class="code-string">"feat: [file] 파일 저장 시스템 구현"</span>

<span class="code-comment"># 3. 원격에 푸시 후 PR 생성</span>
<span class="code-keyword">git push</span> <span class="code-func">origin</span> <span class="code-string">feature/file-storage-system</span>
<span class="code-comment"># → Gitea에서 PR 생성</span></div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 7. 충돌 해결 --}}
            {{-- ============================================================ --}}
            <section id="conflict-resolution" 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-teal-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">7</span>
                        충돌 해결
                    </h2>

                    <div id="conflict-markers" 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-teal-400 rounded-full"></span>
                            충돌이란?
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">충돌(Conflict)은 두 사람이 같은 파일의 같은 줄을 다르게 수정했을 때 발생한다. Git이 어떤 변경을 채택해야 할지 모르기 때문에 사람이 직접 선택해야 한다.</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-2">비유: 공동 엑셀 편집</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                A씨와 B씨가 같은 엑셀 파일의 <strong>같은 셀</strong>을 동시에 다른 값으로 수정한 상황이다.
                                A씨는 "100,000"으로, B씨는 "150,000"으로 바꿨다. 누구 것을 쓸지는 사람이 판단해야 한다.
                            </p>
                        </div>
                        <div class="code-block mb-4"><span class="code-comment">// 충돌 마커 — Git이 파일에 표시해주는 형태</span>
<span class="code-tag">&lt;&lt;&lt;&lt;&lt;&lt;&lt; HEAD</span>
<span class="code-string">$price = 100000;</span>     <span class="code-comment">// 내가 수정한 내용</span>
<span class="code-attr">=======</span>
<span class="code-keyword">$price = 150000;</span>     <span class="code-comment">// 상대방이 수정한 내용</span>
<span class="code-tag">&gt;&gt;&gt;&gt;&gt;&gt;&gt; feature/price-update</span></div>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/git-policy/7.svg') }}" alt="충돌 해결"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">머지 충돌 — 두 브랜치가 같은 부분을 수정했을 때</p>
                    </div>

                    <div id="resolve-steps" class="scroll-mt-20 mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            충돌 해결 3단계
                        </h3>
                        <div class="space-y-3 mb-4">
                            <div class="bg-teal-50 rounded-lg p-4 border border-teal-200">
                                <p class="font-bold text-teal-800 mb-1 text-sm">1단계: 충돌 파일 확인</p>
                                <p class="text-xs text-teal-700"><code class="bg-teal-100 px-1 rounded"><span class="glossary-term" data-tooltip="현재 작업 디렉토리의 상태를 보여주는 명령어">git status</span></code>로 "both modified" 표시된 파일을 찾는다.</p>
                            </div>
                            <div class="bg-teal-50 rounded-lg p-4 border border-teal-200">
                                <p class="font-bold text-teal-800 mb-1 text-sm">2단계: 내용 선택</p>
                                <p class="text-xs text-teal-700">에디터에서 <code class="bg-teal-100 px-1 rounded">&lt;&lt;&lt;&lt;&lt;&lt;&lt;</code>, <code class="bg-teal-100 px-1 rounded">=======</code>, <code class="bg-teal-100 px-1 rounded">&gt;&gt;&gt;&gt;&gt;&gt;&gt;</code> 마커를 찾고 원하는 내용만 남긴다.</p>
                            </div>
                            <div class="bg-teal-50 rounded-lg p-4 border border-teal-200">
                                <p class="font-bold text-teal-800 mb-1 text-sm">3단계: 커밋</p>
                                <p class="text-xs text-teal-700"><code class="bg-teal-100 px-1 rounded">git add</code>로 해결된 파일을 추가하고 <code class="bg-teal-100 px-1 rounded">git commit</code>으로 머지를 완료한다.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 8. SAM 프로젝트 Git 정책 --}}
            {{-- ============================================================ --}}
            <section id="sam-git-policy" 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-teal-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">8</span>
                        SAM 프로젝트 Git 정책
                    </h2>

                    <div id="multi-repo" 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-teal-400 rounded-full"></span>
                            3개 독립 저장소
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">SAM은 멀티레포 전략을 사용한다. 하나의 거대한 저장소(모노레포) 대신, 역할별로 분리된 3개 저장소를 운영하여 각 팀이 독립적으로 작업할 수 있다.</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-2">비유: 공장 3개 부서</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                SAM의 3개 저장소는 <strong>공장의 3개 독립 부서</strong>와 같다.
                                <strong>MNG(관리부)</strong>는 관리자 화면, <strong>API(생산부)</strong>는 데이터 처리,
                                <strong>React(영업부)</strong>는 고객용 화면을 담당한다.
                                각 부서는 독립적으로 작업하지만, 하나의 공장(DB)을 공유한다.
                            </p>
                        </div>
                        <div class="overflow-x-auto mb-4">
                            <table class="w-full text-sm border-collapse">
                                <thead>
                                    <tr class="border-b-2 border-gray-200 bg-gray-50">
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">저장소</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">경로</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">역할</th>
                                    </tr>
                                </thead>
                                <tbody class="text-xs text-gray-700">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-teal-600">mng</td>
                                        <td class="py-2 px-3">/home/aweso/sam/mng</td>
                                        <td class="py-2 px-3">관리자 웹 (Laravel + Blade)</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-mono font-bold text-blue-600">api</td>
                                        <td class="py-2 px-3">/home/aweso/sam/api</td>
                                        <td class="py-2 px-3">API 서버 (Laravel)</td>
                                    </tr>
                                    <tr>
                                        <td class="py-2 px-3 font-mono font-bold text-purple-600">react</td>
                                        <td class="py-2 px-3">/home/aweso/sam/react</td>
                                        <td class="py-2 px-3">프론트엔드 (Next.js)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/git-policy/8.svg') }}" alt="SAM 멀티레포"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">SAM <span class="glossary-term" data-tooltip="하나의 프로젝트를 여러 독립 저장소로 나누어 관리하는 전략">멀티레포</span> 구조 — mng / api / react</p>
                        <div class="code-block mb-4"><span class="code-comment"># 각 저장소에서 개별 커밋 (중요!)</span>
<span class="code-keyword">cd</span> <span class="code-string">/home/aweso/sam/mng</span>
<span class="code-keyword">git add</span> <span class="code-string">.</span> && <span class="code-keyword">git commit</span> <span class="code-attr">-m</span> <span class="code-string">"feat: [order] 주문 화면 추가"</span>

<span class="code-keyword">cd</span> <span class="code-string">/home/aweso/sam/api</span>
<span class="code-keyword">git add</span> <span class="code-string">.</span> && <span class="code-keyword">git commit</span> <span class="code-attr">-m</span> <span class="code-string">"feat: [order] 주문 API 추가"</span></div>
                    </div>

                    <div id="push-policy" class="scroll-mt-20 mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            푸시 정책과 Pre-commit
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs mb-4">
                            <div class="bg-teal-50 rounded-lg p-4 border border-teal-200">
                                <p class="font-bold text-teal-800 mb-2">푸시 정책</p>
                                <ul class="text-teal-700 space-y-1">
                                    <li>- main/master에서 직접 작업 금지</li>
                                    <li>- develop 브랜치를 기본으로 사용</li>
                                    <li>- 사용자(팀장)가 수동으로 push</li>
                                    <li>- Claude는 커밋까지만 수행</li>
                                </ul>
                            </div>
                            <div class="bg-teal-50 rounded-lg p-4 border border-teal-200">
                                <p class="font-bold text-teal-800 mb-2"><span class="glossary-term" data-tooltip="커밋 실행 직전에 자동으로 실행되는 스크립트">Pre-commit Hook</span></p>
                                <ul class="text-teal-700 space-y-1">
                                    <li>- 커밋 전 <span class="glossary-term" data-tooltip="Laravel 공식 코드 포맷터">Pint</span> 자동 실행</li>
                                    <li>- 코드 포맷팅 자동 정리</li>
                                    <li>- Claude 서명 자동 제거</li>
                                    <li>- 포맷 오류 시 커밋 차단</li>
                                </ul>
                            </div>
                        </div>
                        <div class="bg-teal-50 rounded-lg p-4 border border-teal-100 mb-4">
                            <p class="text-xs text-teal-800 leading-relaxed">
                                <strong>커밋 전 체크리스트:</strong>
                                <code class="bg-teal-100 px-1 rounded">./vendor/bin/pint</code> 실행 →
                                <code class="bg-teal-100 px-1 rounded"><span class="glossary-term" data-tooltip="파일의 변경 내용을 줄 단위로 비교하는 명령어">git diff</span></code>로 변경 검토 →
                                불필요 파일(.env 등) 제외 →
                                <code class="bg-teal-100 px-1 rounded">git add</code> →
                                <code class="bg-teal-100 px-1 rounded">git commit</code>
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 9. .gitignore와 보안 --}}
            {{-- ============================================================ --}}
            <section id="gitignore-security" 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-teal-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">9</span>
                        .gitignore와 보안
                    </h2>

                    <div id="gitignore-rules" 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-teal-400 rounded-full"></span>
                            .gitignore란?
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">.gitignore는 Git이 추적하지 않을 파일 목록이다. 여기에 등록된 파일은 git add 해도 스테이징되지 않는다. 비밀번호, 대용량 파일, OS 임시 파일 등을 제외할 때 사용한다.</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-2">비유: 캐비닛 반입금지 목록</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                <span class="glossary-term" data-tooltip="Git이 추적하지 않을 파일 목록을 정의하는 파일">.gitignore</span>는 캐비닛(저장소)에 <strong>넣으면 안 되는 물건 목록</strong>이다.
                                비밀문서(비밀번호), 임시 메모(로그 파일), 개인 물건(IDE 설정) 등은
                                공용 캐비닛에 넣지 않는다.
                            </p>
                        </div>
                        <div class="code-block mb-4"><span class="code-comment"># SAM .gitignore 주요 항목</span>

<span class="code-comment"># 환경 설정 (비밀번호 포함)</span>
<span class="code-keyword">.env</span>
<span class="code-keyword">.env.*</span>
<span class="code-string">!.env.example</span>    <span class="code-comment"># 양식만 추적</span>

<span class="code-comment"># 외부 패키지 (용량 큼)</span>
<span class="code-keyword">/vendor/</span>
<span class="code-keyword">/node_modules/</span>

<span class="code-comment"># IDE 설정 (개인별 다름)</span>
<span class="code-keyword">.idea/</span>
<span class="code-keyword">.vscode/</span>
<span class="code-keyword">.cursor/</span>

<span class="code-comment"># 로그, 백업, 바이너리</span>
<span class="code-keyword">*.log</span>
<span class="code-keyword">*.sql</span>
<span class="code-keyword">*.zip</span></div>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/git-policy/9.svg') }}" alt=".gitignore 보안"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">.gitignore — 민감 파일을 저장소에서 차단하는 방패</p>
                    </div>

                    <div id="env-security" class="scroll-mt-20 mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            .env 파일 보안
                        </h3>
                        <div class="bg-red-50 rounded-lg p-4 border border-red-200 mb-4">
                            <p class="font-bold text-red-800 mb-2 text-sm">절대 금지: .env 파일을 Git에 커밋</p>
                            <p class="text-xs text-red-700 leading-relaxed">
                                .env 파일에는 데이터베이스 비밀번호, API 키, 암호화 키가 들어 있다.
                                이 파일이 Git에 올라가면 모든 이력에 비밀번호가 남게 되어
                                삭제해도 이력에서 복구할 수 있다. 한 번 유출되면 모든 비밀번호를 교체해야 한다.
                            </p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs mb-4">
                            <div class="bg-red-50 rounded-lg p-3 border border-red-200">
                                <p class="font-bold text-red-800 mb-1">Git에 올리면 안 되는 파일</p>
                                <p class="text-red-700">.env, credentials.json, *.key<br>storage/secrets/, auth.json</p>
                            </div>
                            <div class="bg-green-50 rounded-lg p-3 border border-green-200">
                                <p class="font-bold text-green-800 mb-1">Git에 올려야 하는 파일</p>
                                <p class="text-green-700">.env.example (양식만, 값은 비움)<br>.gitignore, .gitattributes</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 10. 배포와 CI/CD --}}
            {{-- ============================================================ --}}
            <section id="cicd-deployment" 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-teal-600 text-white rounded-lg flex items-center justify-center text-sm font-bold">10</span>
                        배포와 CI/CD
                    </h2>

                    <div id="git-deploy" 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-teal-400 rounded-full"></span>
                            Git 기반 배포
                            <span class="help-balloon-trigger" onclick="toggleBalloon(this)">?<span class="help-balloon">CI/CD는 코드 변경 시 자동으로 빌드→테스트→배포하는 자동화 파이프라인이다. CI(Continuous Integration)는 코드 통합, CD(Continuous Deployment)는 자동 배포를 뜻한다.</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-2">비유: 자동화 컨베이어 벨트</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                <span class="glossary-term" data-tooltip="지속적 통합/지속적 배포">CI/CD</span>는 공장의 <strong>자동화 컨베이어 벨트</strong>다.
                                원재료(코드)를 올려놓으면 가공(빌드) → 품질검사(테스트) → 포장(패키징) → 출하(배포)가
                                자동으로 진행된다. 사람이 각 단계를 직접 실행할 필요가 없다.
                            </p>
                        </div>
                        <div class="bg-teal-50 rounded-lg p-5 border border-teal-100 mb-4">
                            <p class="text-sm text-teal-900 leading-relaxed mb-3">
                                <strong>SAM의 배포 흐름:</strong>
                            </p>
                            <div class="space-y-2 text-xs text-teal-800">
                                <div class="flex items-start gap-2">
                                    <span class="bg-teal-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs shrink-0">1</span>
                                    <span>개발자가 코드 작성 후 git commit</span>
                                </div>
                                <div class="flex items-start gap-2">
                                    <span class="bg-teal-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs shrink-0">2</span>
                                    <span>팀장이 git push로 원격 저장소에 업로드</span>
                                </div>
                                <div class="flex items-start gap-2">
                                    <span class="bg-teal-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs shrink-0">3</span>
                                    <span>서버에서 git pull로 최신 코드 받기</span>
                                </div>
                                <div class="flex items-start gap-2">
                                    <span class="bg-teal-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs shrink-0">4</span>
                                    <span>composer install → migrate → config:clear</span>
                                </div>
                                <div class="flex items-start gap-2">
                                    <span class="bg-teal-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs shrink-0">5</span>
                                    <span>서비스 정상 동작 확인</span>
                                </div>
                            </div>
                        </div>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/git-policy/10.svg') }}" alt="CI/CD 파이프라인"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 320px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">CI/CD 파이프라인 — 코드에서 배포까지의 자동화 흐름</p>
                    </div>

                    <div id="rollback" class="scroll-mt-20 mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                            롤백: revert vs reset
                        </h3>
                        <div class="bg-teal-50 rounded-lg p-5 border border-teal-100 mb-4">
                            <p class="text-sm text-teal-900 leading-relaxed">
                                배포 후 문제가 발생하면 이전 버전으로 되돌려야 한다. Git에서는 두 가지 방법이 있다.
                            </p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs mb-4">
                            <div class="bg-green-50 rounded-lg p-4 border border-green-200">
                                <p class="font-bold text-green-800 mb-2"><span class="glossary-term" data-tooltip="특정 커밋의 변경 사항을 되돌리는 새 커밋을 만드는 것">Revert</span> (권장)</p>
                                <ul class="text-green-700 space-y-1">
                                    <li>- 되돌리는 <strong>새 커밋</strong>을 생성</li>
                                    <li>- 이력이 보존되어 안전</li>
                                    <li>- 팀 작업에 영향 없음</li>
                                    <li>- <code class="bg-green-100 px-1 rounded">git revert &lt;해시&gt;</code></li>
                                </ul>
                            </div>
                            <div class="bg-red-50 rounded-lg p-4 border border-red-200">
                                <p class="font-bold text-red-800 mb-2"><span class="glossary-term" data-tooltip="커밋 이력 자체를 되돌리는 것">Reset</span> (주의)</p>
                                <ul class="text-red-700 space-y-1">
                                    <li>- 커밋 이력 자체를 삭제</li>
                                    <li>- 되돌린 기록이 남지 않음</li>
                                    <li>- 팀 작업에 혼란 가능</li>
                                    <li>- 로컬에서만 사용 권장</li>
                                </ul>
                            </div>
                        </div>
                        <div class="code-block mb-4"><span class="code-comment"># 안전한 롤백 — revert (권장)</span>
<span class="code-keyword">git revert</span> <span class="code-string">a1b2c3d</span>     <span class="code-comment"># 해당 커밋을 되돌리는 새 커밋 생성</span>

<span class="code-comment"># 위험한 롤백 — reset (주의!)</span>
<span class="code-keyword">git reset</span> <span class="code-attr">--soft</span> <span class="code-string">HEAD~1</span>  <span class="code-comment"># 직전 커밋 취소 (변경은 유지)</span>
<span class="code-keyword">git reset</span> <span class="code-attr">--hard</span> <span class="code-string">HEAD~1</span>  <span class="code-comment"># 직전 커밋 + 변경 모두 삭제 (위험!)</span></div>
                        <div class="bg-teal-50 rounded-lg p-4 border border-teal-100 mb-4">
                            <p class="text-xs text-teal-800 leading-relaxed">
                                <strong>SAM 배포 참고:</strong>
                                SAM에서는 React(Next.js) 빌드를 서버에서 실행하지 않는다.
                                서버 스펙(2코어, 3.8GB RAM)으로는 빌드 시 메모리 부족이 발생하므로,
                                반드시 로컬에서 빌드 후 결과물만 배포한다.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

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

<!-- hover 프리뷰 오버레이 -->
<div id="hover-preview">
    <img id="hover-preview-img" src="" alt="">
    <span class="hover-caption" id="hover-preview-caption"></span>
</div>

<!-- 클릭 라이트박스 -->
<div id="lightbox" onclick="closeLightbox()">
    <button onclick="closeLightbox()" style="position:absolute; top:1rem; right:1rem; background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.8); padding:0.5rem;">
        <svg style="width:2rem; height:2rem;" 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>
    <img id="lightbox-img" onclick="event.stopPropagation()">
</div>
<script>
(function() {
    var preview = document.getElementById('hover-preview');
    var previewImg = document.getElementById('hover-preview-img');
    var previewCaption = document.getElementById('hover-preview-caption');
    var hoverTimer = null;
    var isPreviewActive = false;
    var HOVER_DELAY = 350;

    document.querySelectorAll('.academy-img-hover').forEach(function(img) {
        img.addEventListener('mouseenter', function() {
            var el = this;
            hoverTimer = setTimeout(function() {
                showPreview(el);
            }, HOVER_DELAY);
        });

        img.addEventListener('mouseleave', function() {
            clearTimeout(hoverTimer);
            if (isPreviewActive) {
                hidePreview();
            }
        });
    });

    function showPreview(el) {
        previewImg.src = el.src;
        previewImg.alt = el.alt || '';
        var caption = el.alt || '';
        var nextP = el.parentElement && el.parentElement.querySelector('p');
        if (nextP) caption = nextP.textContent;
        previewCaption.textContent = caption;

        preview.classList.add('is-active');
        isPreviewActive = true;
    }

    function hidePreview() {
        preview.classList.remove('is-active');
        isPreviewActive = false;
    }

    window.openLightbox = function(el) {
        var lb = document.getElementById('lightbox');
        var img = document.getElementById('lightbox-img');
        img.src = el.src;
        img.alt = el.alt;
        lb.classList.add('is-open');
        document.body.style.overflow = 'hidden';
        hidePreview();
    };

    window.closeLightbox = function() {
        var lb = document.getElementById('lightbox');
        lb.classList.remove('is-open');
        document.body.style.overflow = '';
    };

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            if (isPreviewActive) hidePreview();
            closeLightbox();
        }
    });

    // 도움말 풍선 토글
    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-policy'])
@endsection
