{% extends "base.html" %}

{% block title %}サーバーエラー - {{ site_name }}{% endblock %}

{% block content %}
<div class="error-page">
    <div class="error-code">500</div>
    <h1>サーバーエラーが発生しました</h1>
    <p>申し訳ございません。サーバーで問題が発生しました。<br>しばらくしてからもう一度お試しください。</p>
    <a href="/" class="btn-back">トップページへ戻る</a>
</div>

<style>
.error-page {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.error-code {
    font-size: 8rem;
    font-weight: 700;
    color: var(--color-error);
    line-height: 1;
    margin-bottom: 1rem;
}

.error-page h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.error-page p {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.btn-back {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 500;
}

.btn-back:hover {
    background: var(--color-primary-hover);
}
</style>
{% endblock %}