/* ===================================================================
   YouTube告知のマーキー帯（TOP改修 20・2026-09-09）
   出典: Figma Make src/App.tsx L366-379 と src/index.css の実測値
   ・帯 background #de4592 / padding 7px 0
   ・文言 #fff / 12px / 600 / padding 0 40px（＝文言どうしの間隔は実効80px）
   ・アイコンは 16x11・rx2.5 の白い角丸＋ピンクの三角、右に5px
   ・@keyframes gw-ytbar-marquee は translateX(-50%)。
     ⚠️ 「同じ内容を6回」×2セット という構成が前提。セット数を変えるとループが繋がらない
   モックに無くて足したもの: フルブリード、prefers-reduced-motion、フォーカス表示
   =================================================================== */
.gw-ytbar {
  /* フルブリード。ヒーローと同じやり方（100vw からスクロールバー幅を引く）。
     親が .is-layout-constrained / GenerateBlocks コンテナで width と margin を
     !important で当ててくるので、こちらも !important で上書きする。 */
  --gw-ytbar-bleed: calc(100vw - var(--gwh-sb, 0px));
  width: var(--gw-ytbar-bleed) !important;
  max-width: var(--gw-ytbar-bleed) !important;
  margin-left: calc(50% - var(--gw-ytbar-bleed) / 2) !important;
  margin-right: calc(50% - var(--gw-ytbar-bleed) / 2) !important;

  background: var(--gwt-primary, #de4592);
  overflow: hidden;
  padding: 7px 0;
}

/* 親コンテナの余白を殺す（帯は画面端まで、上下も詰める） */
[data-vertical-spacing]:has(.gw-ytbar),
:has(> .gw-ytbar) {
  padding: 0 !important;
}


.gw-ytbar__track {
  display: flex;
  width: max-content;
  animation: gw-ytbar-marquee var(--gw-ytbar-dur, 90s) linear infinite;
}
.gw-ytbar__track:hover { animation-play-state: paused; }

.gw-ytbar__set {
  display: flex;
  align-items: center;
  gap: 0;
}

/* 項目は1つずつリンクになる（モックはリンクなしの1文言だった） */
.gw-ytbar__item {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  padding: 0 40px;
  text-decoration: none;
}
a.gw-ytbar__item:hover { text-decoration: underline; }
.gw-ytbar__item.is-live { font-weight: 700; }

/* 配信中バッジ。
   ⚠️ 「🔴」は使わない。絵文字の赤(#DD2E44前後)は帯のピンク(#de4592)と色相が近く沈む。
   帯の中で確実に目立つのは「白い面」だけなので、再生アイコンと同じ白面を LIVE に使う。 */
.gw-ytbar__badge {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #fff;
  color: var(--gwt-primary, #de4592);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 読み上げ・キーボード用の本物のリンク。
   流れるトラックは aria-hidden なので、そちらの <a> は tabindex=-1 にしてある。 */
.gw-ytbar__a11y {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.gw-ytbar__a11y a:focus {
  position: fixed;
  top: 8px; left: 8px;
  width: auto; height: auto;
  margin: 0; padding: 6px 12px;
  overflow: visible;
  clip: auto; clip-path: none;
  z-index: 9999;
  background: var(--gwt-primary, #de4592);
  color: #fff;
  outline: 2px solid #fff;
}

.gw-ytbar__icon {
  display: inline;
  vertical-align: middle;
  margin-right: 5px;
  /* ⚠️ 三角は currentColor。親の .gw-ytbar__item が color:#fff なので、
     ここで色を戻さないと「白い角丸の上に白い三角」になって消える。 */
  color: var(--gwt-primary, #de4592);
}

@keyframes gw-ytbar-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 動きを減らす設定のOSでは流さない。1セット目の先頭だけが見える状態で止める */
@media (prefers-reduced-motion: reduce) {
  .gw-ytbar__track { animation: none; }
}