<!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;
            -webkit-font-smoothing: antialiased;
        }

        .app-container {
            background: #ffffff;
            max-width: 420px;
            margin: 0 auto;
            min-height: 100vh;
        }

        .header {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            padding: 0 24px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-title {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -0.3px;
        }

        .btn-back {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            letter-spacing: -0.2px;
        }

        .content {
            padding: 24px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 700;
            color: #212529;
            margin: 28px 0 12px 0;
            letter-spacing: -0.3px;
        }

        .section-title:first-child {
            margin-top: 0;
        }

        p {
            color: #495057;
            font-size: 14px;
            line-height: 1.8;
            font-weight: 400;
            letter-spacing: -0.2px;
            margin-bottom: 8px;
        }

        ul {
            padding-left: 20px;
            margin: 8px 0 12px 0;
        }

        li {
            color: #495057;
            font-size: 14px;
            line-height: 1.8;
            font-weight: 400;
            letter-spacing: -0.2px;
            margin-bottom: 4px;
        }

        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin: 12px 0;
            font-size: 13px;
        }

        .info-table th,
        .info-table td {
            border: 1px solid #e9ecef;
            padding: 10px 12px;
            text-align: left;
            vertical-align: top;
        }

        .info-table th {
            background: #f8f9fa;
            color: #495057;
            font-weight: 600;
            white-space: nowrap;
        }

        .info-table td {
            color: #495057;
            line-height: 1.6;
        }

        .badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            padding: 1px 5px;
            border-radius: 3px;
            vertical-align: middle;
        }

        .badge-req { background: #fff0f0; color: #e03131; }
        .badge-opt { background: #f0f4ff; color: #6366f1; }

        .effective-date {
            color: #868e96;
            font-size: 13px;
            margin-top: 32px;
            padding-top: 16px;
            border-top: 1px solid #e9ecef;
            text-align: center;
        }

        @media (max-width: 480px) {
            .header {
                padding-top: env(safe-area-inset-top, 0px);
                height: calc(56px + env(safe-area-inset-top, 0px));
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="header">
            <div class="header-title">개인정보 처리방침</div>
            <a href="javascript:history.back()" class="btn-back">돌아가기</a>
        </div>

        <div class="content">
            <p>청춘약국(이하 "약국")은 「개인정보 보호법」에 따라 고객의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 다음과 같이 개인정보 처리방침을 수립·공개합니다.</p>

            <div class="section-title">1. 수집하는 개인정보 항목 및 수집 방법</div>
            <table class="info-table">
                <tr>
                    <th>수집 방법</th>
                    <th>수집 항목</th>
                    <th>필수/선택</th>
                </tr>
                <tr>
                    <td>직접 입력<br>(회원가입)</td>
                    <td>전화번호, 이름</td>
                    <td><span class="badge badge-req">필수</span></td>
                </tr>
                <tr>
                    <td>직접 입력<br>(회원가입)</td>
                    <td>생년월일</td>
                    <td><span class="badge badge-opt">선택</span></td>
                </tr>
                <tr>
                    <td>카카오 로그인</td>
                    <td>카카오 계정 식별자(ID), 닉네임, 프로필 이미지, 이메일, 이름, 전화번호, 생년월일</td>
                    <td><span class="badge badge-req">필수</span> / <span class="badge badge-opt">선택</span></td>
                </tr>
                <tr>
                    <td>자동 수집</td>
                    <td>구매 내역(품목명, 수량, 금액, 일시)</td>
                    <td><span class="badge badge-req">필수</span></td>
                </tr>
            </table>

            <div class="section-title">2. 개인정보의 수집 및 이용 목적</div>
            <table class="info-table">
                <tr>
                    <th>수집 항목</th>
                    <th>이용 목적</th>
                </tr>
                <tr>
                    <td>전화번호</td>
                    <td>마일리지 적립 계정의 고유 식별자, 포인트 조회 시 본인 확인, 약국 방문 시 포인트 사용을 위한 본인 확인</td>
                </tr>
                <tr>
                    <td>이름</td>
                    <td>동명이인 구분 및 약국 방문 시 본인 확인, 적립 내역 안내</td>
                </tr>
                <tr>
                    <td>생년월일</td>
                    <td>생일 기념 포인트 2배 적립 이벤트, 연령대별 맞춤 건강 정보 및 제품 추천 서비스 제공</td>
                </tr>
                <tr>
                    <td>카카오 계정 정보</td>
                    <td>간편 로그인 및 자동 적립 기능 지원, 기존 회원과의 계정 연동</td>
                </tr>
                <tr>
                    <td>구매 내역</td>
                    <td>마일리지 포인트 적립 금액 산정, 적립 내역 조회 서비스 제공</td>
                </tr>
            </table>

            <div class="section-title">3. 개인정보의 보유 및 이용 기간</div>
            <p>약국은 개인정보 수집 및 이용 목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 단, 관계 법령에 의해 보존이 필요한 경우에는 해당 법령에서 정한 기간 동안 보관합니다.</p>
            <table class="info-table">
                <tr>
                    <th>보존 항목</th>
                    <th>보존 기간</th>
                    <th>근거 법령</th>
                </tr>
                <tr>
                    <td>거래 기록</td>
                    <td>5년</td>
                    <td>부가가치세법</td>
                </tr>
                <tr>
                    <td>회원 정보</td>
                    <td>탈퇴 시까지</td>
                    <td>개인정보 보호법</td>
                </tr>
            </table>

            <div class="section-title">4. 개인정보의 제3자 제공</div>
            <p>약국은 고객의 개인정보를 제3자에게 제공하지 않습니다. 카카오 로그인은 본인 인증 목적으로만 사용되며, 약국에서 카카오에 고객 정보를 제공하지 않습니다.</p>

            <div class="section-title">5. 개인정보의 파기 절차 및 방법</div>
            <ul>
                <li>전자적 파일: 복구 및 재생이 불가능한 기술적 방법으로 삭제</li>
                <li>종이 문서: 분쇄기로 분쇄하거나 소각</li>
            </ul>

            <div class="section-title">6. 정보주체의 권리·의무 및 행사 방법</div>
            <p>고객은 언제든지 자신의 개인정보에 대해 다음과 같은 권리를 행사할 수 있습니다.</p>
            <ul>
                <li>개인정보 열람 요구</li>
                <li>오류 등이 있을 경우 정정 요구</li>
                <li>삭제 요구</li>
                <li>처리 정지 요구</li>
            </ul>
            <p>위 권리 행사는 약국에 직접 방문하시거나, 아래 연락처로 문의해주시기 바랍니다.</p>

            <div class="section-title">7. 개인정보 보호 책임자</div>
            <table class="info-table">
                <tr>
                    <th>상호</th>
                    <td>청춘약국</td>
                </tr>
                <tr>
                    <th>책임자</th>
                    <td>약국 대표</td>
                </tr>
                <tr>
                    <th>연락처</th>
                    <td>약국 방문 또는 전화 문의</td>
                </tr>
            </table>

            <div class="section-title">8. 개인정보 자동 수집 장치의 설치·운영 및 거부</div>
            <p>약국은 서비스 이용 과정에서 세션 쿠키를 사용하여 로그인 상태를 유지합니다. 쿠키는 브라우저 설정을 통해 거부할 수 있으나, 이 경우 자동 적립 기능 등 일부 서비스 이용이 제한될 수 있습니다.</p>

            <div class="section-title">9. 선택 정보 미제공에 따른 불이익</div>
            <p>생년월일 등 선택 항목을 제공하지 않더라도 마일리지 적립·조회 등 기본 서비스 이용에는 제한이 없습니다. 다만 생일 기념 포인트 이벤트, 연령대별 맞춤 추천 등 부가 서비스를 받으실 수 없습니다.</p>

            <div class="effective-date">
                시행일: 2026년 2월 25일
            </div>
        </div>
    </div>

    <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').catch(()=>{});
    }
    </script>
</body>
</html>
