/* 마이 탭 — "내 학습 흐름 + 복귀 동선" 허브. 디자인 토큰만 사용, rl-my-* prefix.
   상단 = 개인 런치패드 카드(.rl-my-hero, §3.4.1 Card 역할): 신원 + 현재 상태 + 큰 CTA를 한 프레임에.
   elevation ladder — hero(shadow-md, 센터피스) > 자산 리스트(.rl-settings__group shadow-sm).
   학습 자산 리스트는 settings.css(.rl-settings__group/__item) 단일 출처 재사용, 아바타는 avatar.css.
   페이지 좌우 패딩은 .at-container 단일 출처 — 본문 별도 padding-inline 금지. */

/* ── ① 상단 런치패드 카드 ── */
.rl-my-hero {
    background: var(--rl-surface-elev);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-md);
    box-shadow: var(--rl-shadow-md);
    padding: var(--rl-sp-4) var(--rl-sp-3);
    /* 그룹 간 24px(sp-6) — [[feedback_group_spacing_principle]] */
    margin-bottom: var(--rl-sp-6);
}

/* 신원 행 — 작은 아바타(sm) + 닉 + 가입일. 완전 비인터랙티브(편집은 기어→계정관리).
   하단 1px divider로 신원과 "흐름(상태+CTA)" 영역 분리. */
.rl-my-hero__id {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-4);
    padding-bottom: var(--rl-sp-4);
    margin-bottom: var(--rl-sp-4);
    border-bottom: 1px solid var(--rl-line);
}

.rl-my-hero__id-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rl-my-hero__name {
    font-size: var(--rl-fs-body);
    font-weight: 700;
    line-height: var(--rl-lh-tight);
    color: var(--rl-ink);
}

.rl-my-hero__meta {
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
    margin-top: var(--rl-sp-1);
}

/* 현재 상태 한 줄(헤드라인) — state 카피. CTA 위 상황 단서. */
.rl-my-hero__lead {
    margin: 0 0 var(--rl-sp-2);
    font-size: var(--rl-fs-bodylg);
    font-weight: 700;
    line-height: var(--rl-lh-snug);
    letter-spacing: var(--rl-ls-tight);
    color: var(--rl-ink);
}

/* 목적지 한 줄(과목·도구) — 버튼은 행동, 과목명은 목적지라 같이 또렷이 보여야 한다.
   위계: 제목(bodylg/700/ink) > dest(body/600/text-2) > 일반 본문. 제목급 확대·primary 강조는 금지(셋이 싸움). */
.rl-my-hero__dest {
    margin: 0 0 var(--rl-sp-4);
    font-size: var(--rl-fs-body);
    font-weight: 600;
    line-height: var(--rl-lh-snug);
    color: var(--rl-text-2);
}

/* dest 없을 때(dormant/new/게스트) — 제목과 CTA 사이 호흡을 dest 있는 경우(dest→CTA sp-4)와 통일.
   lead mb(sp-2)와 collapse되어 14px 단일 간격 — 모든 히어로 변형의 pre-CTA 리듬 일치. */
.rl-my-hero__lead + .rl-my-cta { margin-top: var(--rl-sp-4); }

/* 큰 CTA(센터피스) — 카드 안 풀폭 filled primary, 짧고 강한 단일 라벨. 카드(shadow-md)보다
   한 단계 약한 shadow-sm, hover 시그널은 translateY(-1px)(§3.8.10 elevation ladder 정합). */
.rl-my-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rl-primary);
    color: var(--rl-on-primary);
    border-radius: var(--rl-r-sm);
    box-shadow: var(--rl-shadow-sm);
    min-height: var(--rl-h-btn-lg);
    padding: var(--rl-sp-2) var(--rl-sp-5);
    font-size: var(--rl-fs-bodylg);
    font-weight: 700;
    line-height: var(--rl-lh-tight);
    text-align: center;
    text-decoration: none;
    /* 시스템 메인 런치 CTA 역할(banner .rl-btn / exam 다음문제)과 동일 dur-micro — 탭 피드백 snappy 정합. */
    transition: transform var(--rl-dur-micro) var(--rl-ease-out),
                background-color var(--rl-dur-micro) var(--rl-ease-out);
}

/* <a> 링크 기본 색 cascade(무가드 Bootstrap a:hover{color}) 차단 — color 핀은 @media(hover:hover) 밖에서
   무조건. iOS는 탭 시 sticky :hover가 발화(base-interaction 정책)되는데 hover 가드 안에 두면 핀이
   미적용돼 Bootstrap 링크색이 누출(데스크탑만 정상, iOS/앱 미해결). 배경/transform 비주얼만 가드 안에 유지. */
.rl-my-cta:hover,
.rl-my-cta:focus,
.rl-my-cta:active {
    color: var(--rl-on-primary);
    text-decoration: none;
}

@media (hover: hover) {
    .rl-my-cta:hover {
        background: var(--rl-primary-hover);
        transform: translateY(-1px);
    }
}

.rl-my-cta:active {
    background: var(--rl-primary-hover);
    transform: none;
}

/* 페이지 주 액션 키보드 포커스 링 — §6.1 표준(banner .rl-btn:focus-visible 정합).
   base-interaction.css는 non-visible outline만 차단하므로, 브랜드 링은 컴포넌트가 명시. */
.rl-my-cta:focus-visible {
    outline: 2px solid var(--rl-primary);
    outline-offset: 2px;
}

/* ── ②③ 자산·커뮤니티 그룹 ── */
/* 그룹 간 24px(sp-6) — [[feedback_group_spacing_principle]]. hero→첫 그룹은 hero margin-bottom이 담당. */
.rl-my-assets + .rl-my-assets {
    margin-top: var(--rl-sp-6);
}

.rl-my-assets-heading {
    margin: 0 0 var(--rl-sp-3);
    padding-inline: var(--rl-sp-1);
    font-size: var(--rl-fs-h4);
    font-weight: 700;
    line-height: var(--rl-lh-snug);
    letter-spacing: var(--rl-ls-tight);
    color: var(--rl-text-2);
}

/* 자산 행 — text가 grow해 우측 이동 affordance를 끝으로 민다. 톤·transition은
   settings.css .rl-settings__nav 단일 출처, hover 등장 마이크로모션만 본 페이지 스코프에서 가산.
   두 내비 종류 — chevron(복귀형 drill-down)은 forward 모션, arrow-up-right(탭 전환, §3.1.5 sub-rule 6)는
   "여기 떠나 피어로 이동" up-right 모션으로 글리프 의미와 모션 방향을 일치. */
.rl-my .rl-settings__text { flex: 1 1 auto; }

@media (hover: hover) {
    .rl-my .rl-settings__item:hover .rl-settings__nav { color: var(--rl-primary); }
    .rl-my .rl-settings__item:hover .rl-settings__nav:not(.rl-my-nav-switch) { transform: translateX(2px); }
    .rl-my .rl-settings__item:hover .rl-my-nav-switch { transform: translate(1px, -1px); }
}

.rl-my .rl-settings__item:active .rl-settings__nav { color: var(--rl-primary); }