/* Neutral informational banner — for contextual explanation, not warnings. */
.info-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  color: var(--foreground-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}

.info-banner .info-banner__icon {
  width: var(--fs-20);
  height: var(--fs-20);
  flex: none;
  color: var(--foreground);
}

.info-banner[hidden] {
  display: none;
}

/* ── Dismissible variant (opt-in) ──────────────────────────────
   2026-07-27 使用者裁示：這類長期提示是雜訊，要能關掉；但「重新登入」時仍該出現。
   狀態因此存在 sessionStorage（隨工作階段結束自動清掉），不是 localStorage。
   純新增 modifier ＋ 一個關閉鈕，既有 .info-banner 消費者完全不受影響。
   關閉鈕本身走 Button atom（.btn.btn--icon.btn--xs），這裡只負責靠右與配色。 */
.info-banner__close {
  margin-left: auto;
  flex: none;
  color: var(--muted-foreground);
}
.info-banner__close:hover {
  color: var(--foreground);
}
/* 關閉鈕自帶內距，右側外距收窄一階，視覺上與左側圖示對稱 */
.info-banner--dismissible {
  padding-right: var(--sp-8);
}

@media (max-width: 640px) {
  .info-banner {
    align-items: flex-start;
    gap: var(--sp-8);
    padding: var(--sp-10) var(--sp-12);
    border-radius: var(--radius-xl);
    font-size: var(--fs-13);
  }

  .info-banner .info-banner__icon {
    width: var(--fs-18);
    height: var(--fs-18);
  }
}