<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 페이지를 찾을 수 없습니다</title>
    <style>
        /* 에러 페이지는 어떤 상황에서도 떠야 하므로 자원 블록(common-ui-css)에 의존하지 않고
           스타일을 이 파일 안에 넣는다. 폰트도 시스템 서체로 폴백한다. */
        :root { --e-navy:#1b224e; --e-text:#333; --e-muted:#888; --e-line:#e5e5e5; }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            background-color: #fff;
            color: var(--e-text);
            font-family: "Pretendard", "KoPubWorldDotum", -apple-system, BlinkMacSystemFont,
                         "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
            -webkit-font-smoothing: antialiased;
        }
        .e-wrap {
            display: flex; align-items: center; justify-content: center;
            min-height: 100vh; padding: 60px 20px; text-align: center;
        }
        .e-code { color: var(--e-navy); font-size: 18px; font-weight: 700; letter-spacing: 1px; }
        .e-title { margin: 18px 0 0; color: var(--e-text); font-size: 34px; font-weight: 700; line-height: 1.3; }
        .e-desc { margin: 18px 0 0; color: var(--e-muted); font-size: 17px; line-height: 28px; }
        .e-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 36px; }
        .e-btn {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 130px; padding: 13px 26px;
            border: 1px solid #d9d9d9; border-radius: 6px;
            background-color: #fff; color: var(--e-text);
            font-size: 15px; font-weight: 600; text-decoration: none;
            transition: all .2s ease-out;
        }
        .e-btn:hover, .e-btn:focus-visible { border-color: var(--e-navy); color: var(--e-navy); }
        .e-btn-primary { border-color: var(--e-navy); background-color: var(--e-navy); color: #fff; }
        .e-btn-primary:hover, .e-btn-primary:focus-visible { background-color: #fff; color: var(--e-navy); }
        @media screen and (max-width: 767px) {
            .e-title { font-size: 26px; }
            .e-desc { font-size: 15px; line-height: 25px; }
        }
    </style>
</head>
<body>
    <main class="e-wrap">
        <div>
            <p class="e-code">404</p>
            <h1 class="e-title">페이지를 찾을 수 없습니다</h1>
            <p class="e-desc">요청하신 페이지가 존재하지 않거나 삭제되었습니다.</p>
            <div class="e-btns">
                <a href="/" class="e-btn e-btn-primary">홈으로 이동</a>
                <a href="javascript:history.back()" class="e-btn">이전 페이지</a>
            </div>
        </div>
    </main>
</body>
</html>
