{% load static %}
<!DOCTYPE html>
<html lang="ko" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>페이지를 찾을 수 없습니다 - 신라대학교 AMP 제8기</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
    }
  </script>
  <!-- 다크모드 초기 설정 스크립트 (FOUC 방지) -->
  <script>
    (function() {
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme === 'light') {
        document.documentElement.classList.remove('dark');
      }
    })();
  </script>
</head>
<body class="bg-gray-200 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-300">
  <div class="min-h-screen flex items-center justify-center px-4">
    <div class="max-w-md w-full text-center">
      <!-- 로고/제목 -->
      <div class="mb-8">
        <a href="{% url 'main' %}" class="text-2xl font-bold text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
          신라대학교 AMP 제8기
        </a>
      </div>
      
      <!-- 404 아이콘 -->
      <div class="mb-8">
        <div class="w-32 h-32 mx-auto bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
          <svg class="w-16 h-16 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-3-8.5a9.5 9.5 0 109.5 9.5A9.5 9.5 0 0012 3.5z" />
          </svg>
        </div>
        <h1 class="text-6xl font-bold text-gray-300 dark:text-gray-600 mb-2">404</h1>
      </div>
      
      <!-- 에러 메시지 -->
      <div class="mb-8">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
          페이지를 찾을 수 없습니다
        </h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
          요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다.<br>
          URL을 다시 확인하거나 메인 페이지로 이동해주세요.
        </p>
      </div>
      
      <!-- 액션 버튼들 -->
      <div class="space-y-4">

        
        <button 
          onclick="history.back()" 
          class="inline-block w-full bg-gray-600 dark:bg-gray-700 text-white px-6 py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition-colors duration-200 font-semibold"
        >
          ⬅️ 이전 페이지로 돌아가기
        </button>
      </div>
      
      <!-- 다크모드 토글 버튼 -->
      
      
      <!-- 푸터 -->
      <div class="mt-12 text-xs text-gray-500 dark:text-gray-400">
        <p>신라대학교 AMP 제8기</p>
        <p class="mt-1">문제가 지속되면 관리자에게 문의해주세요.</p>
      </div>
    </div>
  </div>

  <!-- 다크모드 토글 스크립트 -->
  <script>
    const themeToggle = document.getElementById('theme-toggle');
    const lightIcon = document.getElementById('theme-toggle-light-icon');
    const darkIcon = document.getElementById('theme-toggle-dark-icon');

    function updateThemeIcons() {
      if (document.documentElement.classList.contains('dark')) {
        lightIcon.classList.remove('hidden');
        darkIcon.classList.add('hidden');
      } else {
        lightIcon.classList.add('hidden');
        darkIcon.classList.remove('hidden');
      }
    }

    function toggleTheme() {
      const isDark = document.documentElement.classList.contains('dark');
      
      if (isDark) {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      } else {
        document.documentElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      }
      
      updateThemeIcons();
    }

    // 초기 아이콘 설정
    updateThemeIcons();

    // 토글 버튼 클릭 이벤트
    if (themeToggle) {
      themeToggle.addEventListener('click', toggleTheme);
    }
  </script>
</body>
</html>
