/* ══════════════════════════════════════════════════════════════
   Member My Tab — 마이 (나의 기록 · 혜택과 도전 · 계정)
   프로필 카드와 스탯 그리드는 member.css 의 기존 스타일을 그대로 쓴다.
   ══════════════════════════════════════════════════════════════ */

.my-section {
    margin-bottom: var(--space-5);
}

.my-section-title {
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

/* ── 메뉴 리스트 ──────────────────────────────────────────── */
.my-menu {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.my-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* 44px 이상 터치 영역 */
    min-height: 52px;
    padding: var(--space-4) var(--space-5);
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.my-menu-row:last-child {
    border-bottom: none;
}

.my-menu-row:hover,
.my-menu-row:active {
    background: var(--color-gray-50);
}

.my-menu-row-danger {
    color: var(--color-danger);
}

.my-menu-arrow {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: 1;
}

/* ── 앱 설치 행 ──────────────────────────────────────────────
   다른 메뉴 행과 달리 두 줄(제목+설명)이라, 가운데 묶음만 늘린다.
   ─────────────────────────────────────────────────────────── */
.my-menu-row-install {
    gap: var(--space-3);
    background: var(--color-primary-50);
}
.my-install-ic { flex: 0 0 auto; font-size: 20px; }
.my-install-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.my-install-txt b {
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    color: var(--color-text);
}
.my-install-txt small {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--color-text-sub);
}
.my-install-done {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--color-success-100);
    color: var(--color-success-600);
    font-size: var(--text-xs);
    font-weight: var(--font-extrabold);
}