/* ──────────────────────────────────────
   요즘 전화번호 외우세요? — 공통 스타일
────────────────────────────────────── */
* {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

html {
    height: 100%;
    overflow-y: scroll; /* 항상 스크롤바 공간 확보 → 레이아웃 흔들림 방지 */
    /* 핀치 줌·더블탭 줌 차단 (iOS 포함) */
    touch-action: pan-x pan-y;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
                 'Pretendard', 'Noto Sans KR', sans-serif;
    background: linear-gradient(160deg, #ffecd2 0%, #ffb8d4 50%, #d4a8f5 100%);
    background-attachment: fixed;
    min-height: 100%;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

/* ── 페이지 래퍼 ── */
.page {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    padding: 24px 16px 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── 카드 ── */
.card {
    background: rgba(255,255,255,0.97);
    border-radius: 28px;
    padding: 32px 24px 28px;
    width: 100%;
    box-shadow: 0 8px 40px rgba(200,100,150,0.15);
    animation: slideUp 0.35s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── 버튼 ── */
.btn {
    display: block;
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 18px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.1s, box-shadow 0.1s;
    margin-top: 12px;
    letter-spacing: -0.2px;
}
.btn:active { transform: scale(0.96); opacity: 0.9; }

.btn-primary {
    background: linear-gradient(135deg, #f472b6, #f43f5e);
    color: #fff;
    box-shadow: 0 6px 20px rgba(244,63,94,0.32);
}

.btn-ghost {
    background: #f5f5f7;
    color: #888;
    font-weight: 600;
}

/* ── 공통 유틸 ── */
.center { text-align: center; }
.mt8    { margin-top: 8px;  }
.mt16   { margin-top: 16px; }

.divider { height: 1px; background: #f0f0f0; margin: 20px 0; }

/* ── 문제 진행 점 ── */
.q-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}
.qdot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #eee;
    transition: background 0.3s, transform 0.2s;
}
.qdot.curr { background: #f43f5e; transform: scale(1.25); }
.qdot.ok   { background: #86efac; }
.qdot.fail { background: #fca5a5; }

/* ── 통계 박스 ── */
.stat-box {
    background: #fafafa;
    border-radius: 18px;
    padding: 6px 0;
    margin-bottom: 22px;
}
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f3f3;
}
.stat-row:last-child { border-bottom: none; }
.stat-label { font-size: 15px; color: #888; }
.stat-val   { font-size: 20px; font-weight: 800; color: #f43f5e; }

/* ── 진행 바 ── */
.bar-bg {
    width: 100%;
    height: 8px;
    background: #f0f0f0;
    border-radius: 100px;
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, #f472b6, #f43f5e);
}

/* ── 레벨 진행 점 ── */
.level-dots {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.ldot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #e8e8e8;
    transition: all 0.3s;
}
.ldot.done    { background: linear-gradient(135deg, #f472b6, #f43f5e); }
.ldot.current { width: 24px; border-radius: 9px; background: #f43f5e; }

/* ── 광고 영역 ── */
.ad-area { width: 100%; margin: 16px 0; }
.ad-placeholder {
    width: 100%;
    min-height: 100px;
    background: #f9f9fb;
    border: 2px dashed #e0e0e0;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #c0c0c0;
    font-size: 13px;
    gap: 4px;
}
.ad-placeholder span { font-weight: 700; font-size: 14px; }

/* ── 공유 뷰 (공유 링크로 접근 시) ── */
.shared-badge {
    display: inline-block;
    background: linear-gradient(135deg,#fce7f3,#fce7f3);
    color: #f43f5e;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 100px;
    border: 1.5px solid #fbcfe8;
    margin-bottom: 16px;
}
.shared-emoji { font-size: 72px; text-align: center; margin-bottom: 10px; line-height: 1; }
.shared-grade {
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    background: linear-gradient(135deg, #f472b6, #f43f5e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
}
.shared-from {
    font-size: 14px;
    color: #aaa;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}
.shared-highlights {
    background: #fff5f7;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shared-highlights p {
    font-size: 16px;
    font-weight: 700;
    color: #444;
}

/* ── 키패드 ── */
.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}
.key {
    background: #f8f8fa;
    border: none;
    border-radius: 16px;
    padding: 0;
    height: 62px;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    transition: transform 0.08s, background 0.08s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
}
.key:active, .key.tap { transform: scale(0.88); background: #ffe4ec; }

.key-del { background: #fff0f3; color: #f43f5e; font-size: 22px; }
.key-del:active, .key-del.tap { background: #fecdd3; }

.key-ok {
    background: linear-gradient(135deg, #f472b6, #f43f5e);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(244,63,94,0.3);
}
.key-ok:active, .key-ok.tap { opacity: 0.85; transform: scale(0.88); }

/* ── 입력 슬롯 ── */
.slots-area {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-bottom: 18px;
    min-height: 50px;
    align-items: center;
}
.slot {
    height: 46px;
    border-radius: 10px;
    border: 2.5px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #1a1a2e;
    transition: border-color 0.2s, background 0.2s;
    background: #fafafa;
}
.slot.active { border-color: #f43f5e; background: #fff5f7; box-shadow: 0 0 0 3px rgba(244,63,94,0.1); }
.slot.filled { border-color: #f9a8d4; background: #fdf4ff; }



/* ─── Footer ─── */
.site-footer {
    border-top: 2.5px solid var(--ink);
    padding: 24px 16px;
    background: var(--ink);
    color: var(--bg);
}

.footer-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--bg);
}

.footer-links {
    display: flex;
    gap: 18px;
}

.footer-links a {
    font-size: 12px;
    color: #aaa;
    transition: color .15s;
}

.footer-links a:hover { color: var(--bg); }

.footer-copy {
    width: 100%;
    font-size: 11px;
    color: #888;
}