From dc56468f6b9fa33a0090f2202ef924a2557e6af2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Wed, 25 Feb 2026 16:45:07 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[academy]=20=EA=B2=BD=EC=A0=95=EC=B2=AD?=
 =?UTF-8?q?=EA=B5=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI/UX=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSS 애니메이션 시스템 추가 (fadeUp, popIn, float, drawLine 등 @keyframes)
- 히어로 배너 SVG 일러스트 업그레이드 (세금문서→SAM→환급 플로우)
- 섹션별 SVG 인포그래픽 5종 추가 (플로우차트, Before/After, 타임라인, 효익 아이콘, SAM 아키텍처)
- IntersectionObserver 기반 스크롤 애니메이션 (AOS)
- KPI 카운트업 애니메이션 (requestAnimationFrame easeOut)
- TOC 활성 섹션 하이라이트
- 프로세스 토글 CSS 트랜지션 적용
- 미사용 데드코드 제거 (lightbox, hover-preview DOM/CSS/JS)
---
 .../views/academy/tax-correction.blade.php    | 579 ++++++++++++------
 1 file changed, 388 insertions(+), 191 deletions(-)

diff --git a/resources/views/academy/tax-correction.blade.php b/resources/views/academy/tax-correction.blade.php
index 6424409e..f99270cc 100644
--- a/resources/views/academy/tax-correction.blade.php
+++ b/resources/views/academy/tax-correction.blade.php
@@ -4,123 +4,63 @@
 
 @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;
-    }
+    /* === 키프레임 애니메이션 === */
+    @keyframes fadeUp { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }
+    @keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
+    @keyframes slideLeft { from { opacity:0; transform:translateX(-40px) } to { opacity:1; transform:translateX(0) } }
+    @keyframes slideRight { from { opacity:0; transform:translateX(40px) } to { opacity:1; transform:translateX(0) } }
+    @keyframes popIn { from { opacity:0; transform:scale(0.8) } to { opacity:1; transform:scale(1) } }
+    @keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }
+    @keyframes drawLine { from { stroke-dashoffset:200 } to { stroke-dashoffset:0 } }
+    @keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:0.5 } }
+    @keyframes spin { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
 
-    /* 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;
-    }
+    /* === Animate-on-Scroll === */
+    .aos { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
+    .aos.is-visible { opacity: 1; transform: translateY(0); }
+    .aos-delay-1 { transition-delay: 0.1s; }
+    .aos-delay-2 { transition-delay: 0.2s; }
+    .aos-delay-3 { transition-delay: 0.3s; }
+    .aos-delay-4 { transition-delay: 0.4s; }
+    .aos-pop { opacity: 0; transform: scale(0.8); transition: opacity 0.5s ease, transform 0.5s ease; }
+    .aos-pop.is-visible { opacity: 1; transform: scale(1); }
+    .aos-slide-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease, transform 0.6s ease; }
+    .aos-slide-left.is-visible { opacity: 1; transform: translateX(0); }
+    .aos-slide-right { opacity: 0; transform: translateX(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
+    .aos-slide-right.is-visible { opacity: 1; transform: translateX(0); }
 
-    /* 클릭 라이트박스 */
-    #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);
-    }
+    /* === 히어로 장식 요소 === */
+    .hero-float { animation: float 6s ease-in-out infinite; }
+    .hero-float-delay { animation: float 6s ease-in-out infinite; animation-delay: -2s; }
+    .hero-float-delay2 { animation: float 6s ease-in-out infinite; animation-delay: -4s; }
+    .hero-pulse { animation: pulse 2s ease-in-out infinite; }
+    .hero-spin-slow { animation: spin 12s linear infinite; }
+
+    /* === TOC 활성 하이라이트 === */
+    .toc-link { transition: all 0.2s ease; border-radius: 0.25rem; padding-left: 0.5rem; padding-right: 0.5rem; }
+    .toc-link.is-active { background: #ccfbf1; font-weight: 700; color: #0f766e; }
 
     /* 차트 컨테이너 */
-    .chart-container {
-        position: relative;
-        width: 100%;
-        height: 280px;
-    }
+    .chart-container { position: relative; width: 100%; height: 280px; }
 
     /* 프로세스 스텝 커넥터 */
-    .step-card {
-        position: relative;
-    }
-    .step-card:not(:last-child)::after {
-        content: '';
-        position: absolute;
-        top: 2rem;
-        right: -1rem;
-        width: 2rem;
-        height: 2px;
-        background: #e2e8f0;
-    }
+    .step-card { position: relative; }
+    .step-card:not(:last-child)::after { content: ''; position: absolute; top: 2rem; right: -1rem; width: 2rem; height: 2px; background: #e2e8f0; }
 
     /* 퀴즈 아코디언 */
-    .quiz-answer {
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.3s ease;
-    }
-    .quiz-answer.is-open {
-        max-height: 500px;
-    }
+    .quiz-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
+    .quiz-answer.is-open { max-height: 500px; }
 
     /* 프로세스 토글 */
-    .process-toggle-btn.active {
-        background: #0d9488;
-        color: white;
-        box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
-    }
+    .process-toggle-btn.active { background: #0d9488; color: white; box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3); }
+
+    /* 프로세스 패널 트랜지션 */
+    .process-panel { opacity: 1; max-height: 2000px; overflow: hidden; transition: opacity 0.4s ease, max-height 0.5s ease; }
+    .process-panel.is-hidden { opacity: 0; max-height: 0; pointer-events: none; }
+
+    /* SVG 인포그래픽 드로우라인 */
+    .svg-draw-line { stroke-dasharray: 200; stroke-dashoffset: 200; }
+    .is-visible .svg-draw-line { animation: drawLine 1.2s ease forwards; }
 </style>
 @endpush
 
@@ -144,10 +84,52 @@
                     <span class="px-3 py-1 rounded-full text-xs font-medium" style="background: rgba(94, 234, 212, 0.15); color: #5eead4;">제안</span>
                 </div>
             </div>
-            <div class="shrink-0" style="width: 240px; padding: 1.5rem;">
-                <div class="overflow-hidden rounded-xl flex items-center justify-center" style="background: rgba(13, 148, 136, 0.15); height: 160px;">
-                    <svg class="w-24 h-24" style="color: #5eead4;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2zM10 8.5a.5.5 0 11-1 0 .5.5 0 011 0zm5 5a.5.5 0 11-1 0 .5.5 0 011 0z" />
+            <div class="shrink-0" style="width: 280px; padding: 1.5rem;">
+                <div class="overflow-hidden rounded-xl flex items-center justify-center" style="background: rgba(13, 148, 136, 0.10); height: 180px; position: relative;">
+                    <!-- 배경 장식 원 -->
+                    <div class="hero-float" style="position:absolute; top:12px; left:18px; width:24px; height:24px; border-radius:50%; background:rgba(94,234,212,0.12);"></div>
+                    <div class="hero-float-delay" style="position:absolute; bottom:20px; right:22px; width:18px; height:18px; border-radius:50%; background:rgba(94,234,212,0.15);"></div>
+                    <div class="hero-float-delay2" style="position:absolute; top:40px; right:50px; width:12px; height:12px; border-radius:4px; background:rgba(94,234,212,0.10); transform:rotate(45deg);"></div>
+                    <!-- 메인 SVG 일러스트: 세금문서 → SAM → 환급 -->
+                    <svg viewBox="0 0 240 160" style="width:220px; height:148px;" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <!-- 좌측: 세금 문서 -->
+                        <g class="hero-float-delay">
+                            <rect x="16" y="40" width="52" height="68" rx="6" fill="rgba(94,234,212,0.15)" stroke="#5eead4" stroke-width="1.5"/>
+                            <line x1="26" y1="56" x2="58" y2="56" stroke="#5eead4" stroke-width="1" opacity="0.6"/>
+                            <line x1="26" y1="64" x2="52" y2="64" stroke="#5eead4" stroke-width="1" opacity="0.4"/>
+                            <line x1="26" y1="72" x2="56" y2="72" stroke="#5eead4" stroke-width="1" opacity="0.4"/>
+                            <line x1="26" y1="80" x2="48" y2="80" stroke="#5eead4" stroke-width="1" opacity="0.3"/>
+                            <circle cx="42" cy="96" r="6" fill="rgba(239,68,68,0.25)" stroke="#f87171" stroke-width="1"/>
+                            <text x="42" y="99" text-anchor="middle" fill="#f87171" font-size="7" font-weight="bold">!</text>
+                        </g>
+                        <!-- 점선 화살표 1 -->
+                        <line x1="72" y1="74" x2="90" y2="74" stroke="#5eead4" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.6"/>
+                        <polygon points="90,71 96,74 90,77" fill="#5eead4" opacity="0.6"/>
+                        <!-- 중앙: SAM 프로세서 -->
+                        <g>
+                            <circle cx="120" cy="74" r="30" fill="rgba(13,148,136,0.15)" stroke="#0d9488" stroke-width="1.5"/>
+                            <circle cx="120" cy="74" r="20" fill="rgba(13,148,136,0.08)" stroke="#0d9488" stroke-width="0.8" stroke-dasharray="4 2" class="hero-spin-slow" style="transform-origin:120px 74px;"/>
+                            <text x="120" y="71" text-anchor="middle" fill="#5eead4" font-size="11" font-weight="bold">SAM</text>
+                            <text x="120" y="83" text-anchor="middle" fill="#99f6e4" font-size="6">AUTO</text>
+                        </g>
+                        <!-- 점선 화살표 2 -->
+                        <line x1="154" y1="74" x2="172" y2="74" stroke="#5eead4" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.6"/>
+                        <polygon points="172,71 178,74 172,77" fill="#5eead4" opacity="0.6"/>
+                        <!-- 우측: 환급금 -->
+                        <g class="hero-float">
+                            <rect x="180" y="46" width="48" height="56" rx="8" fill="rgba(34,197,94,0.12)" stroke="#4ade80" stroke-width="1.5"/>
+                            <text x="204" y="72" text-anchor="middle" fill="#4ade80" font-size="18" font-weight="bold">&#8361;</text>
+                            <text x="204" y="90" text-anchor="middle" fill="#86efac" font-size="7">환급</text>
+                        </g>
+                        <!-- AI 자동화 뱃지 -->
+                        <g class="hero-pulse">
+                            <rect x="88" y="18" width="64" height="18" rx="9" fill="rgba(94,234,212,0.2)" stroke="#5eead4" stroke-width="0.8"/>
+                            <text x="120" y="30" text-anchor="middle" fill="#5eead4" font-size="8" font-weight="600">AI 자동화</text>
+                        </g>
+                        <!-- 하단 라벨 -->
+                        <text x="42" y="128" text-anchor="middle" fill="rgba(203,213,225,0.6)" font-size="7">과오납 세금</text>
+                        <text x="120" y="128" text-anchor="middle" fill="rgba(203,213,225,0.6)" font-size="7">자동 분석</text>
+                        <text x="204" y="128" text-anchor="middle" fill="rgba(203,213,225,0.6)" font-size="7">환급금 수령</text>
                     </svg>
                 </div>
             </div>
@@ -163,33 +145,33 @@
                         <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="#overview" class="block text-teal-700 hover:text-teal-900 py-1 font-medium">1. 개요</a>
+                    <div class="space-y-0.5 text-xs" id="toc-links">
+                        <a href="#overview" class="block text-teal-700 hover:text-teal-900 py-1 font-medium toc-link" data-section="overview">1. 개요</a>
                         <a href="#overview-definition" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">경정청구란?</a>
                         <a href="#overview-background" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">배경과 필요성</a>
                         <a href="#overview-kpi" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">핵심 성과 지표</a>
 
-                        <a href="#limits" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">2. 제도의 한계와 혁신</a>
+                        <a href="#limits" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="limits">2. 제도의 한계와 혁신</a>
                         <a href="#limits-traditional" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">기존 방식의 한계</a>
                         <a href="#limits-tech" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">핵심 기술</a>
 
-                        <a href="#process" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">3. 프로세스 비교</a>
+                        <a href="#process" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="process">3. 프로세스 비교</a>
 
-                        <a href="#analytics" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">4. 데이터 분석</a>
+                        <a href="#analytics" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="analytics">4. 데이터 분석</a>
 
-                        <a href="#benefits" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">5. 효익 분석</a>
+                        <a href="#benefits" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="benefits">5. 효익 분석</a>
                         <a href="#benefits-access" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">접근성 혁명</a>
                         <a href="#benefits-accuracy" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">정확성 향상</a>
                         <a href="#benefits-cost" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">비용 절감</a>
 
-                        <a href="#issues" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">6. 주요 쟁점</a>
+                        <a href="#issues" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="issues">6. 주요 쟁점</a>
 
-                        <a href="#sam-role" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">7. SAM의 역할</a>
+                        <a href="#sam-role" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="sam-role">7. SAM의 역할</a>
                         <a href="#sam-youth" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">청년 자동 판정</a>
                         <a href="#sam-location" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">사업장 권역 판정</a>
                         <a href="#sam-data" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">데이터 통합</a>
 
-                        <a href="#quiz" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2">8. 학습 가이드</a>
+                        <a href="#quiz" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="quiz">8. 학습 가이드</a>
                     </div>
                 </div>
             </div>
@@ -221,7 +203,7 @@
             {{-- ============================================================ --}}
             {{-- 1. 개요 --}}
             {{-- ============================================================ --}}
-            <section id="overview" class="scroll-mt-20">
+            <section id="overview" class="scroll-mt-20 aos">
                 <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-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
@@ -234,6 +216,38 @@
                             <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                             경정청구란?
                         </h3>
+
+                        <!-- 인포그래픽: 경정청구 플로우차트 -->
+                        <div class="aos mb-5 overflow-x-auto">
+                            <svg viewBox="0 0 620 100" style="width:100%; max-width:620px; height:auto; display:block; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <!-- 스텝 1 -->
+                                <rect x="0" y="20" width="130" height="60" rx="10" fill="#fef2f2" stroke="#fca5a5" stroke-width="1.2"/>
+                                <text x="65" y="46" text-anchor="middle" fill="#dc2626" font-size="10" font-weight="600">세금 과오납 발생</text>
+                                <text x="65" y="62" text-anchor="middle" fill="#9ca3af" font-size="8">착오 / 누락 / 오류</text>
+                                <!-- 화살표 1→2 -->
+                                <line x1="134" y1="50" x2="158" y2="50" stroke="#94a3b8" stroke-width="1.2" class="svg-draw-line"/>
+                                <polygon points="158,47 164,50 158,53" fill="#94a3b8"/>
+                                <!-- 스텝 2 -->
+                                <rect x="166" y="20" width="130" height="60" rx="10" fill="#eff6ff" stroke="#93c5fd" stroke-width="1.2"/>
+                                <text x="231" y="46" text-anchor="middle" fill="#2563eb" font-size="10" font-weight="600">경정청구 신청</text>
+                                <text x="231" y="62" text-anchor="middle" fill="#9ca3af" font-size="8">5년 이내 청구 가능</text>
+                                <!-- 화살표 2→3 -->
+                                <line x1="300" y1="50" x2="324" y2="50" stroke="#94a3b8" stroke-width="1.2" class="svg-draw-line"/>
+                                <polygon points="324,47 330,50 324,53" fill="#94a3b8"/>
+                                <!-- 스텝 3 -->
+                                <rect x="332" y="20" width="130" height="60" rx="10" fill="#fefce8" stroke="#fde047" stroke-width="1.2"/>
+                                <text x="397" y="46" text-anchor="middle" fill="#ca8a04" font-size="10" font-weight="600">국세청 심사</text>
+                                <text x="397" y="62" text-anchor="middle" fill="#9ca3af" font-size="8">서류 검토 / 판정</text>
+                                <!-- 화살표 3→4 -->
+                                <line x1="466" y1="50" x2="490" y2="50" stroke="#94a3b8" stroke-width="1.2" class="svg-draw-line"/>
+                                <polygon points="490,47 496,50 490,53" fill="#94a3b8"/>
+                                <!-- 스텝 4 -->
+                                <rect x="498" y="20" width="120" height="60" rx="10" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1.2"/>
+                                <text x="558" y="46" text-anchor="middle" fill="#059669" font-size="10" font-weight="600">환급금 지급</text>
+                                <text x="558" y="62" text-anchor="middle" fill="#9ca3af" font-size="8">계좌 입금 완료</text>
+                            </svg>
+                        </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>경정청구(更正請求)</strong>란 「국세기본법」 제45조의2에 의거, 납세자가 법정신고기한 내에 세금을 신고·납부했으나,
@@ -300,19 +314,19 @@
                             <span class="w-2 h-2 bg-teal-400 rounded-full"></span>
                             핵심 성과 지표 (KPI)
                         </h3>
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                            <div class="bg-teal-50 p-5 rounded-lg border border-teal-100 text-center">
-                                <p class="text-3xl font-extrabold text-teal-600">90%</p>
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="kpi-cards">
+                            <div class="aos-pop aos-delay-1 bg-teal-50 p-5 rounded-lg border border-teal-100 text-center">
+                                <p class="text-3xl font-extrabold text-teal-600 kpi-number" data-target="90" data-suffix="%">90%</p>
                                 <p class="text-sm font-medium text-gray-700 mt-1">처리 기간 단축</p>
                                 <p class="text-xs text-gray-500">14일 → 1.4일</p>
                             </div>
-                            <div class="bg-green-50 p-5 rounded-lg border border-green-100 text-center">
-                                <p class="text-3xl font-extrabold text-green-600">75%</p>
+                            <div class="aos-pop aos-delay-2 bg-green-50 p-5 rounded-lg border border-green-100 text-center">
+                                <p class="text-3xl font-extrabold text-green-600 kpi-number" data-target="75" data-suffix="%">75%</p>
                                 <p class="text-sm font-medium text-gray-700 mt-1">행정 비용 절감</p>
                                 <p class="text-xs text-gray-500">건당 5만원 → 1.2만원</p>
                             </div>
-                            <div class="bg-amber-50 p-5 rounded-lg border border-amber-100 text-center">
-                                <p class="text-3xl font-extrabold text-amber-600">95%</p>
+                            <div class="aos-pop aos-delay-3 bg-amber-50 p-5 rounded-lg border border-amber-100 text-center">
+                                <p class="text-3xl font-extrabold text-amber-600 kpi-number" data-target="95" data-suffix="%">95%</p>
                                 <p class="text-sm font-medium text-gray-700 mt-1">오류 발생률 감소</p>
                                 <p class="text-xs text-gray-500">입력 오류 자동 검증</p>
                             </div>
@@ -324,13 +338,59 @@
             {{-- ============================================================ --}}
             {{-- 2. 제도의 한계와 기술 혁신 --}}
             {{-- ============================================================ --}}
-            <section id="limits" class="scroll-mt-20">
+            <section id="limits" class="scroll-mt-20 aos">
                 <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-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
                         제도의 한계와 기술 혁신
                     </h2>
 
+                    <!-- Before/After 비교 인포그래픽 -->
+                    <div class="aos mb-6 overflow-x-auto">
+                        <svg viewBox="0 0 600 160" style="width:100%; max-width:600px; height:auto; display:block; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <!-- Before 영역 -->
+                            <rect x="0" y="10" width="260" height="140" rx="12" fill="#f9fafb" stroke="#d1d5db" stroke-width="1"/>
+                            <text x="130" y="34" text-anchor="middle" fill="#6b7280" font-size="12" font-weight="700">기존 방식</text>
+                            <!-- 서류 뭉치 아이콘 -->
+                            <rect x="30" y="50" width="36" height="44" rx="4" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
+                            <rect x="34" y="54" width="28" height="4" rx="1" fill="#9ca3af" opacity="0.5"/>
+                            <rect x="34" y="62" width="22" height="4" rx="1" fill="#9ca3af" opacity="0.4"/>
+                            <rect x="34" y="70" width="26" height="4" rx="1" fill="#9ca3af" opacity="0.3"/>
+                            <text x="48" y="108" text-anchor="middle" fill="#9ca3af" font-size="7">수작업 서류</text>
+                            <!-- 시계 아이콘 -->
+                            <circle cx="130" cy="72" r="18" fill="#fef2f2" stroke="#fca5a5" stroke-width="1"/>
+                            <line x1="130" y1="72" x2="130" y2="62" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round"/>
+                            <line x1="130" y1="72" x2="138" y2="76" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round"/>
+                            <text x="130" y="108" text-anchor="middle" fill="#9ca3af" font-size="7">14일 소요</text>
+                            <!-- 에러 아이콘 -->
+                            <circle cx="212" cy="72" r="18" fill="#fef2f2" stroke="#fca5a5" stroke-width="1"/>
+                            <text x="212" y="77" text-anchor="middle" fill="#ef4444" font-size="16" font-weight="bold">!</text>
+                            <text x="212" y="108" text-anchor="middle" fill="#9ca3af" font-size="7">오류 위험</text>
+
+                            <!-- 중앙 번개 divider -->
+                            <line x1="300" y1="20" x2="300" y2="140" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="4 3"/>
+                            <circle cx="300" cy="80" r="14" fill="#f0fdfa" stroke="#14b8a6" stroke-width="1.5"/>
+                            <text x="300" y="85" text-anchor="middle" fill="#0d9488" font-size="14" font-weight="bold">&#9889;</text>
+
+                            <!-- After 영역 -->
+                            <rect x="340" y="10" width="260" height="140" rx="12" fill="#f0fdfa" stroke="#99f6e4" stroke-width="1"/>
+                            <text x="470" y="34" text-anchor="middle" fill="#0d9488" font-size="12" font-weight="700">AI 자동화</text>
+                            <!-- 모니터 아이콘 -->
+                            <rect x="370" y="50" width="36" height="28" rx="4" fill="#ccfbf1" stroke="#5eead4" stroke-width="1"/>
+                            <line x1="388" y1="78" x2="388" y2="86" stroke="#5eead4" stroke-width="1.5"/>
+                            <line x1="378" y1="86" x2="398" y2="86" stroke="#5eead4" stroke-width="1.5" stroke-linecap="round"/>
+                            <text x="388" y="108" text-anchor="middle" fill="#5eead4" font-size="7">자동 처리</text>
+                            <!-- 속도 아이콘 -->
+                            <circle cx="470" cy="72" r="18" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1"/>
+                            <text x="470" y="77" text-anchor="middle" fill="#059669" font-size="10" font-weight="bold">1.4일</text>
+                            <text x="470" y="108" text-anchor="middle" fill="#5eead4" font-size="7">90% 단축</text>
+                            <!-- 체크 아이콘 -->
+                            <circle cx="552" cy="72" r="18" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1"/>
+                            <polyline points="544,72 550,78 560,66" stroke="#059669" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+                            <text x="552" y="108" text-anchor="middle" fill="#5eead4" font-size="7">정확한 검증</text>
+                        </svg>
+                    </div>
+
                     <!-- 2-1. 기존 방식의 한계 -->
                     <div id="limits-traditional" class="scroll-mt-20 mb-8">
                         <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
@@ -409,13 +469,46 @@
             {{-- ============================================================ --}}
             {{-- 3. 프로세스 비교 --}}
             {{-- ============================================================ --}}
-            <section id="process" class="scroll-mt-20">
+            <section id="process" class="scroll-mt-20 aos">
                 <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-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">3</span>
                         프로세스 비교
                     </h2>
 
+                    <!-- 프로세스 타임라인 인포그래픽 -->
+                    <div class="aos mb-6 overflow-x-auto">
+                        <svg viewBox="0 0 640 90" style="width:100%; max-width:640px; height:auto; display:block; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <!-- 연결선 -->
+                            <line x1="64" y1="32" x2="576" y2="32" stroke="#e2e8f0" stroke-width="2"/>
+                            <!-- 노드 1 -->
+                            <circle cx="64" cy="32" r="16" fill="#0d9488" stroke="#fff" stroke-width="2"/>
+                            <text x="64" y="36" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">1</text>
+                            <text x="64" y="62" text-anchor="middle" fill="#374151" font-size="8" font-weight="600">본인 인증</text>
+                            <text x="64" y="76" text-anchor="middle" fill="#9ca3af" font-size="7">간편 로그인</text>
+                            <!-- 노드 2 -->
+                            <circle cx="192" cy="32" r="16" fill="#0d9488" stroke="#fff" stroke-width="2"/>
+                            <text x="192" y="36" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">2</text>
+                            <text x="192" y="62" text-anchor="middle" fill="#374151" font-size="8" font-weight="600">데이터 수집</text>
+                            <text x="192" y="76" text-anchor="middle" fill="#9ca3af" font-size="7">자동 연동</text>
+                            <!-- 노드 3 -->
+                            <circle cx="320" cy="32" r="16" fill="#0d9488" stroke="#fff" stroke-width="2"/>
+                            <text x="320" y="36" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">3</text>
+                            <text x="320" y="62" text-anchor="middle" fill="#374151" font-size="8" font-weight="600">AI 검증</text>
+                            <text x="320" y="76" text-anchor="middle" fill="#9ca3af" font-size="7">오류 자동 탐지</text>
+                            <!-- 노드 4 -->
+                            <circle cx="448" cy="32" r="16" fill="#0d9488" stroke="#fff" stroke-width="2"/>
+                            <text x="448" y="36" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">4</text>
+                            <text x="448" y="62" text-anchor="middle" fill="#374151" font-size="8" font-weight="600">즉시 접수</text>
+                            <text x="448" y="76" text-anchor="middle" fill="#9ca3af" font-size="7">원클릭 신청</text>
+                            <!-- 노드 5 -->
+                            <circle cx="576" cy="32" r="16" fill="#059669" stroke="#fff" stroke-width="2"/>
+                            <text x="576" y="36" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">5</text>
+                            <text x="576" y="62" text-anchor="middle" fill="#374151" font-size="8" font-weight="600">환급 완료</text>
+                            <text x="576" y="76" text-anchor="middle" fill="#9ca3af" font-size="7">실시간 알림</text>
+                        </svg>
+                    </div>
+
                     <div class="text-center mb-6">
                         <p class="text-sm text-gray-600 mb-4">기존의 복잡한 수기 절차와 전산화된 간소화 절차를 비교해보세요.</p>
                         <div class="inline-flex bg-gray-200 rounded-lg p-1">
@@ -429,7 +522,7 @@
                     </div>
 
                     <!-- 수기 방식 -->
-                    <div id="process-manual" class="space-y-4">
+                    <div id="process-manual" class="space-y-4 process-panel">
                         <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                             <div class="bg-gray-50 rounded-lg p-4 text-center border">
                                 <div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
@@ -486,7 +579,7 @@
                     </div>
 
                     <!-- 전산화 방식 -->
-                    <div id="process-digital" class="space-y-4" style="display: none;">
+                    <div id="process-digital" class="space-y-4 process-panel is-hidden">
                         <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                             <div class="bg-teal-50 rounded-lg p-4 text-center border border-teal-200">
                                 <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
@@ -540,7 +633,7 @@
             {{-- ============================================================ --}}
             {{-- 4. 데이터 분석 --}}
             {{-- ============================================================ --}}
-            <section id="analytics" class="scroll-mt-20">
+            <section id="analytics" class="scroll-mt-20 aos">
                 <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-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">4</span>
@@ -597,13 +690,44 @@
             {{-- ============================================================ --}}
             {{-- 5. 효익 분석 --}}
             {{-- ============================================================ --}}
-            <section id="benefits" class="scroll-mt-20">
+            <section id="benefits" class="scroll-mt-20 aos">
                 <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-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">5</span>
                         효익 분석
                     </h2>
 
+                    <!-- 3대 효익 아이콘 인포그래픽 -->
+                    <div class="flex justify-center gap-6 mb-8" style="flex-wrap:wrap;">
+                        <div class="aos-pop aos-delay-1 text-center" style="flex:0 0 140px;">
+                            <svg viewBox="0 0 80 80" style="width:72px; height:72px; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <circle cx="40" cy="40" r="36" fill="#f0fdfa" stroke="#14b8a6" stroke-width="1.5"/>
+                                <circle cx="40" cy="34" r="14" fill="none" stroke="#0d9488" stroke-width="1.5"/>
+                                <ellipse cx="40" cy="34" rx="22" ry="8" fill="none" stroke="#0d9488" stroke-width="0.8" stroke-dasharray="3 2" opacity="0.5"/>
+                                <line x1="40" y1="20" x2="40" y2="48" stroke="#0d9488" stroke-width="0.8" opacity="0.4"/>
+                                <line x1="26" y1="34" x2="54" y2="34" stroke="#0d9488" stroke-width="0.8" opacity="0.4"/>
+                                <text x="40" y="66" text-anchor="middle" fill="#0d9488" font-size="8" font-weight="600">접근성</text>
+                            </svg>
+                        </div>
+                        <div class="aos-pop aos-delay-2 text-center" style="flex:0 0 140px;">
+                            <svg viewBox="0 0 80 80" style="width:72px; height:72px; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <circle cx="40" cy="40" r="36" fill="#ecfdf5" stroke="#10b981" stroke-width="1.5"/>
+                                <circle cx="40" cy="34" r="14" fill="none" stroke="#059669" stroke-width="1.5"/>
+                                <polyline points="32,34 38,40 50,28" stroke="#059669" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+                                <text x="40" y="66" text-anchor="middle" fill="#059669" font-size="8" font-weight="600">정확성</text>
+                            </svg>
+                        </div>
+                        <div class="aos-pop aos-delay-3 text-center" style="flex:0 0 140px;">
+                            <svg viewBox="0 0 80 80" style="width:72px; height:72px; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <circle cx="40" cy="40" r="36" fill="#eff6ff" stroke="#3b82f6" stroke-width="1.5"/>
+                                <polyline points="26,28 34,38 42,30 50,44 58,26" stroke="#3b82f6" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+                                <polyline points="50,44 58,44" stroke="#3b82f6" stroke-width="1.8" fill="none" stroke-linecap="round"/>
+                                <polyline points="48,50 34,50 34,26" stroke="#94a3b8" stroke-width="0.8" fill="none" opacity="0.5"/>
+                                <text x="40" y="66" text-anchor="middle" fill="#2563eb" font-size="8" font-weight="600">비용 절감</text>
+                            </svg>
+                        </div>
+                    </div>
+
                     <!-- 5-1. 접근성 혁명 -->
                     <div id="benefits-access" class="scroll-mt-20 mb-8">
                         <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
@@ -673,7 +797,7 @@
             {{-- ============================================================ --}}
             {{-- 6. 주요 쟁점 --}}
             {{-- ============================================================ --}}
-            <section id="issues" class="scroll-mt-20">
+            <section id="issues" class="scroll-mt-20 aos">
                 <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-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">6</span>
@@ -732,7 +856,7 @@
             {{-- ============================================================ --}}
             {{-- 7. SAM의 역할 (제안 형태) --}}
             {{-- ============================================================ --}}
-            <section id="sam-role" class="scroll-mt-20">
+            <section id="sam-role" class="scroll-mt-20 aos">
                 <div class="bg-white rounded-xl shadow-sm border-2 border-teal-200 p-6">
                     <h2 class="text-xl font-bold text-gray-800 mb-2 flex items-center gap-3">
                         <span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">7</span>
@@ -747,6 +871,50 @@
                         </p>
                     </div>
 
+                    <!-- SAM 아키텍처 다이어그램 -->
+                    <div class="aos mb-6 overflow-x-auto">
+                        <svg viewBox="0 0 440 220" style="width:100%; max-width:440px; height:auto; display:block; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <!-- 중앙 SAM 허브 -->
+                            <circle cx="220" cy="100" r="48" fill="#f0fdfa" stroke="#0d9488" stroke-width="2"/>
+                            <circle cx="220" cy="100" r="36" fill="#ccfbf1" stroke="#14b8a6" stroke-width="1" stroke-dasharray="4 2" class="hero-spin-slow" style="transform-origin:220px 100px;"/>
+                            <text x="220" y="96" text-anchor="middle" fill="#0d9488" font-size="14" font-weight="bold">SAM</text>
+                            <text x="220" y="112" text-anchor="middle" fill="#5eead4" font-size="8">통합 엔진</text>
+
+                            <!-- 곡선 연결선 -->
+                            <path d="M172 100 Q 100 60 80 50" stroke="#14b8a6" stroke-width="1.2" fill="none" stroke-dasharray="4 2" opacity="0.6"/>
+                            <path d="M220 52 Q 220 20 220 16" stroke="#14b8a6" stroke-width="1.2" fill="none" stroke-dasharray="4 2" opacity="0.6"/>
+                            <path d="M268 100 Q 340 60 360 50" stroke="#14b8a6" stroke-width="1.2" fill="none" stroke-dasharray="4 2" opacity="0.6"/>
+
+                            <!-- 모듈 1: 청년자동판정 -->
+                            <g class="hero-float">
+                                <circle cx="64" cy="36" r="28" fill="#eff6ff" stroke="#93c5fd" stroke-width="1.2"/>
+                                <text x="64" y="33" text-anchor="middle" fill="#2563eb" font-size="8" font-weight="600">청년</text>
+                                <text x="64" y="44" text-anchor="middle" fill="#2563eb" font-size="7">자동판정</text>
+                            </g>
+                            <!-- 모듈 2: 권역판정 -->
+                            <g class="hero-float-delay">
+                                <circle cx="220" cy="16" r="0" fill="none"/>
+                                <ellipse cx="220" cy="10" rx="40" ry="0" fill="none"/>
+                                <rect x="184" y="0" width="72" height="32" rx="16" fill="#fefce8" stroke="#fde047" stroke-width="1.2"/>
+                                <text x="220" y="14" text-anchor="middle" fill="#ca8a04" font-size="8" font-weight="600">권역판정</text>
+                                <text x="220" y="25" text-anchor="middle" fill="#ca8a04" font-size="7">소재지 분석</text>
+                            </g>
+                            <!-- 모듈 3: 데이터통합 -->
+                            <g class="hero-float-delay2">
+                                <circle cx="376" cy="36" r="28" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1.2"/>
+                                <text x="376" y="33" text-anchor="middle" fill="#059669" font-size="8" font-weight="600">데이터</text>
+                                <text x="376" y="44" text-anchor="middle" fill="#059669" font-size="7">통합관리</text>
+                            </g>
+
+                            <!-- 하단 출력 화살표 -->
+                            <line x1="220" y1="148" x2="220" y2="176" stroke="#0d9488" stroke-width="1.5"/>
+                            <polygon points="214,176 220,184 226,176" fill="#0d9488"/>
+                            <!-- 출력 결과 -->
+                            <rect x="150" y="186" width="140" height="28" rx="8" fill="#0d9488"/>
+                            <text x="220" y="204" text-anchor="middle" fill="#fff" font-size="9" font-weight="600">최대 세액공제 자동 산출</text>
+                        </svg>
+                    </div>
+
                     <!-- 7-1. 청년 자동 판정 -->
                     <div id="sam-youth" class="scroll-mt-20 mb-8">
                         <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
@@ -876,7 +1044,7 @@
             {{-- ============================================================ --}}
             {{-- 8. 학습 가이드 --}}
             {{-- ============================================================ --}}
-            <section id="quiz" class="scroll-mt-20">
+            <section id="quiz" class="scroll-mt-20 aos">
                 <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-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">8</span>
@@ -988,23 +1156,77 @@
     </div>
 </div>
 
-<!-- 라이트박스 -->
-<div id="lightbox" onclick="closeLightbox(event)">
-    <img src="" alt="">
-</div>
-
-<!-- Hover 프리뷰 -->
-<div id="hover-preview">
-    <img src="" alt="">
-    <span class="hover-caption"></span>
-</div>
-
 @endsection
 
 @push('scripts')
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
-    // --- 프로세스 토글 ---
+    // === AOS (Animate on Scroll) ===
+    (function() {
+        const aosObserver = new IntersectionObserver(function(entries) {
+            entries.forEach(function(e) {
+                if (e.isIntersecting) {
+                    e.target.classList.add('is-visible');
+                }
+            });
+        }, { threshold: 0.15 });
+        document.querySelectorAll('.aos, .aos-pop, .aos-slide-left, .aos-slide-right').forEach(function(el) {
+            aosObserver.observe(el);
+        });
+    })();
+
+    // === KPI 카운트업 애니메이션 ===
+    (function() {
+        let kpiDone = false;
+        const kpiObserver = new IntersectionObserver(function(entries) {
+            entries.forEach(function(e) {
+                if (e.isIntersecting && !kpiDone) {
+                    kpiDone = true;
+                    document.querySelectorAll('.kpi-number').forEach(function(el) {
+                        const target = parseInt(el.getAttribute('data-target'), 10);
+                        const suffix = el.getAttribute('data-suffix') || '';
+                        const duration = 1500;
+                        const start = performance.now();
+                        el.textContent = '0' + suffix;
+                        function step(now) {
+                            const elapsed = now - start;
+                            const progress = Math.min(elapsed / duration, 1);
+                            const eased = 1 - Math.pow(1 - progress, 3);
+                            el.textContent = Math.round(target * eased) + suffix;
+                            if (progress < 1) requestAnimationFrame(step);
+                        }
+                        requestAnimationFrame(step);
+                    });
+                }
+            });
+        }, { threshold: 0.3 });
+        const kpiSection = document.getElementById('kpi-cards');
+        if (kpiSection) kpiObserver.observe(kpiSection);
+    })();
+
+    // === TOC 활성 섹션 하이라이트 ===
+    (function() {
+        const sections = ['overview','limits','process','analytics','benefits','issues','sam-role','quiz'];
+        const tocLinks = document.querySelectorAll('.toc-link[data-section]');
+        if (!tocLinks.length) return;
+        const tocObserver = new IntersectionObserver(function(entries) {
+            entries.forEach(function(e) {
+                const id = e.target.id;
+                const link = document.querySelector('.toc-link[data-section="' + id + '"]');
+                if (!link) return;
+                if (e.isIntersecting) {
+                    tocLinks.forEach(function(l) { l.classList.remove('is-active'); });
+                    link.classList.add('is-active');
+                }
+            });
+        }, { threshold: 0.2, rootMargin: '-10% 0px -70% 0px' });
+        sections.forEach(function(id) {
+            var el = document.getElementById(id);
+            if (el) tocObserver.observe(el);
+        });
+    })();
+
+    // === 프로세스 토글 (CSS 트랜지션) ===
     function toggleProcess(mode) {
         const manual = document.getElementById('process-manual');
         const digital = document.getElementById('process-digital');
@@ -1012,66 +1234,45 @@ function toggleProcess(mode) {
         const btnDigital = document.getElementById('btn-digital');
 
         if (mode === 'manual') {
-            manual.style.display = '';
-            digital.style.display = 'none';
+            manual.classList.remove('is-hidden');
+            digital.classList.add('is-hidden');
             btnManual.classList.add('active');
             btnDigital.classList.remove('active');
         } else {
-            manual.style.display = 'none';
-            digital.style.display = '';
+            manual.classList.add('is-hidden');
+            digital.classList.remove('is-hidden');
             btnDigital.classList.add('active');
             btnManual.classList.remove('active');
         }
     }
 
-    // --- 퀴즈 토글 ---
+    // === 퀴즈 토글 ===
     function toggleQuiz(btn) {
         const answer = btn.nextElementSibling;
         answer.classList.toggle('is-open');
     }
 
-    // --- 라이트박스 ---
-    function openLightbox(img) {
-        const lb = document.getElementById('lightbox');
-        lb.querySelector('img').src = img.src;
-        lb.classList.add('is-open');
-        document.body.style.overflow = 'hidden';
-    }
-    function closeLightbox(e) {
-        if (e.target === e.currentTarget || e.target.tagName === 'IMG') {
-            document.getElementById('lightbox').classList.remove('is-open');
-            document.body.style.overflow = '';
-        }
-    }
-    document.addEventListener('keydown', e => {
-        if (e.key === 'Escape') {
-            document.getElementById('lightbox').classList.remove('is-open');
-            document.body.style.overflow = '';
-        }
-    });
-
-    // --- Chart.js 차트 초기화 ---
+    // === Chart.js 차트 초기화 ===
     document.addEventListener('DOMContentLoaded', function() {
-        // 차트 섹션이 뷰포트에 들어올 때 초기화
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
+        var chartObserver = new IntersectionObserver(function(entries) {
+            entries.forEach(function(entry) {
                 if (entry.isIntersecting) {
                     initCharts();
-                    observer.disconnect();
+                    chartObserver.disconnect();
                 }
             });
         }, { threshold: 0.1 });
 
-        const analyticsSection = document.getElementById('analytics');
-        if (analyticsSection) observer.observe(analyticsSection);
+        var analyticsSection = document.getElementById('analytics');
+        if (analyticsSection) chartObserver.observe(analyticsSection);
     });
 
-    let chartsInitialized = false;
+    var chartsInitialized = false;
     function initCharts() {
         if (chartsInitialized) return;
         chartsInitialized = true;
 
-        const chartColors = {
+        var chartColors = {
             teal: 'rgba(13, 148, 136, 0.8)',
             tealLight: 'rgba(13, 148, 136, 0.1)',
             red: 'rgba(239, 68, 68, 0.8)',
@@ -1081,8 +1282,7 @@ function initCharts() {
             purple: 'rgba(168, 85, 247, 0.8)',
         };
 
-        // 1. 소요 시간 비교
-        const timeCtx = document.getElementById('timeChart');
+        var timeCtx = document.getElementById('timeChart');
         if (timeCtx) {
             new Chart(timeCtx, {
                 type: 'bar',
@@ -1097,8 +1297,7 @@ function initCharts() {
             });
         }
 
-        // 2. 비용 절감
-        const costCtx = document.getElementById('costChart');
+        var costCtx = document.getElementById('costChart');
         if (costCtx) {
             new Chart(costCtx, {
                 type: 'line',
@@ -1113,8 +1312,7 @@ function initCharts() {
             });
         }
 
-        // 3. 오류 유형
-        const errorCtx = document.getElementById('errorChart');
+        var errorCtx = document.getElementById('errorChart');
         if (errorCtx) {
             new Chart(errorCtx, {
                 type: 'doughnut',
@@ -1130,8 +1328,7 @@ function initCharts() {
             });
         }
 
-        // 4. 이용자 추이
-        const adoptCtx = document.getElementById('adoptionChart');
+        var adoptCtx = document.getElementById('adoptionChart');
         if (adoptCtx) {
             new Chart(adoptCtx, {
                 type: 'bar',