/* 기본 폰트 & 반응형 */
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif; overflow-x:hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; height: auto; }

.container { max-width: 1040px; margin: 0 auto; padding: 16px; }
.topbar { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid #e2e8f0; padding: 12px 16px; display:flex; align-items:center; justify-content:space-between; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:10px; background:#f1f5f9; color:#64748b; font-size:12px; }
.btn { background:#2563eb; color:#fff; border:none; border-radius:14px; padding:12px 16px; font-weight:800; font-size:16px; cursor:pointer; }
.input, select { border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px; font-size:16px; width:100%; }
.back{ background:#f1f5f9; border:none; border-radius:12px; padding:8px 12px; font-size:16px; cursor:pointer; }

/* 목록 카드 */
.list { display:flex; flex-direction:column; gap:10px; }
/* .rank-card { background:#fff; border-radius:16px; padding:50px 50px 12px 12px ; box-shadow:0 8px 20px rgba(2,6,23,.06); display:flex; align-items:center; justify-content:space-between; } */
/* =========================
   Rank Card - Centered Style
   ========================= */
.rank-card{
    /* 기존: display:flex; align-items:center; justify-content:space-between; ... */
    display:flex;
    flex-direction: column;         /* 위→아래 배치: 순위, 합계, 이름 */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 15px;
    padding: 18px 16px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(2,6,23,.10);
}

/* 이모지(메달) */
.rank-medal{
    font-size: clamp(28px, 4.5vw, 40px);
    line-height: 1;
}

/* 순위 배지: #1, #2, #3 표시용 */
.rank-no{
    font-weight: 900;
    font-size: clamp(18px, 3.5vw, 22px);
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef2ff;     /* 기본 파스텔 */
    color: #3730a3;
}

/* 합계(달란트 점수) 크게 */
.rank-total{
    font-weight: 900;
    font-size: clamp(24px, 5vw, 36px);
    letter-spacing: .5px;
}

/* 이름(생년월일 포함 가능) */
.rank-name{
    font-weight: 700;
    font-size: clamp(16px, 3.5vw, 20px);
    color: #334155;
}

/* Top 3 하이라이트 색상 */
.rank-item.top1 .rank-no{ background:#fff7ed; color:#b45309; } /* 🥇 골드 */
.rank-item.top2 .rank-no{ background:#f1f5f9; color:#334155; } /* 🥈 실버 */
.rank-item.top3 .rank-no{ background:#fef2f2; color:#991b1b; } /* 🥉 브론즈 */

/* 리스트 간격은 기존 규칙 유지 */
.list .rank-item{ padding: 0; }
.rank-item .rank-card{ width: 90%; }

/* 카드 안의 폰트 전체 키우기 옵션(선택) */
.rank-card *{ transform: translateZ(0); } /* 글자 렌더링 선명도 개선 */

  

/* 🪔 지니램프 애니메이션 (기본 OFF → 포커스 아이템에만 ON) */
@keyframes genie-float { 0%{ transform: translateY(0)} 50%{ transform: translateY(-6px)} 100%{ transform: translateY(0)} }
@keyframes genie-glow  { 0%{ filter: drop-shadow(0 0 0 rgba(255,200,0,0)); } 50%{ filter: drop-shadow(0 0 12px rgba(255,200,0,.7)); } 100%{ filter: drop-shadow(0 0 0 rgba(255,200,0,0)); } }

/* 스크롤 컨테이너: 세로만, 가로 스크롤 방지 */
.rank-scroll { max-height: 80vh; overflow-y: auto; overflow-x: hidden; padding: 4px; scroll-behavior: smooth; }

/* --- 포커스 스케일 전략 --- */
/* 기본(전체 조금 작게) */
.rank-item { transform: scale(.94); transition: transform .28s ease, box-shadow .28s ease, opacity .28s ease; transform-origin: center; will-change: transform; }

/* 희미화(포커스 전/후 아이템은 좀 더 작고 살짝 흐리게) */
.rank-item.dim { transform: scale(.90); opacity:.85; }

/* 포커스(현재 상단 포커스 아이템: 확실히 크게) */
.rank-item.active { transform: scale(1.30); box-shadow: 0 14px 34px rgba(2,6,23,.18); opacity:1; z-index: 1; }

/* 기본: 모든 아이템의 지니램프는 정지 */
.rank-item .genie { animation: none !important; opacity: .45; }

/* 포커스 아이템만 지니램프 ON */
.rank-item.active .genie { animation: genie-float 2.4s ease-in-out infinite, genie-glow 2.4s ease-in-out infinite !important; opacity: 1; }