/* ============================================================
   배때지 V2 · 랭킹 스타일

   ※ 가로 캐러셀/카드/섹션헤더/탭 공용 스타일은 v2-carousel.css 로 이전했다.
        .v2c, .v2c-slide, .v2c-card__*, .v2c-sec__*, .v2c-tab
      이 파일에는 랭킹 고유 요소만 남긴다.
        - 메인 섹션 장식(트로피, TOP 배지)
        - /v2/ranking.php 더보기 페이지(세로 목록 · 브랜드 그리드 · 종류 아이콘)
   ============================================================ */

.v2rk-home,
.v2rk-page{
    --rk-ink:#16161a;
    --rk-sub:#6b6b74;
    --rk-line:#eceef1;
    --rk-bg:#fff;
    --rk-accent:#16161a;
}

/* ---------------- 메인 섹션 장식 ---------------- */
.v2rk-trophy{font-size:17px;line-height:1}
.v2rk-topbadge{
    font-style:normal;font-size:12px;font-weight:800;
    padding:2px 8px;border-radius:999px;
    background:var(--rk-ink);color:#fff;letter-spacing:.02em;
}

/* ============================================================
   /v2/ranking.php — 더보기 페이지
   ============================================================ */
.v2rk-page{padding:0 16px 40px}

.v2rk-page-head{padding:20px 0 14px;border-bottom:1px solid var(--rk-line);margin-bottom:16px}
.v2rk-page-head h1{
    margin:0;font-size:21px;font-weight:800;letter-spacing:-.4px;color:var(--rk-ink);
    display:flex;align-items:center;gap:7px;
}
.v2rk-basis{margin:5px 0 0;font-size:12px;color:var(--rk-sub)}
.v2rk-page-head .v2rk-basis{margin-top:6px;font-size:12.5px}

/* 종류 아이콘 스위처 */
.v2rk-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.v2rk-kind{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    padding:13px 6px;border:1px solid var(--rk-line);border-radius:12px;background:#fff;
    text-decoration:none;color:var(--rk-sub);font-size:12.5px;font-weight:700;text-align:center;
    transition:border-color .15s,background .15s,color .15s;
}
.v2rk-kind svg{width:22px;height:22px}
.v2rk-kind:hover{border-color:#d6d9de;color:var(--rk-ink)}
.v2rk-kind.on{background:var(--rk-accent);border-color:var(--rk-accent);color:#fff}

/* 더보기 페이지 탭 (레거시 마크업 유지) */
.v2rk-tabs{
    display:flex;gap:7px;margin-bottom:16px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;
}
.v2rk-tabs::-webkit-scrollbar{display:none}
.v2rk-tab{
    flex:0 0 auto;height:34px;padding:0 15px;
    border:1px solid var(--rk-line);border-radius:999px;background:#fff;
    font-family:inherit;font-size:13px;font-weight:700;color:var(--rk-sub);
    cursor:pointer;white-space:nowrap;
    transition:background .15s,color .15s,border-color .15s;
}
.v2rk-tab:hover{border-color:#d6d9de;color:var(--rk-ink)}
.v2rk-tab.on{background:var(--rk-accent);border-color:var(--rk-accent);color:#fff}
.v2rk-panel[hidden]{display:none}

/* 세로 순위 목록 */
.v2rk-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:2px}
.v2rk-item a{
    display:flex;align-items:center;gap:12px;
    padding:9px 4px;text-decoration:none;color:inherit;border-radius:10px;
}
.v2rk-item a:hover{background:#fafbfc}
.v2rk-num{
    flex:0 0 22px;text-align:center;
    font-size:15px;font-weight:800;color:#b9bcc4;font-variant-numeric:tabular-nums;
}
.v2rk-num.top{color:var(--rk-ink)}
.v2rk-thumb{
    flex:0 0 62px;width:62px;height:62px;
    border-radius:10px;overflow:hidden;background:#f2f3f5;display:block;
}
.v2rk-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.v2rk-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.v2rk-brand{
    font-size:11.5px;font-weight:700;color:var(--rk-sub);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v2rk-name{
    font-size:13.5px;font-weight:600;line-height:1.35;color:var(--rk-ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.v2rk-price{font-size:13.5px;font-weight:800;color:var(--rk-ink);margin-top:1px}

/* 브랜드 그리드 */
.v2rk-brands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.v2rk-brand-card{
    display:flex;align-items:center;gap:11px;
    padding:11px;border:1px solid var(--rk-line);border-radius:12px;background:#fff;
    text-decoration:none;color:inherit;
}
.v2rk-brand-card:hover{border-color:#d6d9de}
.v2rk-brand-card .n{
    flex:0 0 22px;text-align:center;font-size:14px;font-weight:800;
    color:#b9bcc4;font-variant-numeric:tabular-nums;
}
.v2rk-brand-card .n.top{color:var(--rk-ink)}
.v2rk-brand-card .im{flex:0 0 46px;width:46px;height:46px;border-radius:10px;overflow:hidden;background:#f2f3f5}
.v2rk-brand-card .im img{width:100%;height:100%;object-fit:cover;display:block}
.v2rk-brand-card .tx{flex:1 1 auto;min-width:0}
.v2rk-brand-card .tx b{
    display:block;font-size:13.5px;font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v2rk-brand-card .tx span{display:block;font-size:11.5px;color:var(--rk-sub);margin-top:2px}

.v2rk-empty{
    padding:52px 20px;text-align:center;color:var(--rk-sub);font-size:14px;line-height:1.7;
    border:1px dashed var(--rk-line);border-radius:12px;background:#fafbfc;
}

/* ---------------- 태블릿 ---------------- */
@media (min-width:768px){
    .v2rk-page{padding:0 24px 56px;max-width:1000px;margin:0 auto}
    .v2rk-page-head h1{font-size:24px}
    .v2rk-kinds{grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px}
    .v2rk-kind{flex-direction:row;padding:13px 16px;font-size:13.5px}
    .v2rk-brands{grid-template-columns:repeat(3,1fr)}
    .v2rk-list{grid-template-columns:repeat(2,1fr);gap:4px 22px}
}

/* ---------------- PC ---------------- */
@media (min-width:1024px){
    .v2rk-page{max-width:1120px;padding:0 32px 64px}
    .v2rk-brands{grid-template-columns:repeat(4,1fr)}
    .v2rk-list{gap:6px 34px}
    .v2rk-item a{padding:10px 8px}
    .v2rk-thumb{flex-basis:70px;width:70px;height:70px}
    .v2rk-name{font-size:14px}
}
@media (min-width:1280px){
    .v2rk-list{grid-template-columns:repeat(2,1fr);gap:6px 48px}
}

/* 접근성 */
.v2rk-tab:focus-visible,
.v2rk-kind:focus-visible,
.v2rk-item a:focus-visible,
.v2rk-brand-card:focus-visible{outline:2px solid #3d5afe;outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .v2rk-tab,.v2rk-kind{transition:none} }