/* ============================================================
   Banner — 画面内の告知
   煽りではなく静かなお知らせ。1画面に1つまで。アイコンは
   署名色 --brand の一点まで。対処したら静かに消える。
   ============================================================ */

.banner {
  width: 100%; max-width: 440px;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); padding: 16px 18px; color: var(--ink);
  display: flex; gap: 14px; align-items: flex-start;
}
.banner .bi { flex: none; color: var(--brand); margin-top: 2px; }
.banner .bt2 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.banner .bd { font-size: 12.5px; color: var(--ash); }
.banner .ba { margin-left: auto; display: flex; gap: 8px; flex: none; }
.banner .ba button { font-size: 12.5px; color: var(--cta); padding: 4px 10px; letter-spacing: .04em; }