<!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;
        }

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

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .logo {
            width: 64px;
            height: 64px;
            margin: 0 auto 20px auto;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }

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

        .header-subtitle {
            color: #868e96;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: -0.2px;
        }

        .form-group {
            margin-bottom: 24px;
        }

        .form-group label {
            display: block;
            color: #495057;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
            letter-spacing: -0.2px;
        }

        .form-group input {
            width: 100%;
            padding: 16px 18px;
            border: 2px solid #e9ecef;
            border-radius: 14px;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.2s ease;
            letter-spacing: -0.3px;
            background: #f8f9fa;
        }

        .form-group input:focus {
            outline: none;
            border-color: #6366f1;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
        }

        .form-group input::placeholder {
            color: #adb5bd;
            font-weight: 400;
        }

        .btn-submit {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: #ffffff;
            border: none;
            border-radius: 14px;
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: -0.3px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.24);
        }

        .btn-submit:active {
            transform: scale(0.98);
        }

        .btn-back {
            display: block;
            text-align: center;
            margin-top: 20px;
            color: #6366f1;
            text-decoration: none;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: -0.2px;
        }

        .btn-back:active {
            color: #8b5cf6;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="header">
            <div class="logo">📱</div>
            <div class="header-title">마이페이지</div>
            <div class="header-subtitle">전화번호로 포인트 조회</div>
        </div>

        <form method="GET" action="/my-page">
            <div class="form-group">
                <label for="phone">전화번호</label>
                <div style="display: flex; align-items: center; gap: 8px;">
                    <span style="font-size: 18px; font-weight: 600; color: #495057; white-space: nowrap; padding: 16px 0 16px 4px;">010 -</span>
                    <input type="tel" id="phoneInput"
                           placeholder="0000-0000"
                           inputmode="numeric"
                           maxlength="9"
                           autocomplete="tel"
                           required
                           style="flex: 1;">
                    <input type="hidden" id="phone" name="phone">
                </div>
            </div>

            <button type="submit" class="btn-submit">
                조회하기
            </button>
        </form>

        <!-- 또는 구분선 -->
        <div style="text-align: center; margin: 24px 0 20px 0; position: relative;">
            <span style="background: #fff; padding: 0 16px; color: #adb5bd; font-size: 13px; font-weight: 500; position: relative; z-index: 1;">또는</span>
            <div style="position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e9ecef; z-index: 0;"></div>
        </div>

        <!-- 카카오 로그인 버튼 (JS SDK) -->
        <button type="button" onclick="kakaoLogin()" style="display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 18px; background: #FEE500; color: #191919; border: none; border-radius: 14px; font-size: 17px; font-weight: 700; cursor: pointer; letter-spacing: -0.3px; transition: all 0.2s ease;">
            <svg width="20" height="20" 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>
            카카오로 조회하기
        </button>

        <a href="/" class="btn-back">← 홈으로</a>
    </div>

    <script>
        // 뒷번호 자동 하이픈 (010 고정)
        const phoneInput = document.getElementById('phoneInput');
        const phoneHidden = document.getElementById('phone');

        phoneInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/[^0-9]/g, '');
            if (value.length <= 4) {
                e.target.value = value;
            } else {
                e.target.value = value.slice(0, 4) + '-' + value.slice(4, 8);
            }
        });

        // 제출 시 010 합쳐서 hidden 필드에 전달
        phoneInput.closest('form').addEventListener('submit', function() {
            const raw = phoneInput.value.replace(/[^0-9]/g, '');
            phoneHidden.value = '010' + raw;
        });

        phoneInput.focus();
    </script>
    <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
      integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmOGfnSNqoARCbb2xl4Kh1v6Q"
      crossorigin="anonymous"></script>
    <script>
    if (typeof Kakao !== 'undefined') Kakao.init('3d1e098107157c5021b73bd5ab48600f');

    function kakaoLogin() {
        if (typeof Kakao !== 'undefined' && Kakao.isInitialized()) {
            Kakao.Auth.authorize({
                redirectUri: 'https://mile.0bin.in/claim/kakao/callback',
                state: '{{ kakao_state }}'
            });
        } else {
            window.location.href = '/my-page/kakao/start';
        }
    }
    </script>
    <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js').catch(()=>{});}</script>
</body>
</html>
