<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#6366f1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="청춘약국">
    <link rel="manifest" href="/static/manifest.json">
    <link rel="apple-touch-icon" href="/static/icons/icon-192.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/static/icons/icon-192.png">
    <title>오류 - 청춘약국</title>
    <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@400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: #f5f7fa;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px;
            -webkit-font-smoothing: antialiased;
        }

        .error-container {
            background: #ffffff;
            border-radius: 24px;
            padding: 48px 32px;
            max-width: 420px;
            width: 100%;
            text-align: center;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
        }

        .error-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px auto;
            background: linear-gradient(135deg, #f03e3e 0%, #d6336c 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }

        .error-title {
            color: #212529;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 16px;
            letter-spacing: -0.5px;
        }

        .error-message {
            color: #868e96;
            font-size: 15px;
            font-weight: 500;
            line-height: 1.6;
            margin-bottom: 32px;
            letter-spacing: -0.2px;
        }

        .btn-home {
            display: inline-block;
            padding: 16px 32px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: #ffffff;
            text-decoration: none;
            border-radius: 14px;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.2px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.24);
        }

        .btn-home:active {
            transform: scale(0.98);
        }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="error-icon">⚠️</div>
        <div class="error-title">문제가 발생했어요</div>
        <div class="error-message">{{ message }}</div>
        <div style="display: flex; flex-direction: column; gap: 12px;">
            <a href="/my-page/kakao/start" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; background: #FEE500; color: #191919; text-decoration: none; border-radius: 14px; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; transition: all 0.2s ease;">
                <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
                    <path d="M10 1C4.477 1 0 4.477 0 8.5c0 2.58 1.693 4.847 4.243 6.134l-1.084 3.97a.3.3 0 00.457.338L7.7 16.392c.75.112 1.52.17 2.3.17 5.523 0 10-3.477 10-7.562C20 4.477 15.523 1 10 1z" fill="#191919"/>
                </svg>
                내 마일리지 확인하기
            </a>
            <a href="/" class="btn-home">홈으로 이동</a>
        </div>
    </div>
    <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}</script>
</body>
</html>
