<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - 페이지를 찾을 수 없습니다</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#6366f1'
},
borderRadius: {
'none': '0px',
'sm': '4px',
DEFAULT: '8px',
'md': '12px',
'lg': '16px',
'xl': '20px',
'2xl': '24px',
'3xl': '32px',
'full': '9999px',
'button': '8px'
},
fontFamily: {
'korean': ['Noto Sans KR', 'sans-serif']
}
}
}
}
</script>
<style>
:where([class^="ri-"])::before {
content: "\f3c2";
}
body {
font-family: 'Noto Sans KR', sans-serif;
}
.error-animation {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.fade-in {
animation: fadeIn 0.8s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center p-4">
<div class="max-w-2xl w-full text-center fade-in">
<div class="mb-8">
<div class="w-32 h-32 mx-auto mb-8 flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-50 rounded-full shadow-lg error-animation">
<i class="ri-error-warning-line text-6xl text-blue-400"></i>
</div>
<div class="mb-6">
<h1 class="text-8xl md:text-9xl font-bold text-gray-200 mb-4 select-none">404</h1>
<div class="w-24 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 mx-auto rounded-full mb-8"></div>
</div>
<div class="space-y-4 mb-12">
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 leading-tight">
해당 요청을 찾을 수 없습니다
</h2>
<p class="text-lg text-gray-600 max-w-md mx-auto leading-relaxed">
다시 확인해주세요
</p>
<p class="text-sm text-gray-500 max-w-lg mx-auto">
요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다.<br>
URL을 다시 한 번 확인해 주시기 바랍니다.
</p>
</div>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<button onclick="goHome()" class="!rounded-button whitespace-nowrap bg-primary hover:bg-blue-600 text-white px-8 py-3 font-medium transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 flex items-center gap-2">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-home-line text-lg"></i>
</div>
홈페이지로 돌아가기
</button>
<button onclick="goBack()" class="!rounded-button whitespace-nowrap bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 px-8 py-3 font-medium transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 flex items-center gap-2">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-arrow-left-line text-lg"></i>
</div>
이전 페이지로
</button>
</div>
</div>
</div>
<script id="navigation-handler">
function goHome() {
window.location.href = '/';
}
function goBack() {
if (window.history.length > 1) {
window.history.back();
} else {
window.location.href = '/';
}
}
</script>
<script id="page-effects">
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-2px)';
});
button.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
});
</script>
</body>
</html>