/*
 * rb-prefill.css — 실시간 금리 보드 딥링크 활성 배지 스타일
 *
 * 계산기 페이지 상단에 렌더되는 "선택된 상품" 배지.
 * rb-prefill.js가 동적으로 삽입하는 .rb-active-badge 요소용.
 */

.rb-active-badge {
  background: linear-gradient(135deg, #0e7490, #0891b2);
  color: #fff;
  padding: 16px 22px;
  border-radius: 12px;
  margin: 0 0 24px;
  box-shadow: 0 8px 24px rgba(8, 145, 178, 0.18);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  line-height: 1.5;
}

.rb-active-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.rb-active-header strong {
  font-size: 1.06em;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.rb-active-rate {
  font-size: 0.92em;
  opacity: 0.92;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rb-active-back {
  margin-left: auto;
  color: #cffafe;
  text-decoration: underline;
  font-size: 0.86em;
  font-weight: 600;
  white-space: nowrap;
}

.rb-active-back:hover {
  color: #fff;
}

.rb-active-warn {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(251, 146, 60, 0.2);
  border: 1px solid rgba(251, 146, 60, 0.4);
  color: #fff7ed;
  border-radius: 8px;
  font-size: 0.86em;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}

.rb-active-warn-flash {
  animation: rb-active-flash 0.8s ease-out;
}

@keyframes rb-active-flash {
  0%   { background: rgba(251, 146, 60, 0.6); border-color: #f97316; transform: scale(1); }
  30%  { background: rgba(251, 146, 60, 0.55); transform: scale(1.02); }
  100% { background: rgba(251, 146, 60, 0.2); border-color: rgba(251, 146, 60, 0.4); transform: scale(1); }
}

@media (max-width: 600px) {
  .rb-active-badge { padding: 14px 16px; }
  .rb-active-header strong { font-size: 1em; }
  .rb-active-back { margin-left: 0; width: 100%; }
}