/* 마이페이지 전용 — 패널·빈 상태·검수 전환기는 shared/css/panel.css, 랭킹 행은 rank.css 공용 */

.mp-lookup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .mp-lookup-grid { grid-template-columns: 1fr; } }

.mp-lookup-desc { font-size: 13.5px; color: var(--text-mute); line-height: 1.7; margin-bottom: 18px; }
.mp-login-panel { background: var(--bg); }
.mp-login-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

/* 요약 4칸 — 마이페이지에서 가장 먼저 답해야 하는 질문들(참가권 몇 장, 내 최고 점수, 몇 위, 레벨) */
.mp-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.mp-stat { background: var(--surface); padding: 22px 20px; }
.mp-stat .k { display: block; font-size: 12px; color: var(--text-mute); margin-bottom: 8px; }
.mp-stat .v { display: block; font-size: 28px; font-weight: 800; color: var(--primary-dark); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mp-stat .v .unit { font-size: 14px; font-weight: 600; color: var(--text-mute); margin-left: 3px; }
.mp-stat .s { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 8px; }
.mp-level { display: flex; align-items: center; gap: 8px; font-size: 22px; }
.mp-level img { width: 26px; height: 26px; }
@media (max-width: 900px) { .mp-summary { grid-template-columns: 1fr 1fr; } }

.mp-gap { margin-top: 20px; }

/* 탭 — 결제내역·훈련이력이 각자 카드로 나열되면 훑어보기 힘들어져(2026-08-05 PM 지시로 개요/결제내역/
   훈련이력/회원정보 4탭으로 재구성) 개요에 요약만 두고 상세는 탭으로 분리한다. */
.mp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.mp-tab { padding: 12px 18px; font-size: 14px; font-weight: 700; color: var(--text-mute); border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
.mp-tab:hover { color: var(--primary); }
.mp-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.mp-tab-panel { display: none; }
.mp-tab-panel.is-active { display: block; }

/* 누적 레벨 등급 배지 — 등급 산정 기준은 shared/js/rank-render.js의 levelTier()와 동일
   (User::levelTier()로 서버에도 동일 컷오프 존재). 아이콘은 랭킹 행과 같은 assets/images/level/*.png. */
.mp-tier-badge { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.mp-tier-badge__ic { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }
.mp-tier-badge__label { font-size: 15px; font-weight: 800; color: var(--text); }

/* 오프라인 대회 자격 — 이 페이지에서 유일하게 색을 쓰는 자리(기획서가 재참가 유도 장치로 지목한 요소) */
.mp-eligibility { border-color: var(--game); }
.mp-elig-state { background: var(--game-pale); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 8px; }
.mp-elig-badge { display: inline-flex; font-size: 11px; font-weight: 700; color: #fff; background: var(--game); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.mp-elig-desc { font-size: 13.5px; color: var(--text-dim); line-height: 1.7; }
.mp-elig-desc b { color: var(--game-dark); font-weight: 800; font-variant-numeric: tabular-nums; }
/* 카운트다운은 이 패널에서 가장 시간에 민감한 값이라 색을 준다 */
.mp-eligibility .panel-line:first-of-type b { color: var(--game-dark); }

.mp-preview-label { font-size: 12px; font-weight: 700; color: var(--text-mute); margin-bottom: 8px; }
.mp-preview { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 6px 10px; margin-bottom: 14px; background: var(--surface); }

/* 훈련 이력 탭 종목 필터 — select+버튼 한 줄 배치 */
.mp-history-filter { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; max-width: 320px; }
.mp-history-filter select { flex: 1; }
@media (max-width: 480px) { .mp-history-filter { max-width: none; } }