/* 서울 청약 열람소 — 02장(지도) 열람표에 2·3위 단지를 더하는 보강 스타일.
 * assets/style.css는 건드리지 않고, 여기서만 새 클래스를 정의한다.
 * 기존 :root 토큰만 쓰고 재정의하지 않는다. */

/* ── 순위 배지: "대장" / "2위" / "3위" ─────────────────── */
.rankbadge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 999px;
  margin-bottom: .5rem;
}

.rankbadge--top {
  background: var(--seal);
  color: var(--paper);
}

.rankbadge--more {
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  flex: none;
  align-self: flex-start;
}

/* ── 2·3위 요약 목록 ───────────────────────────────────── */
.morelist {
  margin-top: .5rem;
  margin-bottom: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
}

.morelist__cap {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: .65rem;
}

.moreitem {
  display: flex;
  gap: .6rem;
  padding: .6rem 0;
  border-top: 1px solid var(--rule-soft);
}

.moreitem:first-of-type { border-top: none; padding-top: 0; }

.moreitem__body { min-width: 0; flex: 1; }

.moreitem__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: .15rem;
}

.moreitem__apt {
  font-size: .88rem;
  line-height: 1.35;
}

.moreitem__dong {
  font-family: var(--mono);
  font-size: .64rem;
  color: var(--ink-soft);
}

.moreitem__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-soft);
  margin-bottom: .3rem;
}

.moreitem__price {
  color: var(--seal);
  font-weight: 600;
}

.moreitem__why {
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ── 모바일: 좁은 화면에서 가로 넘침 방지 ──────────────── */
@media (max-width: 480px) {
  .moreitem { flex-direction: column; gap: .25rem; }
  .moreitem__facts { gap: .4rem; }
}