<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" isErrorPage="true" %>
<%!
    private String htmlEscape(Object value) {
        if (value == null) {
            return "";
        }
        return String.valueOf(value)
                .replace("&", "&amp;")
                .replace("<", "&lt;")
                .replace(">", "&gt;")
                .replace("\"", "&quot;")
                .replace("'", "&#39;");
    }
%>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <jsp:include page="/WEB-INF/views/theme-init.jsp"/>
    <title>오류가 발생했습니다 | bibimbap</title>
    <style>
      html {
        color-scheme: light;
        --surface: #faf8f5;
        --card-bg: #fff;
        --text: #1a1a1a;
        --text-muted: #5c5c5c;
        --accent: #e8a54b;
        --border: rgba(0, 0, 0, 0.08);
        --card-media-1: #f0ebe3;
        --card-media-2: #e5ddd2;
        --card-media-3: #dccfb8;
        --card-shadow: rgba(0, 0, 0, 0.06);
        --button-text: #1a1a1a;
      }
      html[data-theme="dark"] {
        color-scheme: dark;
        --surface: #121212;
        --card-bg: #1e1e1e;
        --text: #ece8e1;
        --text-muted: #a39e96;
        --border: rgba(255, 255, 255, 0.1);
        --card-media-1: #2a2620;
        --card-media-2: #1f1c18;
        --card-media-3: #3d3528;
        --card-shadow: rgba(0, 0, 0, 0.35);
        --button-text: #1a1a1a;
      }
      body {
        margin: 0;
        min-height: 100vh;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
        background: var(--surface);
        color: var(--text);
        display: flex;
        flex-direction: column;
      }
      .page-main {
        width: 100%;
        max-width: 72rem;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 2rem max(1rem, env(safe-area-inset-left)) 3rem max(1rem, env(safe-area-inset-right));
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .error-panel {
        width: min(100%, 38rem);
        padding: 2rem;
        box-sizing: border-box;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-bg);
        box-shadow: 0 2px 8px var(--card-shadow);
        text-align: center;
      }
      .error-panel__media {
        width: 8rem;
        height: 8rem;
        margin: 0 auto 1.5rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(160deg, var(--card-media-1) 0%, var(--card-media-2) 45%, var(--card-media-3) 100%);
      }
      .error-panel__logo {
        width: 5rem;
        height: auto;
        object-fit: contain;
        opacity: 0.9;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
      }
      html[data-theme="dark"] .error-panel__logo {
        opacity: 0.94;
        filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
      }
      .error-panel__eyebrow {
        margin: 0 0 0.5rem;
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--accent);
        letter-spacing: 0.02em;
      }
      .error-panel__title {
        margin: 0;
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        line-height: 1.2;
        letter-spacing: 0;
        color: var(--text);
      }
      .error-panel__description {
        max-width: 28rem;
        margin: 1rem auto 0;
        font-size: 0.9375rem;
        line-height: 1.65;
        color: var(--text-muted);
      }
      .error-panel__meta {
        margin: 1rem auto 0;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text-muted);
        background: rgba(0, 0, 0, 0.025);
        font-size: 0.8125rem;
        line-height: 1.5;
        text-align: left;
        word-break: break-word;
      }
      html[data-theme="dark"] .error-panel__meta {
        background: rgba(255, 255, 255, 0.04);
      }
      .error-panel__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.625rem;
        margin-top: 1.5rem;
      }
      .error-panel__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 3rem;
        padding: 0 1rem;
        border-radius: 12px;
        border: 1px solid var(--border);
        font-size: 0.9375rem;
        font-weight: 700;
        text-decoration: none;
        color: var(--text);
        background: var(--card-bg);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .error-panel__button--primary {
        border-color: transparent;
        color: var(--button-text);
        background: var(--accent);
      }
      .error-panel__button:hover {
        border-color: rgba(232, 165, 75, 0.45);
        box-shadow: 0 4px 12px var(--card-shadow);
      }
      .error-panel__button:active {
        transform: scale(0.98);
      }
      @media (max-width: 480px) {
        .page-main {
          align-items: flex-start;
          padding-top: 1.5rem;
        }
        .error-panel {
          padding: 1.5rem 1rem;
        }
        .error-panel__button {
          width: 100%;
        }
      }
    </style>
</head>
<body>
    <jsp:include page="/WEB-INF/views/header.jsp"/>
    <%
        String ctx = request.getContextPath();
        Object statusCode = request.getAttribute("jakarta.servlet.error.status_code");
        Object requestUri = request.getAttribute("jakarta.servlet.error.request_uri");
        Object message = request.getAttribute("jakarta.servlet.error.message");
        if (message == null || String.valueOf(message).isBlank()) {
            message = exception != null ? exception.getMessage() : null;
        }
    %>
    <main class="page-main">
        <section class="error-panel" aria-labelledby="error-title">
            <div class="error-panel__media" aria-hidden="true">
                <img class="error-panel__logo" src="<%= ctx %>/images/logo.png" alt="" width="120" height="120" />
            </div>
            <p class="error-panel__eyebrow">
                <% if (statusCode != null) { %>
                ERROR <%= statusCode %>
                <% } else { %>
                ERROR
                <% } %>
            </p>
            <h1 class="error-panel__title" id="error-title">페이지를 불러오지 못했습니다</h1>
            <p class="error-panel__description">
                요청을 처리하는 중 문제가 발생했습니다. 잠시 후 다시 시도하거나 홈으로 돌아가 다른 메뉴를 이용해 주세요.
            </p>
            <% if (requestUri != null || message != null) { %>
            <div class="error-panel__meta" aria-label="오류 상세 정보">
                <% if (requestUri != null) { %>
                <div>요청 경로: <%= htmlEscape(requestUri) %></div>
                <% } %>
                <% if (message != null) { %>
                <div>메시지: <%= htmlEscape(message) %></div>
                <% } %>
            </div>
            <% } %>
            <div class="error-panel__actions">
                <a class="error-panel__button error-panel__button--primary" href="<%= ctx %>/">홈으로 이동</a>
                <a class="error-panel__button" href="javascript:history.back()">이전 페이지</a>
            </div>
        </section>
    </main>
    <jsp:include page="/WEB-INF/views/footer.jsp"/>
</body>
</html>
