/* ==========================================================
   components/rank-list.css — 지역 순위 목록 (components/rank-list.js)
   한 줄: 순위 | 지역 이름 + 비쌈/저렴 | 양방향 막대 | 값 | 관심 지역 별
   ========================================================== */

.rlist-head, .rrow-link {
  display: grid; align-items: center; column-gap: 12px;
  grid-template-columns: 28px minmax(64px, 88px) minmax(0, 1fr) 62px;
}
.rlist-head { padding: 0 44px 8px 12px; font-size: 11.5px; font-weight: 700; color: var(--ink-4); }
.rlist-head-v { text-align: right; }
.rlist { display: grid; gap: 2px; }
.rrow { position: relative; border-radius: 14px; transition: background .15s; }
.rrow:hover { background: var(--surface-2); }
.rrow-link { min-height: 54px; padding: 6px 44px 6px 12px; border-radius: 14px; }
.rlist.no-fav .rrow-link { padding-right: 12px; }
.rlist-head.no-fav { padding-right: 12px; }

.rrow-rank { font-size: 15px; font-weight: 800; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.rrow-rank.top { color: var(--navy); }
.rrow-name { display: grid; min-width: 0; line-height: 1.3; }
.rrow-name b { display: flex; align-items: center; gap: 5px; font-size: 15.5px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.rrow-me { padding: 1px 6px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 800; font-style: normal; letter-spacing: 0; }
.rrow-sub { display: inline-flex; align-items: center; gap: 2px; margin-top: 1px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.rrow-sub .ico { width: 9px; height: 9px; }
.rrow-sub.exp { color: var(--exp-deep); }
.rrow-sub.aff { color: var(--aff-deep); }
.rrow-sub.flat { color: var(--ink-3); }
.rrow-bar { min-width: 0; }
.rrow-val { display: grid; justify-items: end; line-height: 1.25; text-align: right; }
.rrow-val b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rrow-val small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.rrow-fav {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #CDD2DC; transition: color .15s, background .15s;
}
.rrow-fav .ico { width: 18px; height: 18px; }
.rrow-fav:hover { background: #fff; color: var(--ink-4); }
.rrow-fav.is-on { color: #F5A800; }

/* 선택(강조) 지역 */
.rrow.is-focus { background: var(--navy-soft); }
.rrow.is-focus .rrow-rank { color: var(--navy); }
.rrow.is-focus::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--navy); }

.rlist-more {
  width: 100%; height: 46px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 13px; background: var(--surface-2); font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.rlist-more:hover { background: #EDF0F5; }
.rlist-more .ico { width: 17px; height: 17px; }

/* 금액처럼 긴 값: 값 칸을 넓힌다 (옵션 wide) */
.rlist-wide .rlist-head, .rlist-wide .rrow-link { grid-template-columns: 28px minmax(56px, 76px) minmax(0, 1fr) 92px; }

@media (max-width: 420px) {
  .rlist-wide .rlist-head, .rlist-wide .rrow-link { grid-template-columns: 22px 56px minmax(0, 1fr) 82px; }
  .rlist-head, .rrow-link { grid-template-columns: 22px 64px minmax(0, 1fr) 54px; column-gap: 9px; }
  .rrow-link { padding-left: 8px; padding-right: 40px; }
  .rlist-head { padding-left: 8px; padding-right: 40px; }
  .rrow-name b { font-size: 15px; }
  .rrow-val b { font-size: 15px; }
}
@media (min-width: 768px) {
  .rlist-head, .rrow-link { grid-template-columns: 34px 110px minmax(0, 1fr) 78px; column-gap: 16px; }
  .rrow-link { min-height: 56px; }
  .rrow-val b { font-size: 17px; }
  .rlist-wide .rlist-head, .rlist-wide .rrow-link { grid-template-columns: 34px 96px minmax(0, 1fr) 108px; }
}