/* 상가 실거래 /trade/ — templates/pages/trade.html (10-08) */
.mbars { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-bottom: 20px; margin: 8px 0 6px; }
.mb { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.mb i { display: block; width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--sky), var(--blue)); min-height: 2px; }
.mb span { position: absolute; bottom: -18px; font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
/* 글자는 1월 자리의 연도만 (gen_trade label · 10-10 — 81개월을 달마다 찍으니 겹쳤다) · 연도가 시작하는 막대 왼쪽에 맞춘다 */
.mb span { left: 0; }
/* 마우스 올림 — 막대 위에 「26년 3월 · 1,234건」 (10-08) */
.mb:hover i { filter: brightness(1.15); }
.mb:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% - 4px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 6px 10px; border-radius: 8px; background: #121a2b; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.mb:first-child:hover::after, .mb:nth-child(2):hover::after { left: 0; transform: none; }
.mb:last-child:hover::after, .mb:nth-last-child(2):hover::after { left: auto; right: 0; transform: none; }

/* 비싼 · 싼 동네 (#rank · 10-08) */
.trank { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.tr-h { font-size: 14px; margin: 0 0 6px; }
.tr-h.hi { color: #c2410c; } .tr-h.lo { color: var(--blue); }
@media (max-width: 720px) { .trank { grid-template-columns: 1fr; } }