/*
 * 맵기 갭 랭킹.
 * 숫자가 주인공이다. 두 값을 나란히 놓고 화살표로 잇는 것이 이 화면의 전부다.
 */

.rank-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: var(--sp-3);
}
.rank-tab {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--smoke);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.rank-tab:hover { color: var(--ink); }
.rank-tab .i { width: 17px; height: 17px; }
.rank-tab.is-on {
    background: linear-gradient(150deg, var(--heat-2), var(--heat-4));
    border-color: transparent;
    color: #fff;
}

.rank-list { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.rank-card {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--edge), var(--sh-1);
    transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.rank-card:hover { transform: translateY(-1px); border-color: var(--line-2); }
.rank-card.is-top { border-color: rgba(245, 197, 24, 0.28); }

.rank-card__no {
    flex: 0 0 auto;
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 34px;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--smoke);
    line-height: 1.1;
}
.rank-card.is-top .rank-card__no { color: var(--hazard-ink); }
.rank-card__medal { display: grid; place-items: center; color: var(--hazard-ink); }
.rank-card__medal--2 { color: #C9BFB7; }
.rank-card__medal--3 { color: #C08552; }
.rank-card__main { flex: 1 1 auto; min-width: 0; }
.rank-card__main h3 { margin: 0 0 4px; font-size: var(--t-h2); }
.rank-card__meta { margin: 0 0 10px; color: var(--smoke); font-size: var(--t-caption); }
.rank-card__share {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink-dim);
    font: inherit;
    cursor: pointer;
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.rank-card__share:hover { background: rgba(26, 18, 16, 0.08); }

/* 공식 → 체감. 이 한 줄이 이 서비스에만 있는 데이터다. */
.gapline {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.gapline__side {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border-left: 3px solid var(--lv, var(--grey-pin));
}
.gapline__side .k { font-size: 12px; color: var(--smoke); }
.gapline__side .v {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lv-ink, var(--ink));
}
.gapline__arrow { display: grid; place-items: center; color: var(--heat-3); }
.gapline__gap {
    margin-left: auto;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--hazard-ink);
}

.rank-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 120;
    display: none;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid rgba(26, 18, 16, 0.2);
    font-size: var(--t-caption);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.rank-toast.is-on { display: block; }


/* 데스크톱에는 탭바가 없다. 모바일에서만 탭바 높이만큼 띄운다. */
@media (max-width: 800px) {
    .rank-toast { bottom: calc(16px + var(--tabbar-h) + var(--safe-b)); }
}