/* 전환 C3-5 읽기 전용 배너 (common, 브랜드 토큰 없음).
 * Formula 공용 토큰(--card·--text·--text-sub·--warning·--border)만 쓴다.
 * 배너가 없을 때(평시) 레이아웃은 바이트 단위로 같다. */
body.fx-cutover-readonly #main-nav {
  flex-wrap: wrap;
}
#fx-cutover-readonly-banner {
  flex: 0 0 100%;
  order: -1;
  box-sizing: border-box;
  padding: 8px 16px;
  background: var(--card);
  color: var(--text);
  border-bottom: 2px solid var(--warning);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
#fx-cutover-readonly-banner::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  margin-right: 8px;
  vertical-align: 1px;
}
@media (prefers-reduced-motion: reduce) {
  #fx-cutover-readonly-banner::before {
    animation: none;
  }
}