diff --git a/app/Http/Controllers/ESign/EsignVerificationController.php b/app/Http/Controllers/ESign/EsignVerificationController.php
new file mode 100644
index 00000000..2fbc2fae
--- /dev/null
+++ b/app/Http/Controllers/ESign/EsignVerificationController.php
@@ -0,0 +1,215 @@
+<?php
+
+namespace App\Http\Controllers\ESign;
+
+use App\Http\Controllers\Controller;
+use App\Models\ESign\EsignHandwritingVerification;
+use App\Models\ESign\EsignVerificationTemplate;
+use App\Services\ESign\HandwritingVerificationService;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\View\View;
+use Symfony\Component\HttpFoundation\Response;
+
+class EsignVerificationController extends Controller
+{
+    private HandwritingVerificationService $service;
+
+    public function __construct(HandwritingVerificationService $service)
+    {
+        $this->service = $service;
+    }
+
+    // ─── 화면 라우트 ───
+
+    public function dashboard(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('esign-verification.dashboard'));
+        }
+
+        return view('esign.verification.dashboard');
+    }
+
+    public function templates(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('esign-verification.templates'));
+        }
+
+        return view('esign.verification.templates');
+    }
+
+    public function demo(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('esign-verification.demo'));
+        }
+
+        return view('esign.verification.demo');
+    }
+
+    // ─── API: 확인 템플릿 CRUD ───
+
+    public function indexTemplates(Request $request): JsonResponse
+    {
+        $tenantId = Auth::user()->tenant_id;
+
+        $templates = EsignVerificationTemplate::where('tenant_id', $tenantId)
+            ->where('is_active', true)
+            ->orderBy('created_at', 'desc')
+            ->get();
+
+        return response()->json(['success' => true, 'data' => $templates]);
+    }
+
+    public function storeTemplate(Request $request): JsonResponse
+    {
+        $request->validate([
+            'name' => 'required|string|max:100',
+            'category' => 'nullable|string|max:50',
+            'steps' => 'required|array|min:1',
+            'steps.*.order' => 'required|integer|min:1',
+            'steps.*.text' => 'required|string|max:200',
+            'steps.*.threshold' => 'required|numeric|min:50|max:100',
+            'pass_threshold' => 'nullable|numeric|min:50|max:100',
+            'max_attempts' => 'nullable|integer|min:1|max:20',
+        ]);
+
+        $tenantId = Auth::user()->tenant_id;
+
+        $template = EsignVerificationTemplate::create([
+            'tenant_id' => $tenantId,
+            'name' => $request->input('name'),
+            'category' => $request->input('category'),
+            'steps' => $request->input('steps'),
+            'pass_threshold' => $request->input('pass_threshold', 80.00),
+            'max_attempts' => $request->input('max_attempts', 5),
+            'is_active' => true,
+            'created_by' => Auth::id(),
+        ]);
+
+        return response()->json(['success' => true, 'data' => $template], 201);
+    }
+
+    public function showTemplate(int $id): JsonResponse
+    {
+        $tenantId = Auth::user()->tenant_id;
+
+        $template = EsignVerificationTemplate::where('tenant_id', $tenantId)
+            ->findOrFail($id);
+
+        return response()->json(['success' => true, 'data' => $template]);
+    }
+
+    public function updateTemplate(Request $request, int $id): JsonResponse
+    {
+        $request->validate([
+            'name' => 'required|string|max:100',
+            'category' => 'nullable|string|max:50',
+            'steps' => 'required|array|min:1',
+            'steps.*.order' => 'required|integer|min:1',
+            'steps.*.text' => 'required|string|max:200',
+            'steps.*.threshold' => 'required|numeric|min:50|max:100',
+            'pass_threshold' => 'nullable|numeric|min:50|max:100',
+            'max_attempts' => 'nullable|integer|min:1|max:20',
+        ]);
+
+        $tenantId = Auth::user()->tenant_id;
+
+        $template = EsignVerificationTemplate::where('tenant_id', $tenantId)
+            ->findOrFail($id);
+
+        $template->update([
+            'name' => $request->input('name'),
+            'category' => $request->input('category'),
+            'steps' => $request->input('steps'),
+            'pass_threshold' => $request->input('pass_threshold', 80.00),
+            'max_attempts' => $request->input('max_attempts', 5),
+        ]);
+
+        return response()->json(['success' => true, 'data' => $template]);
+    }
+
+    public function destroyTemplate(int $id): JsonResponse
+    {
+        $tenantId = Auth::user()->tenant_id;
+
+        $template = EsignVerificationTemplate::where('tenant_id', $tenantId)
+            ->findOrFail($id);
+
+        $template->update(['is_active' => false]);
+
+        return response()->json(['success' => true, 'message' => '템플릿이 비활성화되었습니다.']);
+    }
+
+    // ─── API: 데모 (인식 테스트) ───
+
+    public function demoRecognize(Request $request): JsonResponse
+    {
+        $request->validate([
+            'image' => 'required|string',
+            'expected_text' => 'required|string|max:200',
+        ]);
+
+        $result = $this->service->demo(
+            $request->input('image'),
+            $request->input('expected_text'),
+        );
+
+        return response()->json(['success' => true, 'data' => $result]);
+    }
+
+    // ─── API: 검증 이력 ───
+
+    public function verificationHistory(Request $request): JsonResponse
+    {
+        $tenantId = Auth::user()->tenant_id;
+
+        $query = EsignHandwritingVerification::where('tenant_id', $tenantId)
+            ->orderBy('created_at', 'desc');
+
+        if ($request->filled('contract_id')) {
+            $query->where('contract_id', $request->input('contract_id'));
+        }
+
+        $data = $query->limit(100)->get();
+
+        return response()->json(['success' => true, 'data' => $data]);
+    }
+
+    // ─── API: 통계 ───
+
+    public function stats(): JsonResponse
+    {
+        $tenantId = Auth::user()->tenant_id;
+
+        $total = EsignHandwritingVerification::where('tenant_id', $tenantId)->count();
+        $passed = EsignHandwritingVerification::where('tenant_id', $tenantId)->where('is_passed', true)->count();
+        $failed = $total - $passed;
+        $avgScore = EsignHandwritingVerification::where('tenant_id', $tenantId)
+            ->whereNotNull('similarity_score')
+            ->avg('similarity_score') ?? 0;
+        $avgAttempts = EsignHandwritingVerification::where('tenant_id', $tenantId)
+            ->where('is_passed', true)
+            ->avg('attempt_number') ?? 0;
+
+        $templateCount = EsignVerificationTemplate::where('tenant_id', $tenantId)
+            ->where('is_active', true)
+            ->count();
+
+        return response()->json([
+            'success' => true,
+            'data' => [
+                'total_verifications' => $total,
+                'passed' => $passed,
+                'failed' => $failed,
+                'pass_rate' => $total > 0 ? round(($passed / $total) * 100, 1) : 0,
+                'avg_score' => round($avgScore, 1),
+                'avg_attempts' => round($avgAttempts, 1),
+                'template_count' => $templateCount,
+            ],
+        ]);
+    }
+}
diff --git a/app/Services/ESign/HandwritingVerificationService.php b/app/Services/ESign/HandwritingVerificationService.php
index ac17f055..16885d9f 100644
--- a/app/Services/ESign/HandwritingVerificationService.php
+++ b/app/Services/ESign/HandwritingVerificationService.php
@@ -407,12 +407,16 @@ public function demo(string $base64Image, string $expectedText): array
 
         $threshold = (float) config('esign.handwriting_verification.default_threshold', 80.0);
 
+        $isPassed = $similarityScore >= $threshold;
+        $hints = $isPassed ? [] : $this->generateHints($similarityScore, $recognizedText, $expectedText);
+
         return [
             'recognized_text' => $recognizedText,
             'similarity_score' => $similarityScore,
-            'is_passed' => $similarityScore >= $threshold,
-            'engine' => $hwrResult['engine'],
-            'confidence' => $hwrResult['confidence'],
+            'is_passed' => $isPassed,
+            'hwr_engine' => $hwrResult['engine'],
+            'hwr_confidence' => $hwrResult['confidence'],
+            'hints' => array_map(fn ($h) => $h['message'], $hints),
         ];
     }
 
diff --git a/config/esign.php b/config/esign.php
new file mode 100644
index 00000000..232e4049
--- /dev/null
+++ b/config/esign.php
@@ -0,0 +1,39 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | 필기 문구 확인 (Handwriting Verification)
+    |--------------------------------------------------------------------------
+    */
+    'handwriting_verification' => [
+        'enabled' => env('ESIGN_HWR_ENABLED', true),
+
+        // HWR 엔진 우선순위: clova, google_vision, tesseract
+        'engine' => env('ESIGN_HWR_ENGINE', 'clova'),
+        'fallback_engine' => env('ESIGN_HWR_FALLBACK', 'google_vision'),
+
+        // Naver Clova OCR
+        'clova' => [
+            'api_url' => env('CLOVA_OCR_API_URL'),
+            'secret_key' => env('CLOVA_OCR_SECRET_KEY'),
+        ],
+
+        // Google Cloud Vision
+        'google_vision' => [
+            'api_key' => env('GOOGLE_VISION_API_KEY'),
+        ],
+
+        // 검증 설정
+        'default_threshold' => (float) env('ESIGN_HWR_THRESHOLD', 80.0),
+        'max_attempts' => (int) env('ESIGN_HWR_MAX_ATTEMPTS', 5),
+        'min_strokes' => 5,
+        'recognition_timeout' => 5,
+
+        // 이미지 전처리
+        'image_max_width' => 1200,
+        'image_format' => 'png',
+    ],
+
+];
diff --git a/resources/views/esign/verification/dashboard.blade.php b/resources/views/esign/verification/dashboard.blade.php
new file mode 100644
index 00000000..803bde98
--- /dev/null
+++ b/resources/views/esign/verification/dashboard.blade.php
@@ -0,0 +1,168 @@
+@extends('layouts.app')
+
+@section('title', '전자서명 고도화')
+@section('page-title', '전자서명 고도화 — 필기 문구 확인')
+
+@push('styles')
+<style>
+.hv-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; }
+.hv-stat-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
+.hv-stat-item { flex: 1 1 180px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; text-align: center; }
+.hv-stat-value { font-size: 28px; font-weight: 700; color: #1f2937; }
+.hv-stat-label { font-size: 13px; color: #6b7280; margin-top: 4px; }
+.hv-stat-item.primary { border-color: #3b82f6; background: #eff6ff; }
+.hv-stat-item.primary .hv-stat-value { color: #2563eb; }
+.hv-stat-item.success { border-color: #10b981; background: #ecfdf5; }
+.hv-stat-item.success .hv-stat-value { color: #059669; }
+.hv-nav { display: flex; gap: 8px; margin-bottom: 24px; }
+.hv-nav a { padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; color: #6b7280; background: #f3f4f6; transition: all .2s; }
+.hv-nav a:hover, .hv-nav a.active { background: #2563eb; color: #fff; }
+.hv-section-title { font-size: 18px; font-weight: 600; color: #1f2937; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
+.hv-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
+.hv-badge-blue { background: #dbeafe; color: #1d4ed8; }
+.hv-badge-green { background: #d1fae5; color: #065f46; }
+.hv-badge-gray { background: #f3f4f6; color: #6b7280; }
+.hv-flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
+.hv-flow-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border-radius: 12px; background: #f9fafb; border: 1px solid #e5e7eb; min-width: 120px; text-align: center; }
+.hv-flow-step.new { background: #eff6ff; border-color: #3b82f6; }
+.hv-flow-step .step-num { width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
+.hv-flow-step.new .step-num { background: #2563eb; color: #fff; }
+.hv-flow-arrow { color: #9ca3af; font-size: 20px; }
+.hv-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
+.hv-feature-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; }
+.hv-feature-card h4 { font-size: 15px; font-weight: 600; color: #1f2937; margin-bottom: 8px; }
+.hv-feature-card p { font-size: 13px; color: #6b7280; line-height: 1.6; }
+</style>
+@endpush
+
+@section('content')
+<div style="max-width: 1200px; margin: 0 auto;">
+
+    {{-- 네비게이션 --}}
+    <div class="hv-nav">
+        <a href="{{ route('esign-verification.dashboard') }}" class="active">대시보드</a>
+        <a href="{{ route('esign-verification.templates') }}">확인 템플릿</a>
+        <a href="{{ route('esign-verification.demo') }}">인식 테스트</a>
+    </div>
+
+    {{-- 통계 --}}
+    <div id="hv-stats" class="hv-stat-grid">
+        <div class="hv-stat-item primary">
+            <div class="hv-stat-value" id="stat-total">-</div>
+            <div class="hv-stat-label">총 검증 횟수</div>
+        </div>
+        <div class="hv-stat-item success">
+            <div class="hv-stat-value" id="stat-pass-rate">-</div>
+            <div class="hv-stat-label">통과율</div>
+        </div>
+        <div class="hv-stat-item">
+            <div class="hv-stat-value" id="stat-avg-score">-</div>
+            <div class="hv-stat-label">평균 일치율</div>
+        </div>
+        <div class="hv-stat-item">
+            <div class="hv-stat-value" id="stat-avg-attempts">-</div>
+            <div class="hv-stat-label">평균 시도 횟수</div>
+        </div>
+        <div class="hv-stat-item">
+            <div class="hv-stat-value" id="stat-templates">-</div>
+            <div class="hv-stat-label">확인 템플릿</div>
+        </div>
+    </div>
+
+    {{-- 서비스 흐름도 --}}
+    <div class="hv-card" style="margin-bottom: 24px;">
+        <div class="hv-section-title">
+            전자서명 고도화 흐름
+            <span class="hv-badge hv-badge-blue">NEW</span>
+        </div>
+        <p style="font-size: 14px; color: #6b7280; margin-bottom: 16px;">
+            보험사와 동일한 방식으로, 서명 전 지정 문구를 자필로 작성하고 인식률을 검증합니다.
+        </p>
+        <div class="hv-flow">
+            <div class="hv-flow-step">
+                <div class="step-num">1</div>
+                <div style="font-size: 13px; font-weight: 600;">링크 접속</div>
+                <div style="font-size: 11px; color: #9ca3af;">기존 유지</div>
+            </div>
+            <div class="hv-flow-arrow">→</div>
+            <div class="hv-flow-step">
+                <div class="step-num">2</div>
+                <div style="font-size: 13px; font-weight: 600;">OTP 인증</div>
+                <div style="font-size: 11px; color: #9ca3af;">기존 유지</div>
+            </div>
+            <div class="hv-flow-arrow">→</div>
+            <div class="hv-flow-step new">
+                <div class="step-num">3</div>
+                <div style="font-size: 13px; font-weight: 600;">필기 확인</div>
+                <div style="font-size: 11px; color: #2563eb;">고도화 추가</div>
+            </div>
+            <div class="hv-flow-arrow">→</div>
+            <div class="hv-flow-step">
+                <div class="step-num">4</div>
+                <div style="font-size: 13px; font-weight: 600;">서명/도장</div>
+                <div style="font-size: 11px; color: #9ca3af;">기존 유지</div>
+            </div>
+            <div class="hv-flow-arrow">→</div>
+            <div class="hv-flow-step">
+                <div class="step-num">5</div>
+                <div style="font-size: 13px; font-weight: 600;">완료</div>
+                <div style="font-size: 11px; color: #9ca3af;">기존 유지</div>
+            </div>
+        </div>
+    </div>
+
+    {{-- 핵심 기능 --}}
+    <div class="hv-card">
+        <div class="hv-section-title">핵심 기능</div>
+        <div class="hv-feature-grid">
+            <div class="hv-feature-card">
+                <h4>✍️ 자필 문구 작성</h4>
+                <p>모바일/태블릿/웹에서 지정 문구를 직접 손으로 작성합니다. 가이드 문구가 연하게 표시되어 따라 쓸 수 있습니다.</p>
+            </div>
+            <div class="hv-feature-card">
+                <h4>🔍 HWR 필기 인식</h4>
+                <p>Naver Clova OCR / Google Vision API로 자필 이미지를 텍스트로 변환합니다. 한국어 필기체에 특화된 인식 엔진을 사용합니다.</p>
+            </div>
+            <div class="hv-feature-card">
+                <h4>📊 유사도 검증</h4>
+                <p>Levenshtein + 글자 유사도 알고리즘으로 인식 결과와 기대 문구의 일치율을 계산합니다. 기본 80% 이상 통과.</p>
+            </div>
+            <div class="hv-feature-card">
+                <h4>📋 확인 템플릿</h4>
+                <p>계약 유형별로 확인 문구 세트를 미리 정의합니다. 다단계 확인(내용확인 + 본인이름 쓰기)이 가능합니다.</p>
+            </div>
+            <div class="hv-feature-card">
+                <h4>🛡️ 보안 강화</h4>
+                <p>스트로크 데이터 + 이미지 해시 + IP/UA 기록으로 위변조를 방지합니다. 모든 시도가 감사 로그에 기록됩니다.</p>
+            </div>
+            <div class="hv-feature-card">
+                <h4>📱 멀티 디바이스</h4>
+                <p>모바일 터치, 태블릿 스타일러스, 웹 마우스 모두 지원합니다. 디바이스별 캔버스 크기가 자동 최적화됩니다.</p>
+            </div>
+        </div>
+    </div>
+
+</div>
+@endsection
+
+@push('scripts')
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('{{ route("esign-verification.api.stats") }}', {
+        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
+    })
+    .then(r => r.json())
+    .then(json => {
+        if (json.success) {
+            const d = json.data;
+            document.getElementById('stat-total').textContent = d.total_verifications.toLocaleString();
+            document.getElementById('stat-pass-rate').textContent = d.pass_rate + '%';
+            document.getElementById('stat-avg-score').textContent = d.avg_score + '%';
+            document.getElementById('stat-avg-attempts').textContent = d.avg_attempts + '회';
+            document.getElementById('stat-templates').textContent = d.template_count + '개';
+        }
+    })
+    .catch(() => {});
+});
+</script>
+@endpush
diff --git a/resources/views/esign/verification/demo.blade.php b/resources/views/esign/verification/demo.blade.php
new file mode 100644
index 00000000..4dfcb019
--- /dev/null
+++ b/resources/views/esign/verification/demo.blade.php
@@ -0,0 +1,409 @@
+@extends('layouts.app')
+
+@section('title', '필기 인식 테스트')
+@section('page-title', '전자서명 고도화 — 필기 인식 테스트')
+
+@push('styles')
+<style>
+.hv-nav { display: flex; gap: 8px; margin-bottom: 24px; }
+.hv-nav a { padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; color: #6b7280; background: #f3f4f6; transition: all .2s; }
+.hv-nav a:hover, .hv-nav a.active { background: #2563eb; color: #fff; }
+</style>
+@endpush
+
+@section('content')
+<div style="max-width: 1000px; margin: 0 auto;">
+    <div class="hv-nav">
+        <a href="{{ route('esign-verification.dashboard') }}">대시보드</a>
+        <a href="{{ route('esign-verification.templates') }}">확인 템플릿</a>
+        <a href="{{ route('esign-verification.demo') }}" class="active">인식 테스트</a>
+    </div>
+
+    <div id="demo-root"></div>
+</div>
+@endsection
+
+@push('scripts')
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script>
+(function(){var w=console.warn;console.warn=function(){if(typeof arguments[0]==='string'&&arguments[0].indexOf('in-browser Babel')>-1)return;w.apply(console,arguments)};})();
+</script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+@verbatim
+<script type="text/babel">
+const { useState, useEffect, useRef, useCallback } = React;
+
+const PRESETS = [
+    '본인은 위 내용을 확인하였습니다',
+    '위 계약 내용에 동의합니다',
+    '본인은 상기 내용을 충분히 이해하였습니다',
+];
+
+const cardStyle = { background: '#fff', border: '1px solid #e5e7eb', borderRadius: '12px', padding: '24px' };
+const btnPrimary = { padding: '10px 24px', background: '#2563eb', color: '#fff', border: 'none', borderRadius: '8px', fontSize: '14px', fontWeight: '600', cursor: 'pointer' };
+const btnSecondary = { padding: '10px 24px', background: '#f3f4f6', color: '#374151', border: '1px solid #d1d5db', borderRadius: '8px', fontSize: '14px', fontWeight: '500', cursor: 'pointer' };
+const inputStyle = { width: '100%', padding: '10px 14px', border: '1px solid #d1d5db', borderRadius: '8px', fontSize: '14px', boxSizing: 'border-box' };
+
+// ─── Handwriting Canvas Component ───
+const HandwritingCanvas = ({ guideText, onDataChange, canvasRef }) => {
+    const containerRef = useRef(null);
+    const isDrawingRef = useRef(false);
+    const lastPointRef = useRef(null);
+    const strokeCountRef = useRef(0);
+
+    const getPoint = (e) => {
+        const rect = canvasRef.current.getBoundingClientRect();
+        const touch = e.touches ? e.touches[0] : e;
+        return { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
+    };
+
+    const initCanvas = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const container = containerRef.current;
+        canvas.width = container.offsetWidth;
+        canvas.height = 180;
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGuide(ctx, canvas.width, canvas.height);
+        drawLines(ctx, canvas.width, canvas.height);
+        strokeCountRef.current = 0;
+        onDataChange(null);
+    }, [guideText, onDataChange]);
+
+    const drawGuide = (ctx, w, h) => {
+        if (!guideText) return;
+        ctx.save();
+        ctx.font = '22px "Pretendard", "Malgun Gothic", sans-serif';
+        ctx.fillStyle = 'rgba(156, 163, 175, 0.25)';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(guideText, w / 2, h / 2);
+        ctx.restore();
+    };
+
+    const drawLines = (ctx, w, h) => {
+        ctx.save();
+        ctx.strokeStyle = 'rgba(229, 231, 235, 0.5)';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([4, 4]);
+        // 중앙 가이드라인
+        ctx.beginPath();
+        ctx.moveTo(20, h / 2 + 20);
+        ctx.lineTo(w - 20, h / 2 + 20);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.restore();
+    };
+
+    const startDraw = (e) => {
+        e.preventDefault();
+        isDrawingRef.current = true;
+        lastPointRef.current = getPoint(e);
+    };
+
+    const draw = (e) => {
+        e.preventDefault();
+        if (!isDrawingRef.current) return;
+        const ctx = canvasRef.current.getContext('2d');
+        const pt = getPoint(e);
+        ctx.beginPath();
+        ctx.moveTo(lastPointRef.current.x, lastPointRef.current.y);
+        ctx.lineTo(pt.x, pt.y);
+        ctx.strokeStyle = '#1f2937';
+        ctx.lineWidth = 2.5;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.stroke();
+        lastPointRef.current = pt;
+    };
+
+    const endDraw = () => {
+        if (isDrawingRef.current) {
+            isDrawingRef.current = false;
+            strokeCountRef.current++;
+            onDataChange(canvasRef.current.toDataURL('image/png'));
+        }
+    };
+
+    useEffect(() => {
+        initCanvas();
+        const handleResize = () => initCanvas();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [initCanvas]);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        canvas.addEventListener('mousedown', startDraw);
+        canvas.addEventListener('mousemove', draw);
+        canvas.addEventListener('mouseup', endDraw);
+        canvas.addEventListener('mouseleave', endDraw);
+        canvas.addEventListener('touchstart', startDraw, { passive: false });
+        canvas.addEventListener('touchmove', draw, { passive: false });
+        canvas.addEventListener('touchend', endDraw);
+        return () => {
+            canvas.removeEventListener('mousedown', startDraw);
+            canvas.removeEventListener('mousemove', draw);
+            canvas.removeEventListener('mouseup', endDraw);
+            canvas.removeEventListener('mouseleave', endDraw);
+            canvas.removeEventListener('touchstart', startDraw);
+            canvas.removeEventListener('touchmove', draw);
+            canvas.removeEventListener('touchend', endDraw);
+        };
+    }, []);
+
+    const containerStyle = {
+        border: '2px solid #d1d5db',
+        borderRadius: '12px',
+        overflow: 'hidden',
+        background: '#fff',
+        cursor: 'crosshair',
+    };
+
+    const canvasStyle = {
+        display: 'block',
+        width: '100%',
+        touchAction: 'none',
+    };
+
+    return (
+        <div ref={containerRef} style={containerStyle}>
+            <canvas ref={canvasRef} style={canvasStyle} />
+        </div>
+    );
+};
+
+// ─── Result Display ───
+const ResultDisplay = ({ result }) => {
+    if (!result) return null;
+
+    const score = result.similarity_score || 0;
+    const isPassed = result.is_passed;
+    const bgColor = isPassed ? '#ecfdf5' : '#fef2f2';
+    const borderColor = isPassed ? '#10b981' : '#ef4444';
+    const textColor = isPassed ? '#065f46' : '#991b1b';
+
+    const barBg = score >= 80 ? '#10b981' : score >= 60 ? '#f59e0b' : '#ef4444';
+
+    return (
+        <div style={{ background: bgColor, border: `1px solid ${borderColor}`, borderRadius: '12px', padding: '20px', marginTop: '16px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                <span style={{ fontSize: '16px', fontWeight: '700', color: textColor }}>
+                    {isPassed ? '✅ 통과' : '❌ 미통과'}
+                </span>
+                <span style={{ fontSize: '28px', fontWeight: '700', color: textColor }}>
+                    {score.toFixed(1)}%
+                </span>
+            </div>
+
+            {/* 프로그레스 바 */}
+            <div style={{ width: '100%', height: '8px', background: '#e5e7eb', borderRadius: '4px', overflow: 'hidden', marginBottom: '12px' }}>
+                <div style={{ width: `${Math.min(score, 100)}%`, height: '100%', background: barBg, borderRadius: '4px', transition: 'width 0.5s ease' }} />
+            </div>
+
+            <div style={{ fontSize: '14px', marginBottom: '8px' }}>
+                <span style={{ color: '#6b7280' }}>인식 결과: </span>
+                <span style={{ color: '#1f2937', fontWeight: '600' }}>"{result.recognized_text || '(인식 실패)'}"</span>
+            </div>
+
+            {result.hwr_engine && (
+                <div style={{ fontSize: '12px', color: '#9ca3af' }}>
+                    사용 엔진: {result.hwr_engine} | 엔진 신뢰도: {(result.hwr_confidence || 0).toFixed(1)}%
+                </div>
+            )}
+
+            {result.hints && result.hints.length > 0 && (
+                <div style={{ marginTop: '12px', padding: '12px', background: '#fffbeb', borderRadius: '8px', border: '1px solid #fde68a' }}>
+                    <div style={{ fontSize: '13px', fontWeight: '600', color: '#92400e', marginBottom: '4px' }}>💡 인식률 향상 팁</div>
+                    {result.hints.map((h, i) => (
+                        <div key={i} style={{ fontSize: '13px', color: '#78350f' }}>• {h}</div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ─── Main App ───
+const App = () => {
+    const [expectedText, setExpectedText] = useState(PRESETS[0]);
+    const [imageData, setImageData] = useState(null);
+    const [result, setResult] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [history, setHistory] = useState([]);
+    const canvasRef = useRef(null);
+
+    const handleClear = () => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // 가이드 다시 그리기
+        if (expectedText) {
+            ctx.save();
+            ctx.font = '22px "Pretendard", "Malgun Gothic", sans-serif';
+            ctx.fillStyle = 'rgba(156, 163, 175, 0.25)';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(expectedText, canvas.width / 2, canvas.height / 2);
+            ctx.restore();
+        }
+        ctx.save();
+        ctx.strokeStyle = 'rgba(229, 231, 235, 0.5)';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([4, 4]);
+        ctx.beginPath();
+        ctx.moveTo(20, canvas.height / 2 + 20);
+        ctx.lineTo(canvas.width - 20, canvas.height / 2 + 20);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.restore();
+        setImageData(null);
+        setResult(null);
+    };
+
+    const handleSubmit = async () => {
+        if (!imageData) return alert('캔버스에 문구를 작성해 주세요.');
+        if (!expectedText.trim()) return alert('기대 문구를 입력해 주세요.');
+
+        setLoading(true);
+        setResult(null);
+        try {
+            const res = await fetch('/esign-verification/api/demo', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
+                },
+                body: JSON.stringify({
+                    image: imageData,
+                    expected_text: expectedText,
+                }),
+            });
+            const json = await res.json();
+            if (json.success) {
+                setResult(json.data);
+                setHistory(prev => [{ ...json.data, expected: expectedText, time: new Date().toLocaleTimeString() }, ...prev].slice(0, 10));
+            } else {
+                alert(json.message || '인식에 실패했습니다.');
+            }
+        } catch (e) {
+            alert('서버 연결 오류: ' + e.message);
+        }
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <div style={{ ...cardStyle, marginBottom: '20px' }}>
+                <h3 style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>필기 인식 데모</h3>
+                <p style={{ fontSize: '13px', color: '#6b7280', marginBottom: '16px' }}>
+                    아래 캔버스에 문구를 직접 손으로 쓰고, HWR 엔진이 얼마나 정확하게 인식하는지 테스트합니다.
+                </p>
+
+                {/* 기대 문구 입력 */}
+                <div style={{ marginBottom: '16px' }}>
+                    <label style={{ display: 'block', fontSize: '13px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>확인 문구</label>
+                    <input
+                        style={inputStyle}
+                        value={expectedText}
+                        onChange={e => setExpectedText(e.target.value)}
+                        placeholder="서명자가 작성할 문구"
+                    />
+                    <div style={{ display: 'flex', gap: '6px', marginTop: '8px', flexWrap: 'wrap' }}>
+                        {PRESETS.map((p, i) => (
+                            <button
+                                key={i}
+                                onClick={() => { setExpectedText(p); handleClear(); }}
+                                style={{
+                                    padding: '4px 12px', borderRadius: '6px', fontSize: '12px',
+                                    border: '1px solid #d1d5db', background: expectedText === p ? '#dbeafe' : '#fff',
+                                    color: expectedText === p ? '#1d4ed8' : '#6b7280', cursor: 'pointer'
+                                }}
+                            >
+                                {p}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* 가이드 문구 표시 */}
+                <div style={{ marginBottom: '8px', padding: '12px', background: '#f0f9ff', borderRadius: '8px', border: '1px solid #bae6fd', textAlign: 'center' }}>
+                    <span style={{ fontSize: '13px', color: '#0369a1' }}>아래 캔버스에 다음 문구를 써 주세요:</span>
+                    <div style={{ fontSize: '18px', fontWeight: '700', color: '#0c4a6e', marginTop: '4px' }}>"{expectedText}"</div>
+                </div>
+
+                {/* 캔버스 */}
+                <HandwritingCanvas
+                    guideText={expectedText}
+                    onDataChange={setImageData}
+                    canvasRef={canvasRef}
+                />
+
+                {/* 버튼 */}
+                <div style={{ display: 'flex', gap: '8px', marginTop: '16px', justifyContent: 'flex-end' }}>
+                    <button onClick={handleClear} style={btnSecondary}>초기화</button>
+                    <button onClick={handleSubmit} disabled={loading || !imageData} style={{ ...btnPrimary, opacity: loading || !imageData ? 0.5 : 1 }}>
+                        {loading ? '인식 중...' : '인식 테스트'}
+                    </button>
+                </div>
+
+                {/* 결과 */}
+                <ResultDisplay result={result} />
+            </div>
+
+            {/* 테스트 이력 */}
+            {history.length > 0 && (
+                <div style={cardStyle}>
+                    <h3 style={{ fontSize: '16px', fontWeight: '600', marginBottom: '12px' }}>테스트 이력</h3>
+                    <div style={{ overflowX: 'auto' }}>
+                        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '13px' }}>
+                            <thead>
+                                <tr style={{ borderBottom: '2px solid #e5e7eb' }}>
+                                    <th style={{ textAlign: 'left', padding: '8px', color: '#6b7280', fontWeight: '600' }}>시간</th>
+                                    <th style={{ textAlign: 'left', padding: '8px', color: '#6b7280', fontWeight: '600' }}>기대 문구</th>
+                                    <th style={{ textAlign: 'left', padding: '8px', color: '#6b7280', fontWeight: '600' }}>인식 결과</th>
+                                    <th style={{ textAlign: 'center', padding: '8px', color: '#6b7280', fontWeight: '600' }}>일치율</th>
+                                    <th style={{ textAlign: 'center', padding: '8px', color: '#6b7280', fontWeight: '600' }}>엔진</th>
+                                    <th style={{ textAlign: 'center', padding: '8px', color: '#6b7280', fontWeight: '600' }}>결과</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {history.map((h, i) => (
+                                    <tr key={i} style={{ borderBottom: '1px solid #f3f4f6' }}>
+                                        <td style={{ padding: '8px', color: '#9ca3af' }}>{h.time}</td>
+                                        <td style={{ padding: '8px' }}>{h.expected}</td>
+                                        <td style={{ padding: '8px' }}>{h.recognized_text || '-'}</td>
+                                        <td style={{ padding: '8px', textAlign: 'center', fontWeight: '600' }}>{(h.similarity_score || 0).toFixed(1)}%</td>
+                                        <td style={{ padding: '8px', textAlign: 'center', color: '#9ca3af' }}>{h.hwr_engine || '-'}</td>
+                                        <td style={{ padding: '8px', textAlign: 'center' }}>
+                                            <span style={{
+                                                padding: '2px 8px', borderRadius: '4px', fontSize: '12px', fontWeight: '600',
+                                                background: h.is_passed ? '#d1fae5' : '#fee2e2',
+                                                color: h.is_passed ? '#065f46' : '#991b1b',
+                                            }}>
+                                                {h.is_passed ? '통과' : '미통과'}
+                                            </span>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+ReactDOM.createRoot(document.getElementById('demo-root')).render(<App />);
+</script>
+@endverbatim
+@endpush
diff --git a/resources/views/esign/verification/templates.blade.php b/resources/views/esign/verification/templates.blade.php
new file mode 100644
index 00000000..6809e42d
--- /dev/null
+++ b/resources/views/esign/verification/templates.blade.php
@@ -0,0 +1,241 @@
+@extends('layouts.app')
+
+@section('title', '확인 템플릿 관리')
+@section('page-title', '전자서명 고도화 — 확인 템플릿 관리')
+
+@push('styles')
+<style>
+.hv-nav { display: flex; gap: 8px; margin-bottom: 24px; }
+.hv-nav a { padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; color: #6b7280; background: #f3f4f6; transition: all .2s; }
+.hv-nav a:hover, .hv-nav a.active { background: #2563eb; color: #fff; }
+</style>
+@endpush
+
+@section('content')
+<div style="max-width: 1200px; margin: 0 auto;">
+    <div class="hv-nav">
+        <a href="{{ route('esign-verification.dashboard') }}">대시보드</a>
+        <a href="{{ route('esign-verification.templates') }}" class="active">확인 템플릿</a>
+        <a href="{{ route('esign-verification.demo') }}">인식 테스트</a>
+    </div>
+
+    <div id="template-root"></div>
+</div>
+@endsection
+
+@push('scripts')
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script>
+(function(){var w=console.warn;console.warn=function(){if(typeof arguments[0]==='string'&&arguments[0].indexOf('in-browser Babel')>-1)return;w.apply(console,arguments)};})();
+</script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+@verbatim
+<script type="text/babel">
+const { useState, useEffect, useCallback } = React;
+
+const API = {
+    list: () => fetch('/esign-verification/api/templates', { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } }).then(r => r.json()),
+    create: (data) => fetch('/esign-verification/api/templates', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content }, body: JSON.stringify(data) }).then(r => r.json()),
+    update: (id, data) => fetch(`/esign-verification/api/templates/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content }, body: JSON.stringify(data) }).then(r => r.json()),
+    destroy: (id) => fetch(`/esign-verification/api/templates/${id}`, { method: 'DELETE', headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content } }).then(r => r.json()),
+};
+
+const CATEGORIES = ['일반', '근로계약', '영업계약', '비밀유지', '기타'];
+
+const cardStyle = { background: '#fff', border: '1px solid #e5e7eb', borderRadius: '12px', padding: '20px' };
+const btnPrimary = { padding: '8px 20px', background: '#2563eb', color: '#fff', border: 'none', borderRadius: '8px', fontSize: '14px', fontWeight: '500', cursor: 'pointer' };
+const btnSecondary = { padding: '8px 20px', background: '#f3f4f6', color: '#374151', border: '1px solid #d1d5db', borderRadius: '8px', fontSize: '14px', fontWeight: '500', cursor: 'pointer' };
+const btnDanger = { padding: '6px 14px', background: '#fee2e2', color: '#dc2626', border: '1px solid #fecaca', borderRadius: '8px', fontSize: '13px', cursor: 'pointer' };
+const inputStyle = { width: '100%', padding: '8px 12px', border: '1px solid #d1d5db', borderRadius: '8px', fontSize: '14px', boxSizing: 'border-box' };
+const labelStyle = { display: 'block', fontSize: '13px', fontWeight: '600', color: '#374151', marginBottom: '4px' };
+
+const StepEditor = ({ steps, onChange }) => {
+    const addStep = () => {
+        const next = [...steps, { order: steps.length + 1, text: '', threshold: 80 }];
+        onChange(next);
+    };
+    const removeStep = (idx) => {
+        const next = steps.filter((_, i) => i !== idx).map((s, i) => ({ ...s, order: i + 1 }));
+        onChange(next);
+    };
+    const updateStep = (idx, field, value) => {
+        const next = [...steps];
+        next[idx] = { ...next[idx], [field]: field === 'threshold' ? Number(value) : value };
+        onChange(next);
+    };
+
+    return (
+        <div>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
+                <label style={labelStyle}>확인 단계</label>
+                <button type="button" onClick={addStep} style={{ ...btnSecondary, padding: '4px 12px', fontSize: '13px' }}>+ 단계 추가</button>
+            </div>
+            {steps.map((step, idx) => (
+                <div key={idx} style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px', padding: '12px', background: '#f9fafb', borderRadius: '8px', border: '1px solid #e5e7eb' }}>
+                    <span style={{ fontSize: '14px', fontWeight: '700', color: '#6b7280', minWidth: '30px' }}>#{step.order}</span>
+                    <input
+                        style={{ ...inputStyle, flex: '1' }}
+                        placeholder="확인 문구 (예: 본인은 위 내용을 확인하였습니다)"
+                        value={step.text}
+                        onChange={e => updateStep(idx, 'text', e.target.value)}
+                    />
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px', minWidth: '100px' }}>
+                        <input
+                            type="number"
+                            min="50" max="100"
+                            style={{ ...inputStyle, width: '60px', textAlign: 'center' }}
+                            value={step.threshold}
+                            onChange={e => updateStep(idx, 'threshold', e.target.value)}
+                        />
+                        <span style={{ fontSize: '13px', color: '#6b7280' }}>%</span>
+                    </div>
+                    {steps.length > 1 && (
+                        <button type="button" onClick={() => removeStep(idx)} style={{ ...btnDanger, padding: '4px 10px' }}>삭제</button>
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+const TemplateForm = ({ template, onSave, onCancel }) => {
+    const [name, setName] = useState(template?.name || '');
+    const [category, setCategory] = useState(template?.category || '일반');
+    const [steps, setSteps] = useState(template?.steps || [{ order: 1, text: '본인은 위 내용을 확인하였습니다', threshold: 80 }]);
+    const [passThreshold, setPassThreshold] = useState(template?.pass_threshold || 80);
+    const [maxAttempts, setMaxAttempts] = useState(template?.max_attempts || 5);
+    const [saving, setSaving] = useState(false);
+
+    const handleSave = async () => {
+        if (!name.trim()) return alert('템플릿명을 입력하세요.');
+        if (steps.some(s => !s.text.trim())) return alert('모든 단계의 확인 문구를 입력하세요.');
+        setSaving(true);
+        try {
+            const data = { name, category, steps, pass_threshold: passThreshold, max_attempts: maxAttempts };
+            const res = template?.id ? await API.update(template.id, data) : await API.create(data);
+            if (res.success) onSave();
+            else alert(res.message || '저장에 실패했습니다.');
+        } catch { alert('서버 오류'); }
+        setSaving(false);
+    };
+
+    return (
+        <div style={cardStyle}>
+            <h3 style={{ fontSize: '16px', fontWeight: '600', marginBottom: '16px' }}>{template?.id ? '템플릿 수정' : '새 템플릿'}</h3>
+            <div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
+                <div style={{ flex: '1' }}>
+                    <label style={labelStyle}>템플릿명</label>
+                    <input style={inputStyle} value={name} onChange={e => setName(e.target.value)} placeholder="예: 영업계약 표준 확인" />
+                </div>
+                <div style={{ width: '150px' }}>
+                    <label style={labelStyle}>카테고리</label>
+                    <select style={inputStyle} value={category} onChange={e => setCategory(e.target.value)}>
+                        {CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
+                    </select>
+                </div>
+            </div>
+            <StepEditor steps={steps} onChange={setSteps} />
+            <div style={{ display: 'flex', gap: '12px', marginTop: '16px' }}>
+                <div>
+                    <label style={labelStyle}>기본 임계값 (%)</label>
+                    <input type="number" min="50" max="100" style={{ ...inputStyle, width: '80px' }} value={passThreshold} onChange={e => setPassThreshold(Number(e.target.value))} />
+                </div>
+                <div>
+                    <label style={labelStyle}>최대 시도 횟수</label>
+                    <input type="number" min="1" max="20" style={{ ...inputStyle, width: '80px' }} value={maxAttempts} onChange={e => setMaxAttempts(Number(e.target.value))} />
+                </div>
+            </div>
+            <div style={{ display: 'flex', gap: '8px', marginTop: '20px', justifyContent: 'flex-end' }}>
+                <button onClick={onCancel} style={btnSecondary}>취소</button>
+                <button onClick={handleSave} disabled={saving} style={btnPrimary}>{saving ? '저장 중...' : '저장'}</button>
+            </div>
+        </div>
+    );
+};
+
+const App = () => {
+    const [templates, setTemplates] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [mode, setMode] = useState('list'); // list, create, edit
+    const [editTarget, setEditTarget] = useState(null);
+
+    const load = useCallback(async () => {
+        setLoading(true);
+        const res = await API.list();
+        if (res.success) setTemplates(res.data);
+        setLoading(false);
+    }, []);
+
+    useEffect(() => { load(); }, [load]);
+
+    const handleDelete = async (id) => {
+        if (!confirm('이 템플릿을 비활성화하시겠습니까?')) return;
+        await API.destroy(id);
+        load();
+    };
+
+    if (mode === 'create' || mode === 'edit') {
+        return (
+            <TemplateForm
+                template={editTarget}
+                onSave={() => { setMode('list'); setEditTarget(null); load(); }}
+                onCancel={() => { setMode('list'); setEditTarget(null); }}
+            />
+        );
+    }
+
+    return (
+        <div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+                <h3 style={{ fontSize: '16px', fontWeight: '600' }}>확인 템플릿 목록</h3>
+                <button onClick={() => { setMode('create'); setEditTarget(null); }} style={btnPrimary}>+ 새 템플릿</button>
+            </div>
+
+            {loading ? (
+                <div style={{ textAlign: 'center', padding: '40px', color: '#9ca3af' }}>로딩 중...</div>
+            ) : templates.length === 0 ? (
+                <div style={{ ...cardStyle, textAlign: 'center', padding: '40px', color: '#9ca3af' }}>
+                    <p style={{ marginBottom: '12px' }}>등록된 템플릿이 없습니다.</p>
+                    <button onClick={() => setMode('create')} style={btnPrimary}>첫 번째 템플릿 만들기</button>
+                </div>
+            ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                    {templates.map(t => (
+                        <div key={t.id} style={cardStyle}>
+                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                <div>
+                                    <h4 style={{ fontSize: '15px', fontWeight: '600', marginBottom: '4px' }}>{t.name}</h4>
+                                    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                                        <span style={{ padding: '2px 8px', borderRadius: '4px', background: '#dbeafe', color: '#1d4ed8', fontSize: '12px', fontWeight: '600' }}>{t.category || '일반'}</span>
+                                        <span style={{ fontSize: '13px', color: '#6b7280' }}>{(t.steps || []).length}단계</span>
+                                        <span style={{ fontSize: '13px', color: '#6b7280' }}>임계값 {t.pass_threshold}%</span>
+                                        <span style={{ fontSize: '13px', color: '#6b7280' }}>최대 {t.max_attempts}회</span>
+                                    </div>
+                                </div>
+                                <div style={{ display: 'flex', gap: '8px' }}>
+                                    <button onClick={() => { setMode('edit'); setEditTarget(t); }} style={btnSecondary}>수정</button>
+                                    <button onClick={() => handleDelete(t.id)} style={btnDanger}>삭제</button>
+                                </div>
+                            </div>
+                            <div style={{ marginTop: '12px', padding: '12px', background: '#f9fafb', borderRadius: '8px' }}>
+                                {(t.steps || []).map((s, i) => (
+                                    <div key={i} style={{ fontSize: '13px', color: '#374151', marginBottom: '4px' }}>
+                                        <span style={{ fontWeight: '600', color: '#6b7280', marginRight: '8px' }}>#{s.order}</span>
+                                        "{s.text}"
+                                        <span style={{ marginLeft: '8px', color: '#9ca3af' }}>({s.threshold}%)</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+ReactDOM.createRoot(document.getElementById('template-root')).render(<App />);
+</script>
+@endverbatim
+@endpush
diff --git a/routes/web.php b/routes/web.php
index e4ef9067..7e28829e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -33,6 +33,7 @@
 use App\Http\Controllers\ESign\EsignApiController;
 use App\Http\Controllers\ESign\EsignController;
 use App\Http\Controllers\ESign\EsignPublicController;
+use App\Http\Controllers\ESign\EsignVerificationController;
 use App\Http\Controllers\FcmController;
 use App\Http\Controllers\GoogleCloud\AiGuideController as GoogleCloudAiGuideController;
 use App\Http\Controllers\GoogleCloud\CloudApiPricingController as GoogleCloudCloudApiPricingController;
@@ -2106,6 +2107,37 @@
     });
 });
 
+/*
+|--------------------------------------------------------------------------
+| E-Sign 고도화 — 필기 문구 확인 (Handwriting Verification)
+|--------------------------------------------------------------------------
+*/
+Route::middleware('auth')->prefix('esign-verification')->name('esign-verification.')->group(function () {
+    // 화면 라우트
+    Route::get('/', [EsignVerificationController::class, 'dashboard'])->name('dashboard');
+    Route::get('/templates', [EsignVerificationController::class, 'templates'])->name('templates');
+    Route::get('/demo', [EsignVerificationController::class, 'demo'])->name('demo');
+
+    // API 라우트
+    Route::prefix('api')->name('api.')->group(function () {
+        // 통계
+        Route::get('/stats', [EsignVerificationController::class, 'stats'])->name('stats');
+
+        // 확인 템플릿 CRUD
+        Route::get('/templates', [EsignVerificationController::class, 'indexTemplates'])->name('templates.index');
+        Route::post('/templates', [EsignVerificationController::class, 'storeTemplate'])->name('templates.store');
+        Route::get('/templates/{id}', [EsignVerificationController::class, 'showTemplate'])->whereNumber('id')->name('templates.show');
+        Route::put('/templates/{id}', [EsignVerificationController::class, 'updateTemplate'])->whereNumber('id')->name('templates.update');
+        Route::delete('/templates/{id}', [EsignVerificationController::class, 'destroyTemplate'])->whereNumber('id')->name('templates.destroy');
+
+        // 데모 (인식 테스트)
+        Route::post('/demo', [EsignVerificationController::class, 'demoRecognize'])->name('demo');
+
+        // 검증 이력
+        Route::get('/history', [EsignVerificationController::class, 'verificationHistory'])->name('history');
+    });
+});
+
 /*
 |--------------------------------------------------------------------------
 | YouTube Shorts AI Generator (Veo 3.1)