/* ============================================================
   VIEW AS（他ユーザー視点プレビュー）バナー

   main.css から @import されるほか、main.css を読み込まない単独ページ
   （roulette.html）からも直接 <link> される。そのため main.css の
   :root 変数に依存する値には必ずフォールバックを添える。
   ============================================================ */
.view-as-banner {
  position: sticky;
  top: 0;
  z-index: 101;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: #b45309;
  color: #fff;
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.view-as-banner svg { flex-shrink: 0; }
.view-as-banner .view-as-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-as-banner .view-as-text strong { font-weight: 700; }
/* プレビューするロールの切り替え（見え方だけを変える。実権限は変わらない） */
.view-as-banner .view-as-role {
  flex-shrink: 0;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-jp, inherit);
  cursor: pointer;
}
.view-as-banner .view-as-role option {
  color: var(--text, #111827);
  background: var(--bg-card, #ffffff);
}
.view-as-banner .view-as-exit {
  flex-shrink: 0;
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-jp, inherit);
  cursor: pointer;
  transition: background var(--transition, 160ms ease);
}
.view-as-banner .view-as-exit:hover {
  background: rgba(255,255,255,0.25);
}
/* バナー表示中はヘッダーをその下に固定する（共通ヘッダーを持つページのみ） */
body.view-as-active .page-header {
  top: 36px;
}