sam-manage/resources/views/academy/web-basics.blade.php

@extends('layouts.app')

@section('title', '웹 기초지식 백과사전')

@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 프리뷰 오버레이 */
    #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);
    }
</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, #2d1b69 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: #ffffff;">웹 기초지식</span>
                </div>
                <h1 class="text-3xl font-bold mb-2" style="color: #ffffff;">웹 기초지식 백과사전</h1>
                <p class="text-sm" style="color: #cbd5e1;">인터넷과 웹의 기초 — IT 지식이 없어도 이해할 수 있는 친절한 바이블</p>
            </div>
            <div class="shrink-0" style="width: 240px; padding: 1.5rem;">
                <div class="overflow-hidden rounded-xl">
                    <img src="{{ asset('images/academy/web-basics/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-purple-50 border border-purple-200 rounded-xl p-5">
                    <h2 class="font-semibold text-purple-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="#internet" class="block text-purple-700 hover:text-purple-900 py-1 font-medium">1. 인터넷이란 무엇인가</a>
                        <a href="#internet-definition" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">인터넷의 정의</a>
                        <a href="#web-vs-internet" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">웹과 인터넷의 차이</a>
                        <a href="#url" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">URL이란</a>
                        <a href="#ip-domain" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">IP 주소와 도메인</a>

                        <a href="#browser-http" class="block text-purple-700 hover:text-purple-900 py-1 font-medium mt-2">2. 웹 브라우저와 HTTP</a>
                        <a href="#browser" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">브라우저란</a>
                        <a href="#http" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">HTTP란</a>
                        <a href="#https" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">HTTPS와 보안</a>
                        <a href="#error-codes" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">에러 코드</a>

                        <a href="#cloud-saas" class="block text-purple-700 hover:text-purple-900 py-1 font-medium mt-2">3. 클라우드와 SaaS</a>
                        <a href="#cloud" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">클라우드란</a>
                        <a href="#saas" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">SaaS란</a>
                        <a href="#saas-benefits" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">SaaS의 장점</a>
                        <a href="#subscription" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">구독 vs 라이선스</a>

                        <a href="#account-security" class="block text-purple-700 hover:text-purple-900 py-1 font-medium mt-2">4. 계정과 보안</a>
                        <a href="#login" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">로그인과 인증</a>
                        <a href="#password" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">비밀번호 관리</a>
                        <a href="#session" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">세션이란</a>
                        <a href="#privacy" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">개인정보 보호</a>

                        <a href="#sam-terms" class="block text-purple-700 hover:text-purple-900 py-1 font-medium mt-2">5. SAM 핵심 용어</a>
                        <a href="#erp" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">ERP란</a>
                        <a href="#mes" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">MES란</a>
                        <a href="#database" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">데이터베이스란</a>
                        <a href="#api" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">API란</a>
                        <a href="#backup" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">백업이란</a>

                        <a href="#guide" class="block text-purple-700 hover:text-purple-900 py-1 font-medium mt-2">6. 실전 가이드</a>
                        <a href="#guide-access" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">SAM 접속 방법</a>
                        <a href="#guide-trouble" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">문제 대처법</a>
                        <a href="#guide-faq" class="block text-purple-600 hover:text-purple-800 py-0.5 pl-3">FAQ</a>
                    </div>
                </div>
            </div>
        </nav>

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

            <!-- 모바일 목차 -->
            <div class="lg:hidden bg-purple-50 border border-purple-200 rounded-xl p-4 mb-6">
                <details>
                    <summary class="font-semibold text-purple-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="#internet" class="block text-purple-700 hover:text-purple-900 py-1">1. 인터넷이란 무엇인가</a>
                        <a href="#browser-http" class="block text-purple-700 hover:text-purple-900 py-1">2. 웹 브라우저와 HTTP</a>
                        <a href="#cloud-saas" class="block text-purple-700 hover:text-purple-900 py-1">3. 클라우드와 SaaS</a>
                        <a href="#account-security" class="block text-purple-700 hover:text-purple-900 py-1">4. 계정과 보안</a>
                        <a href="#sam-terms" class="block text-purple-700 hover:text-purple-900 py-1">5. SAM 핵심 용어</a>
                        <a href="#guide" class="block text-purple-700 hover:text-purple-900 py-1">6. 실전 가이드</a>
                    </nav>
                </details>
            </div>

            {{-- ============================================================ --}}
            {{-- 1. 인터넷이란 무엇인가 --}}
            {{-- ============================================================ --}}
            <section id="internet" 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-purple-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
                        인터넷이란 무엇인가
                    </h2>

                    <!-- 1-1. 인터넷의 정의 -->
                    <div id="internet-definition" 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-purple-400 rounded-full"></span>
                            인터넷의 정의
                        </h3>
                        <div class="bg-purple-50 rounded-lg p-5 border border-purple-100 mb-4">
                            <p class="text-sm text-purple-900 leading-relaxed">
                                <strong>인터넷(Internet)</strong>이란 전 세계의 컴퓨터들을 하나로 연결하는 거대한 네트워크다.
                                집, 회사, 학교, 공장 — 어디에 있든 인터넷에 연결만 되면 다른 컴퓨터와 정보를 주고받을 수 있다.
                            </p>
                        </div>
                        <div class="text-sm text-gray-700 space-y-3">
                            <div class="bg-amber-50 rounded-lg p-4 border border-amber-100">
                                <p class="font-semibold text-amber-800 mb-2">비유: 전 세계를 연결하는 도로망</p>
                                <p class="text-xs text-amber-900 leading-relaxed">
                                    인터넷은 <strong>전 세계를 연결하는 도로망</strong>과 같다.
                                    도로가 있어야 자동차로 이동할 수 있듯, 인터넷이 있어야 데이터를 주고받을 수 있다.
                                    이메일, 유튜브, SAM — 모두 이 도로망 위에서 달리는 서비스들이다.
                                </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/web-basics/2.svg') }}" alt="전 세계 컴퓨터가 연결된 지구본"
                                     class="rounded-lg cursor-pointer academy-img-hover"
                                     style="max-height: 280px; width: auto;"
                                     onclick="openLightbox(this)">
                            </div>
                            <p class="text-xs text-gray-400 mb-4 text-center">인터넷 — 전 세계를 연결하는 네트워크</p>
                        </div>
                    </div>

                    <!-- 1-2. 웹(WWW)과 인터넷의 차이 -->
                    <div id="web-vs-internet" 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-purple-400 rounded-full"></span>
                            웹(WWW)과 인터넷의 차이
                        </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>웹(WWW) = 도로 위를 달리는 자동차</strong>다.
                                도로 위에는 자동차만 달리는 게 아니다 — 버스(이메일), 택배(파일전송), 전화(음성통화)도 달린다.
                                웹은 인터넷 위에서 동작하는 <strong>여러 서비스 중 하나</strong>일 뿐이다.
                            </p>
                        </div>
                        <div class="overflow-x-auto">
                            <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">웹(WWW)</th>
                                    </tr>
                                </thead>
                                <tbody class="text-xs text-gray-700">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-medium">비유</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-medium">정의</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-medium">예시</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-medium">없으면?</td>
                                        <td class="py-2 px-3">모든 온라인 서비스 불가</td>
                                        <td class="py-2 px-3">이메일 등 다른 서비스는 가능</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 1-3. URL이란 -->
                    <div id="url" 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-purple-400 rounded-full"></span>
                            URL이란
                        </h3>
                        <div class="bg-purple-50 rounded-lg p-5 border border-purple-100 mb-4">
                            <p class="text-sm text-purple-900 leading-relaxed">
                                <strong>URL(Uniform Resource Locator)</strong>은 인터넷에서 원하는 페이지를 정확히 찾아가기 위한 <strong>주소</strong>다.
                                브라우저 주소창에 입력하는 바로 그것이다.
                            </p>
                        </div>
                        <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">
                                택배를 보낼 때 "서울시 강남구 역삼동 123번지 5층 501호"처럼 <strong>정확한 주소</strong>가 필요하듯,
                                웹에서도 <code class="bg-amber-100 px-1 py-0.5 rounded text-xs">https://sam.jooil.co.kr/orders</code> 같은 정확한 주소가 필요하다.
                            </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/web-basics/3.svg') }}" alt="URL 해부도"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 260px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">URL 해부도 — 프로토콜 + 도메인 + 경로</p>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
                            <div class="bg-purple-50 rounded-lg p-3 border border-purple-100 text-center">
                                <p class="font-bold text-purple-800 mb-1">https://</p>
                                <p class="font-semibold text-gray-800">프로토콜</p>
                                <p class="text-gray-500 mt-1">안전한 배달 방식<br>(암호화 통신)</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-3 border border-purple-100 text-center">
                                <p class="font-bold text-purple-700 mb-1">sam.jooil.co.kr</p>
                                <p class="font-semibold text-gray-800">도메인</p>
                                <p class="text-gray-500 mt-1">건물 이름<br>(서버 주소)</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-3 border border-purple-100 text-center">
                                <p class="font-bold text-purple-600 mb-1">/orders</p>
                                <p class="font-semibold text-gray-800">경로</p>
                                <p class="text-gray-500 mt-1">건물 안의 몇 층 몇 호<br>(페이지 위치)</p>
                            </div>
                        </div>
                    </div>

                    <!-- 1-4. IP 주소와 도메인 -->
                    <div id="ip-domain" 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-purple-400 rounded-full"></span>
                            IP 주소와 도메인
                        </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">비유: 전화번호(IP)와 이름(도메인)</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                모든 컴퓨터에는 <strong>전화번호(IP 주소)</strong>가 있다 — 예: <code class="bg-amber-100 px-1 py-0.5 rounded">114.203.209.83</code>.
                                하지만 숫자를 외우기 어려우니, <strong>전화번호부에 이름을 등록</strong>하듯 <code class="bg-amber-100 px-1 py-0.5 rounded">sam.jooil.co.kr</code> 이라는 도메인을 사용한다.
                            </p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
                            <div class="bg-gray-50 rounded-lg p-4 border text-center">
                                <p class="font-bold text-gray-800 text-lg mb-2">114.203.209.83</p>
                                <p class="font-semibold text-gray-700 mb-1">IP 주소</p>
                                <p class="text-gray-500">숫자로 된 컴퓨터 주소<br>"전화번호"</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-4 border border-purple-200 text-center">
                                <p class="font-bold text-purple-800 text-lg mb-2">sam.jooil.co.kr</p>
                                <p class="font-semibold text-purple-700 mb-1">도메인</p>
                                <p class="text-purple-600">사람이 기억하기 쉬운 이름<br>"전화번호부에 등록된 이름"</p>
                            </div>
                        </div>
                        <div class="mt-4 bg-purple-50 rounded-lg p-4 border border-purple-100">
                            <p class="text-xs text-purple-700">
                                <strong>DNS(Domain Name System)</strong>가 도메인을 IP로 변환해준다 — 마치 전화번호부에서 이름으로 번호를 찾는 것처럼.
                                브라우저에 <code class="bg-purple-100 px-1 rounded">sam.jooil.co.kr</code>을 입력하면, DNS가 자동으로 <code class="bg-purple-100 px-1 rounded">114.203.209.83</code>을 찾아 연결해준다.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 2. 웹 브라우저와 HTTP --}}
            {{-- ============================================================ --}}
            <section id="browser-http" 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-purple-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
                        웹 브라우저와 HTTP
                    </h2>

                    <!-- 2-1. 브라우저란 -->
                    <div id="browser" 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-purple-400 rounded-full"></span>
                            브라우저란
                        </h3>
                        <div class="bg-purple-50 rounded-lg p-5 border border-purple-100 mb-4">
                            <p class="text-sm text-purple-900 leading-relaxed">
                                <strong>웹 브라우저</strong>란 인터넷에서 웹 페이지를 보여주는 프로그램이다.
                                우리가 매일 사용하는 Chrome, Edge, Safari가 모두 웹 브라우저다.
                            </p>
                        </div>
                        <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>라는 창문이 필요하다.
                                창문의 모양(Chrome, Edge)은 달라도 밖의 풍경(웹사이트)은 같다.
                            </p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
                            <div class="bg-blue-50 rounded-lg p-4 border border-blue-100 text-center">
                                <p class="text-2xl mb-2">🌐</p>
                                <p class="font-bold text-gray-800 mb-1">Chrome</p>
                                <p class="text-gray-500">구글이 만든 브라우저<br>가장 많이 사용 (60%+)</p>
                            </div>
                            <div class="bg-blue-50 rounded-lg p-4 border border-blue-100 text-center">
                                <p class="text-2xl mb-2">🪟</p>
                                <p class="font-bold text-gray-800 mb-1">Edge</p>
                                <p class="text-gray-500">마이크로소프트 브라우저<br>Windows에 기본 설치</p>
                            </div>
                            <div class="bg-blue-50 rounded-lg p-4 border border-blue-100 text-center">
                                <p class="text-2xl mb-2">🧭</p>
                                <p class="font-bold text-gray-800 mb-1">Safari</p>
                                <p class="text-gray-500">애플 브라우저<br>iPhone, Mac에 기본 설치</p>
                            </div>
                        </div>
                    </div>

                    <!-- 2-2. HTTP란 무엇인가 -->
                    <div id="http" 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-purple-400 rounded-full"></span>
                            HTTP란 무엇인가
                        </h3>
                        <div class="bg-purple-50 rounded-lg p-5 border border-purple-100 mb-4">
                            <p class="text-sm text-purple-900 leading-relaxed">
                                <strong>HTTP(HyperText Transfer Protocol)</strong>는 브라우저와 서버가 대화하는 <strong>규칙</strong>이다.
                                "이런 형식으로 요청하면, 이런 형식으로 응답한다"는 약속이다.
                            </p>
                        </div>
                        <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>이 나오듯,
                                브라우저가 HTTP 형식으로 <strong>요청</strong>을 보내면 서버가 <strong>응답</strong>을 돌려준다.
                            </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/web-basics/4.svg') }}" alt="HTTP 요청/응답 흐름도"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 280px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">HTTP — 주문(요청)과 음식(응답)</p>
                    </div>

                    <!-- 2-3. HTTPS와 보안 -->
                    <div id="https" 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-purple-400 rounded-full"></span>
                            HTTPS와 보안
                        </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">비유: 봉투에 넣어 보내기(암호화) vs 엽서(평문)</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                HTTP는 <strong>엽서</strong>를 보내는 것 — 누구나 내용을 볼 수 있다.<br>
                                HTTPS는 <strong>봉투에 넣어 잠그고 보내는 것</strong> — 받는 사람만 열 수 있다.
                            </p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
                            <div class="bg-red-50 rounded-lg p-4 border border-red-200">
                                <p class="font-bold text-red-800 mb-2 text-sm">HTTP (엽서)</p>
                                <ul class="text-red-700 space-y-1">
                                    <li>&#10005; 데이터가 그대로 전송됨</li>
                                    <li>&#10005; 누군가 중간에서 볼 수 있음</li>
                                    <li>&#10005; 비밀번호가 노출될 수 있음</li>
                                    <li>&#10005; 주소창에 "주의 요함" 표시</li>
                                </ul>
                            </div>
                            <div class="bg-green-50 rounded-lg p-4 border border-green-200">
                                <p class="font-bold text-green-800 mb-2 text-sm">HTTPS (봉투 + 자물쇠)</p>
                                <ul class="text-green-700 space-y-1">
                                    <li>&#10003; 데이터가 암호화되어 전송</li>
                                    <li>&#10003; 중간에서 볼 수 없음</li>
                                    <li>&#10003; 비밀번호가 안전하게 전달</li>
                                    <li>&#10003; 주소창에 🔒 자물쇠 표시</li>
                                </ul>
                            </div>
                        </div>
                        <div class="mt-3 bg-purple-50 rounded-lg p-3 border border-purple-100 text-xs text-purple-700">
                            <strong>SAM은 HTTPS를 사용합니다.</strong> 주소창의 🔒 자물쇠가 보이면 안전한 상태다.
                        </div>
                    </div>

                    <!-- 2-4. 자주 보는 에러 코드 -->
                    <div id="error-codes" 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-purple-400 rounded-full"></span>
                            자주 보는 에러 코드
                        </h3>
                        <p class="text-sm text-gray-700 mb-4">
                            웹사이트에서 에러가 나면 <strong>숫자 코드</strong>가 표시된다. 이 숫자만 알면 문제를 빠르게 파악할 수 있다.
                        </p>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/web-basics/5.svg') }}" alt="에러 코드 인포그래픽"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 280px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">404 / 500 / 502 / 403 — 에러 코드 카드</p>
                        <div class="overflow-x-auto">
                            <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>
                                        <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"><span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded font-bold">404</span></td>
                                        <td class="py-2 px-3">페이지를 찾을 수 없음</td>
                                        <td class="py-2 px-3">주소가 틀려서 빈 땅에 도착</td>
                                        <td class="py-2 px-3">URL 주소 다시 확인</td>
                                    </tr>
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3"><span class="bg-red-100 text-red-800 px-2 py-0.5 rounded font-bold">500</span></td>
                                        <td class="py-2 px-3">서버 내부 오류</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"><span class="bg-pink-100 text-pink-800 px-2 py-0.5 rounded font-bold">502</span></td>
                                        <td class="py-2 px-3">서비스 중단</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"><span class="bg-purple-100 text-purple-800 px-2 py-0.5 rounded font-bold">403</span></td>
                                        <td class="py-2 px-3">접근 거부</td>
                                        <td class="py-2 px-3">출입 금지 구역</td>
                                        <td class="py-2 px-3">관리자에게 권한 요청</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 3. 클라우드와 SaaS --}}
            {{-- ============================================================ --}}
            <section id="cloud-saas" 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-purple-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">3</span>
                        클라우드와 SaaS
                    </h2>

                    <!-- 3-1. 클라우드란 -->
                    <div id="cloud" 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-purple-400 rounded-full"></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">비유: 내 컴퓨터 vs 공유 오피스</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                <strong>설치형</strong>은 내 집에서 직접 요리하는 것 — 재료, 도구, 가스레인지를 모두 내가 준비해야 한다.<br>
                                <strong>클라우드</strong>는 식당에서 주문하는 것 — 나는 앉아서 주문만 하면 전문 요리사가 만들어 준다.
                            </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/web-basics/6.svg') }}" alt="설치형 vs 클라우드 비교"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 280px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">설치형(내 PC) vs 클라우드(공유 서비스)</p>
                    </div>

                    <!-- 3-2. SaaS란 무엇인가 -->
                    <div id="saas" 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-purple-400 rounded-full"></span>
                            SaaS란 무엇인가
                        </h3>
                        <div class="bg-purple-50 rounded-lg p-5 border border-purple-100 mb-4">
                            <p class="text-sm text-purple-900 leading-relaxed">
                                <strong>SaaS(Software as a Service)</strong>란 소프트웨어를 사서 설치하는 대신,
                                인터넷을 통해 <strong>구독해서 사용하는 방식</strong>이다.
                                SAM이 바로 SaaS다.
                            </p>
                        </div>
                        <div class="bg-amber-50 rounded-lg p-4 border border-amber-100 mb-4">
                            <p class="font-semibold text-amber-800 mb-2">비유: 넷플릭스 = 영상 SaaS, SAM = 업무 SaaS</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                넷플릭스에 매달 구독료를 내고 영화를 보듯,
                                SAM에 매달 이용료를 내고 업무 관리 시스템을 사용한다.
                                DVD를 사서 설치하는 시대는 끝났다!
                            </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/web-basics/7.svg') }}" alt="SaaS 구독 모델"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 280px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">SaaS = 소프트웨어 구독 서비스</p>
                    </div>

                    <!-- 3-3. 왜 SaaS가 좋은가 -->
                    <div id="saas-benefits" 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-purple-400 rounded-full"></span>
                            왜 SaaS가 좋은가
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
                            <div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
                                <p class="font-bold text-purple-800 text-sm mb-2">&#10003; 설치 불필요</p>
                                <p class="text-purple-700">브라우저만 있으면 된다. CD나 USB로 설치할 필요 없음.</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
                                <p class="font-bold text-purple-800 text-sm mb-2">&#10003; 자동 업데이트</p>
                                <p class="text-purple-700">새 기능이 자동으로 추가된다. 업데이트 파일 다운로드 불필요.</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
                                <p class="font-bold text-purple-800 text-sm mb-2">&#10003; 어디서든 접속</p>
                                <p class="text-purple-700">사무실, 현장, 집 — 인터넷만 되면 어디서든 업무 가능.</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
                                <p class="font-bold text-purple-800 text-sm mb-2">&#10003; 데이터 안전</p>
                                <p class="text-purple-700">전문 서버에서 자동 백업. 내 PC가 고장나도 데이터는 안전.</p>
                            </div>
                        </div>
                    </div>

                    <!-- 3-4. 구독과 라이선스의 차이 -->
                    <div id="subscription" 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-purple-400 rounded-full"></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">비유: 월세(구독) vs 매매(라이선스)</p>
                            <p class="text-xs text-amber-900 leading-relaxed">
                                <strong>라이선스</strong>는 집을 <strong>사는 것</strong> — 큰 돈이 한번에 필요하고, 수리도 직접 해야 한다.<br>
                                <strong>구독</strong>은 집을 <strong>월세로 사는 것</strong> — 매달 작은 금액을 내고, 관리는 집주인(업체)이 해준다.
                            </p>
                        </div>
                        <div class="overflow-x-auto">
                            <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">구독 (월세) = SAM</th>
                                    </tr>
                                </thead>
                                <tbody class="text-xs text-gray-700">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-medium">비용</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-medium">업데이트</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-medium">유지보수</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-medium">접속</td>
                                        <td class="py-2 px-3">설치된 PC에서만</td>
                                        <td class="py-2 px-3">어디서든 가능</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 4. 계정과 보안 --}}
            {{-- ============================================================ --}}
            <section id="account-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-purple-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">4</span>
                        계정과 보안
                    </h2>

                    <!-- 4-1. 로그인과 인증 -->
                    <div id="login" 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-purple-400 rounded-full"></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>을 찍고 들어가듯,
                                SAM에 접속하면 <strong>아이디와 비밀번호</strong>로 "나"를 증명해야 한다.
                                사원증이 없으면 건물에 못 들어가고, 로그인이 안 되면 시스템을 쓸 수 없다.
                            </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/web-basics/8.svg') }}" alt="로그인/인증 흐름도"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 280px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">로그인 4단계 — 사원증 제시 → 신원확인 → 출입증 발급 → 자유 이동</p>
                    </div>

                    <!-- 4-2. 비밀번호 관리 -->
                    <div id="password" 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-purple-400 rounded-full"></span>
                            비밀번호 관리
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-green-50 rounded-lg p-4 border border-green-200">
                                <p class="font-semibold text-green-800 mb-3 text-sm">&#10003; 안전한 비밀번호</p>
                                <ul class="text-xs text-green-700 space-y-2">
                                    <li>8자 이상 (길수록 안전)</li>
                                    <li>영문 + 숫자 + 특수문자 조합</li>
                                    <li>사이트마다 다른 비밀번호</li>
                                    <li>주기적으로 변경 (3~6개월)</li>
                                </ul>
                            </div>
                            <div class="bg-red-50 rounded-lg p-4 border border-red-200">
                                <p class="font-semibold text-red-800 mb-3 text-sm">&#10005; 위험한 비밀번호</p>
                                <ul class="text-xs text-red-700 space-y-2">
                                    <li><code class="bg-red-100 px-1 rounded">1234</code>, <code class="bg-red-100 px-1 rounded">password</code> 같은 단순한 것</li>
                                    <li>생일, 전화번호 등 추측 가능한 것</li>
                                    <li>모든 사이트에 같은 비밀번호</li>
                                    <li>메모장이나 포스트잇에 적어둠</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- 4-3. 세션이란 -->
                    <div id="session" 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-purple-400 rounded-full"></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>이 있어서, 시간이 지나면 다시 로그인해야 한다.
                                "로그인이 풀렸어요" = "출입증 유효시간이 끝났어요" 라는 뜻이다.
                            </p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
                            <div class="bg-green-50 rounded-lg p-3 border border-green-100 text-center">
                                <p class="font-bold text-green-700 text-lg mb-1">로그인 직후</p>
                                <p class="text-green-600">출입증 유효!</p>
                                <p class="text-gray-500 mt-1">자유롭게 시스템 사용</p>
                            </div>
                            <div class="bg-yellow-50 rounded-lg p-3 border border-yellow-100 text-center">
                                <p class="font-bold text-yellow-700 text-lg mb-1">시간 경과</p>
                                <p class="text-yellow-600">곧 만료 예정</p>
                                <p class="text-gray-500 mt-1">작업 중이면 자동 연장</p>
                            </div>
                            <div class="bg-red-50 rounded-lg p-3 border border-red-100 text-center">
                                <p class="font-bold text-red-700 text-lg mb-1">오래 방치</p>
                                <p class="text-red-600">세션 만료!</p>
                                <p class="text-gray-500 mt-1">다시 로그인 필요</p>
                            </div>
                        </div>
                    </div>

                    <!-- 4-4. 개인정보 보호 -->
                    <div id="privacy" 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-purple-400 rounded-full"></span>
                            개인정보 보호
                        </h3>
                        <div class="bg-purple-50 rounded-lg p-5 border border-purple-100 mb-4">
                            <p class="text-sm text-purple-900 leading-relaxed">
                                SAM에는 고객 정보, 주문 데이터, 직원 정보 등 <strong>중요한 개인정보</strong>가 저장되어 있다.
                                이 정보가 유출되면 회사와 고객 모두에게 큰 피해가 발생한다.
                            </p>
                        </div>
                        <div class="bg-purple-50 rounded-lg p-4 border border-purple-100">
                            <p class="font-semibold text-purple-800 mb-2 text-sm">SAM이 개인정보를 보호하는 방법</p>
                            <ul class="text-xs text-purple-700 space-y-2">
                                <li><strong>HTTPS 암호화</strong> — 전송 중인 데이터를 암호화</li>
                                <li><strong>비밀번호 해싱</strong> — 비밀번호를 되돌릴 수 없는 형태로 저장</li>
                                <li><strong>권한 관리</strong> — 부서별로 볼 수 있는 데이터를 제한</li>
                                <li><strong>세션 만료</strong> — 일정 시간 지나면 자동 로그아웃</li>
                                <li><strong>자동 백업</strong> — 데이터를 주기적으로 복사본 생성</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 5. SAM에서 자주 쓰는 용어 --}}
            {{-- ============================================================ --}}
            <section id="sam-terms" 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-purple-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">5</span>
                        SAM에서 자주 쓰는 용어
                    </h2>

                    <!-- 5-1. ERP란 -->
                    <div id="erp" 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-purple-400 rounded-full"></span>
                            ERP란
                        </h3>
                        <div class="bg-purple-50 rounded-lg p-5 border border-purple-100 mb-4">
                            <p class="text-sm text-purple-900 leading-relaxed">
                                <strong>ERP(Enterprise Resource Planning)</strong>란 회사의 영업, 생산, 재고, 회계 등
                                <strong>모든 업무를 하나의 시스템</strong>으로 통합 관리하는 소프트웨어다.
                            </p>
                        </div>
                        <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">
                                예전에는 영업팀은 엑셀, 생산팀은 수기, 회계팀은 별도 프로그램을 사용했다.
                                ERP는 이 모든 것을 <strong>하나의 시스템</strong>으로 연결한다.
                                영업에서 주문이 들어오면 → 자동으로 생산에 반영 → 출하 → 회계까지 자동 연결.
                            </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/web-basics/9.svg') }}" alt="ERP 전체 구조도"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 280px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">ERP — 영업, 생산, 재고, 출하, 회계를 하나로 연결</p>
                    </div>

                    <!-- 5-2. MES란 -->
                    <div id="mes" 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-purple-400 rounded-full"></span>
                            MES란
                        </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>MES(Manufacturing Execution System)</strong>는 공장 현장에서 실시간으로 생산을 관리하는 시스템이다.
                                ERP가 "무엇을 얼마나 만들지" 결정한다면, MES는 "현장에서 지금 어떻게 만들고 있는지" 관리한다.
                            </p>
                        </div>
                        <div class="overflow-x-auto">
                            <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">ERP</th>
                                        <th class="text-left py-2 px-3 font-medium text-gray-600">MES</th>
                                    </tr>
                                </thead>
                                <tbody class="text-xs text-gray-700">
                                    <tr class="border-b border-gray-100">
                                        <td class="py-2 px-3 font-medium">비유</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-medium">관점</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-medium">데이터</td>
                                        <td class="py-2 px-3">일/주/월 단위 집계</td>
                                        <td class="py-2 px-3">초/분 단위 실시간</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3 bg-purple-50 rounded-lg p-3 border border-purple-100 text-xs text-purple-700">
                            <strong>SAM = ERP + MES 통합.</strong> 하나의 시스템에서 경영 관리와 현장 관리를 모두 처리한다.
                        </div>
                    </div>

                    <!-- 5-3. 데이터베이스란 -->
                    <div id="database" 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-purple-400 rounded-full"></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>데이터베이스(DB)</strong>는 데이터를 체계적으로 저장하고 관리하는 시스템이다.
                                쉽게 말하면, 수백 개의 엑셀 시트를 <strong>컴퓨터가 자동으로 관리</strong>해주는 초대형 파일이다.
                            </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/web-basics/10.svg') }}" alt="데이터베이스 = 엑셀 비유"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 280px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">데이터베이스 — 엑셀과 비교하면 쉽게 이해된다</p>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
                            <div class="bg-purple-50 rounded-lg p-3 border border-purple-100 text-center">
                                <p class="font-bold text-purple-800 mb-1">테이블</p>
                                <p class="text-purple-600">= 엑셀의 시트</p>
                                <p class="text-gray-500 mt-1">거래처, 주문, 제품 등</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-3 border border-purple-100 text-center">
                                <p class="font-bold text-purple-800 mb-1">행 (Row)</p>
                                <p class="text-purple-600">= 엑셀의 한 줄</p>
                                <p class="text-gray-500 mt-1">데이터 한 건</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-3 border border-purple-100 text-center">
                                <p class="font-bold text-purple-800 mb-1">열 (Column)</p>
                                <p class="text-purple-600">= 엑셀의 항목</p>
                                <p class="text-gray-500 mt-1">이름, 연락처, 금액 등</p>
                            </div>
                        </div>
                    </div>

                    <!-- 5-4. API란 -->
                    <div id="api" 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-purple-400 rounded-full"></span>
                            API란
                        </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>API(Application Programming Interface)</strong>는 프로그램끼리 데이터를 주고받는 <strong>창구</strong>다.
                                식당에서 메뉴판을 보고 주문하면 음식이 나오듯,
                                앱이 API 목록을 보고 요청하면 데이터가 돌아온다.
                            </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/web-basics/11.svg') }}" alt="API 동작 원리"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 280px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">API — 메뉴판 확인 → 주문 → 요리 → 서빙</p>
                    </div>

                    <!-- 5-5. 백업이란 -->
                    <div id="backup" 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-purple-400 rounded-full"></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>을 만들어 안전한 곳에 저장한다.
                                원본이 손상되더라도 복사본으로 복구할 수 있다.
                            </p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
                            <div class="bg-purple-50 rounded-lg p-3 border border-purple-100 text-center">
                                <p class="text-xl mb-1">💾</p>
                                <p class="font-bold text-purple-800 mb-1">자동 백업</p>
                                <p class="text-purple-600">매일 자동으로 복사본 생성</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-3 border border-purple-100 text-center">
                                <p class="text-xl mb-1">🔄</p>
                                <p class="font-bold text-purple-800 mb-1">복구 가능</p>
                                <p class="text-purple-600">문제 발생 시 이전 상태로 복원</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-3 border border-purple-100 text-center">
                                <p class="text-xl mb-1">🔒</p>
                                <p class="font-bold text-purple-800 mb-1">안전 보관</p>
                                <p class="text-purple-600">별도 서버에 암호화 저장</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- ============================================================ --}}
            {{-- 6. 실전 가이드 --}}
            {{-- ============================================================ --}}
            <section id="guide" 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-purple-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">6</span>
                        실전 가이드
                    </h2>

                    <!-- 6-1. SAM 접속 방법 -->
                    <div id="guide-access" 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-purple-400 rounded-full"></span>
                            SAM 접속 방법
                        </h3>
                        <div class="mb-5 bg-gray-50 rounded-xl p-4 border flex justify-center academy-img-wrap">
                            <img src="{{ asset('images/academy/web-basics/12.svg') }}" alt="SAM 접속 4단계"
                                 class="rounded-lg cursor-pointer academy-img-hover"
                                 style="max-height: 260px; width: auto;"
                                 onclick="openLightbox(this)">
                        </div>
                        <p class="text-xs text-gray-400 mb-4 text-center">SAM 접속 4단계 — 브라우저 → URL → 로그인 → 대시보드</p>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-3 text-xs">
                            <div class="bg-purple-50 rounded-lg p-4 border border-purple-100 text-center">
                                <p class="font-bold text-purple-700 text-lg mb-2">1</p>
                                <p class="font-semibold text-gray-800 mb-1">브라우저 열기</p>
                                <p class="text-gray-500">Chrome 또는 Edge를<br>실행한다</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-4 border border-purple-100 text-center">
                                <p class="font-bold text-purple-700 text-lg mb-2">2</p>
                                <p class="font-semibold text-gray-800 mb-1">주소 입력</p>
                                <p class="text-gray-500">주소창에 SAM 주소를<br>입력하고 Enter</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-4 border border-purple-100 text-center">
                                <p class="font-bold text-purple-700 text-lg mb-2">3</p>
                                <p class="font-semibold text-gray-800 mb-1">로그인</p>
                                <p class="text-gray-500">아이디와 비밀번호를<br>입력하고 로그인 버튼</p>
                            </div>
                            <div class="bg-purple-50 rounded-lg p-4 border border-purple-100 text-center">
                                <p class="font-bold text-purple-700 text-lg mb-2">4</p>
                                <p class="font-semibold text-gray-800 mb-1">업무 시작!</p>
                                <p class="text-gray-500">대시보드가 나타나면<br>메뉴를 선택하여 사용</p>
                            </div>
                        </div>
                    </div>

                    <!-- 6-2. 문제가 생겼을 때 -->
                    <div id="guide-trouble" 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-purple-400 rounded-full"></span>
                            문제가 생겼을 때
                        </h3>
                        <p class="text-sm text-gray-700 mb-4">에러가 발생하면 아래 순서대로 시도해보자.</p>
                        <div class="space-y-3">
                            <div class="flex items-start gap-3 bg-gray-50 rounded-lg p-4 border">
                                <span class="shrink-0 w-7 h-7 bg-purple-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">새로고침 (F5 또는 Ctrl+R)</p>
                                    <p class="text-xs text-gray-500 mt-1">일시적 오류의 80%는 새로고침으로 해결된다.</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 bg-gray-50 rounded-lg p-4 border">
                                <span class="shrink-0 w-7 h-7 bg-purple-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">강력 새로고침 (Ctrl+Shift+R)</p>
                                    <p class="text-xs text-gray-500 mt-1">캐시를 무시하고 최신 페이지를 가져온다.</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 bg-gray-50 rounded-lg p-4 border">
                                <span class="shrink-0 w-7 h-7 bg-purple-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">브라우저 캐시 삭제</p>
                                    <p class="text-xs text-gray-500 mt-1">Chrome: 설정 → 개인정보 → 인터넷 사용 기록 삭제 → 캐시된 이미지 및 파일</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3 bg-gray-50 rounded-lg p-4 border">
                                <span class="shrink-0 w-7 h-7 bg-purple-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
                                <div>
                                    <p class="font-semibold text-gray-800 text-sm">담당자에게 문의</p>
                                    <p class="text-xs text-gray-500 mt-1">위 방법으로 해결되지 않으면 <strong>에러 화면 스크린샷</strong>과 함께 개발팀에 연락.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 6-3. FAQ -->
                    <div id="guide-faq" 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-purple-400 rounded-full"></span>
                            자주 묻는 질문 (FAQ)
                        </h3>
                        <div class="space-y-3">
                            <details class="bg-gray-50 rounded-lg border">
                                <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg">
                                    Q. 로그인이 안 돼요.
                                </summary>
                                <div class="px-4 pb-4 text-xs text-gray-700 space-y-2">
                                    <p><strong>A.</strong> 다음을 확인한다:</p>
                                    <ol class="list-decimal list-inside space-y-1">
                                        <li><strong>Caps Lock</strong>이 켜져 있는지 확인 (대소문자 구분)</li>
                                        <li><strong>아이디/비밀번호</strong>가 정확한지 확인</li>
                                        <li><strong>인터넷 연결</strong>이 되어있는지 확인</li>
                                        <li>여전히 안 되면 관리자에게 <strong>비밀번호 초기화</strong> 요청</li>
                                    </ol>
                                </div>
                            </details>

                            <details class="bg-gray-50 rounded-lg border">
                                <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg">
                                    Q. 화면이 깨져서 나와요.
                                </summary>
                                <div class="px-4 pb-4 text-xs text-gray-700 space-y-2">
                                    <p><strong>A.</strong> 브라우저 캐시 문제일 가능성이 높다.</p>
                                    <ol class="list-decimal list-inside space-y-1">
                                        <li><strong>Ctrl + Shift + R</strong> (강력 새로고침)을 시도</li>
                                        <li>안 되면 브라우저 캐시 삭제 후 재접속</li>
                                        <li>다른 브라우저(Edge, Chrome)로 접속 시도</li>
                                    </ol>
                                </div>
                            </details>

                            <details class="bg-gray-50 rounded-lg border">
                                <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg">
                                    Q. 데이터가 안 보여요 / 빈 화면이에요.
                                </summary>
                                <div class="px-4 pb-4 text-xs text-gray-700 space-y-2">
                                    <p><strong>A.</strong> 여러 가지 원인이 있을 수 있다:</p>
                                    <ol class="list-decimal list-inside space-y-1">
                                        <li><strong>권한 부족</strong> — 해당 메뉴에 대한 접근 권한이 없을 수 있음</li>
                                        <li><strong>날짜 필터</strong> — 조회 기간이 잘못 설정되었을 수 있음</li>
                                        <li><strong>검색 조건</strong> — 필터를 너무 좁게 설정했을 수 있음</li>
                                        <li>위 사항 확인 후에도 안 보이면 개발팀에 문의</li>
                                    </ol>
                                </div>
                            </details>

                            <details class="bg-gray-50 rounded-lg border">
                                <summary class="cursor-pointer p-4 text-sm font-medium text-gray-800 hover:bg-gray-100 rounded-lg">
                                    Q. SAM이 너무 느려요.
                                </summary>
                                <div class="px-4 pb-4 text-xs text-gray-700 space-y-2">
                                    <p><strong>A.</strong> 느려지는 원인과 대처법:</p>
                                    <ol class="list-decimal list-inside space-y-1">
                                        <li><strong>인터넷 속도</strong> — 와이파이나 유선랜 연결 상태 확인</li>
                                        <li><strong>브라우저 탭</strong> — 너무 많은 탭이 열려있으면 닫기</li>
                                        <li><strong>브라우저 캐시</strong> — 캐시가 쌓이면 느려지므로 주기적으로 삭제</li>
                                        <li><strong>서버 문제</strong> — 모든 사용자가 느리다면 서버 문제. 개발팀에 문의</li>
                                    </ol>
                                </div>
                            </details>
                        </div>

                        <!-- 핵심 정리 -->
                        <div class="mt-6 bg-purple-50 rounded-lg p-5 border border-purple-100">
                            <h4 class="font-semibold text-purple-800 mb-2 text-sm">핵심 정리</h4>
                            <p class="text-xs text-purple-700 leading-relaxed">
                                인터넷은 <strong>"전 세계를 연결하는 도로망"</strong>이고,
                                웹은 그 도로 위를 달리는 자동차다.
                                브라우저(창문)로 웹사이트를 보고, URL(주소)로 원하는 페이지를 찾아간다.
                                SAM은 <strong>SaaS(넷플릭스처럼 구독하는 소프트웨어)</strong> 방식의 ERP+MES 통합 시스템이다.
                                HTTPS로 안전하게 통신하고, 데이터베이스에 모든 정보를 체계적으로 저장한다.
                                문제가 생기면 <strong>새로고침 → 캐시 삭제 → 개발팀 문의</strong> 순서로 대응하면 된다.
                            </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();
        }
    });
})();
</script>

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