/* ==========================================================
   components/rank.css — 순위·점수 표시 부품 (여러 페이지 공통)
   .delta(▲▼ 순위 변동) · .rk(순위 숫자) · .medal(1~3위)
   · .pts(점수 숫자) · .meta-dot(· 구분 메타) · .basis(기준일 줄)
   · .ptile(점수 항목 아이콘) · .alg(알레르기 번호) · .bar(가로 막대)
   ========================================================== */

/* ---------- 순위 변동: 색 + 기호 + 숫자 (색만으로 구분하지 않는다) ---------- */
.delta {
  display: inline-flex; align-items: center; gap: 2px; line-height: 1;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.delta .ico { width: 10px; height: 10px; stroke-width: 3; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta.same { color: var(--same); }
.delta.new { color: var(--brand-deep); font-size: 11px; letter-spacing: .03em; }
.delta-pill { height: 26px; padding: 0 9px; border-radius: 999px; }
.delta-pill.up { background: var(--up-soft); }
.delta-pill.down { background: var(--down-soft); }
.delta-pill.same { background: var(--same-soft); }
.delta-pill.new { background: var(--brand-soft); }

/* ---------- 순위 숫자 · 메달 ---------- */
.rk {
  display: inline-grid; place-items: center; min-width: 30px;
  font-size: 17px; font-weight: 800; letter-spacing: -.04em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.medal {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  font-size: 15px; font-weight: 900; color: #fff; letter-spacing: -.02em;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 4px 10px -4px rgba(0, 0, 0, .25);
}
.medal.m1 { background: linear-gradient(145deg, var(--gold-light) 0%, var(--gold) 100%); text-shadow: 0 1px 1px rgba(140, 90, 0, .45); }
.medal.m2 { background: linear-gradient(145deg, var(--silver-light) 0%, var(--silver) 100%); text-shadow: 0 1px 1px rgba(60, 70, 90, .4); }
.medal.m3 { background: linear-gradient(145deg, var(--bronze-light) 0%, var(--bronze) 100%); text-shadow: 0 1px 1px rgba(120, 50, 10, .4); }

/* ---------- 점수 숫자 ---------- */
.pts {
  display: inline-flex; align-items: baseline; gap: 1px; white-space: nowrap;
  font-weight: 800; color: var(--navy); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.pts small { margin-left: 1px; font-size: .62em; font-weight: 700; color: var(--ink-4); letter-spacing: 0; }

/* ---------- 메타 (서울 · 학생 1,248명) ---------- */
.meta-dot { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: 13px; color: var(--ink-3); }
.meta-dot > * + *::before { content: "·"; margin-right: 6px; color: var(--ink-4); }

/* ---------- 기준일 줄 (모든 점수·순위·공시 정보 — 기획서 7·8장) ---------- */
.basis { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.basis span { display: inline-flex; align-items: center; gap: 5px; }
.basis .ico { width: 14px; height: 14px; color: var(--ink-4); }

/* ---------- 점수 항목 아이콘 타일 ---------- */
.ptile { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; }
.ptile .ico { width: 19px; height: 19px; stroke-width: 2.1; }
.ptile.nutrition { background: var(--p-nutrition-soft); color: var(--p-nutrition); }
.ptile.composition { background: var(--p-composition-soft); color: var(--p-composition); }
.ptile.variety { background: var(--p-variety-soft); color: var(--p-variety); }
.ptile.expectation { background: var(--p-expectation-soft); color: var(--p-expectation); }
.ptile.special { background: var(--p-special-soft); color: var(--p-special); }
.ptile.efficiency { background: var(--p-efficiency-soft); color: var(--p-efficiency); }

/* ---------- 알레르기 번호 ---------- */
.alg {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 6px;
  background: var(--surface-2); color: var(--ink-3); font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ---------- 가로 막대 (값 + 비교 기준선) ----------
   <div class="bar"><i style="width:80%"></i><b style="left:72%"></b></div>
   i = 값, b = 비교 기준(지역 평균 등) */
.bar { display: block; position: relative; height: 10px; border-radius: 999px; background: var(--line-2); }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand-2), var(--brand)); transition: width .8s var(--ease); }
.bar > b { position: absolute; top: -4px; bottom: -4px; width: 2.5px; margin-left: -1px; border-radius: 2px; background: var(--navy); }
.bar.is-navy > i { background: var(--navy-2); }
.bar.is-blue > i { background: linear-gradient(90deg, var(--blue-light), var(--blue)); }
.bar.is-mute > i { background: var(--bar-mute); }