/* ひな地上波まとめ — 日向坂ブルー / サムネ無しテキストカード */
:root{
  --onair-blue:#4A90E2;
  --onair-blue-deep:#2E5C8A;
  --onair-sky:#7cc7e8;
  --onair-gold:#D4A857;
  --onair-ink:#1f2d3d;
  --onair-muted:#6b7a8d;
  --onair-card:#ffffff;
  --onair-line:#e3eaf2;
  /* ソース別ブランド色 */
  --onair-nhk:#0040e6;          /* NHK BS の鮮やかな青 */
  --onair-radiko:#00a0e9;       /* radiko ロゴのシアン */
  --onair-tver-a:#57aee3;       /* TVer 背景グラデ（明） */
  --onair-tver-b:#2c6fbf;       /* TVer 背景グラデ（深） */
  --onair-lemino:#cc0033;       /* Lemino = ドコモレッド */
}

.hina-onair-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.hina-onair-empty{
  padding:32px;text-align:center;color:var(--onair-muted);
  background:#f5f8fc;border-radius:12px;
}

.hina-onair-card{
  display:flex;flex-direction:column;
  background:var(--onair-card);
  border:1px solid var(--onair-line);
  border-radius:14px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.hina-onair-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(46,92,138,.18);
}

/* 上部の帯（ソース＋カウントダウン）。サムネの代わりにソース色で見分ける */
.hina-onair-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;
  border-left:5px solid var(--onair-blue);
}
.hina-onair-card.is-tver   .hina-onair-top{ border-left-color:var(--onair-tver-b); }
.hina-onair-card.is-radiko .hina-onair-top{ border-left-color:var(--onair-radiko); }

.hina-onair-badge{
  font-size:11px;font-weight:700;color:#fff;
  padding:3px 10px;border-radius:999px;letter-spacing:.02em;
}
.hina-onair-card.is-tver   .hina-onair-badge{ background:linear-gradient(135deg,var(--onair-tver-a) 0%,var(--onair-tver-b) 100%); }
.hina-onair-card.is-radiko .hina-onair-badge{ background:var(--onair-radiko); }

.hina-onair-count{
  font-size:11px;font-weight:700;color:#fff;
  background:var(--onair-muted);padding:3px 9px;border-radius:8px;white-space:nowrap;
}
.hina-onair-count.is-soon{ background:var(--onair-gold);color:#3a2c08; }
.hina-onair-count.is-upcoming{ background:var(--onair-blue-deep); }
.hina-onair-airtime{
  margin-top:6px;font-size:12px;font-weight:700;color:var(--onair-blue-deep);
}

.hina-onair-body{ padding:2px 14px 14px; }
.hina-onair-title{
  font-size:14px;font-weight:700;line-height:1.45;color:var(--onair-ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hina-onair-program{
  margin-top:6px;font-size:12px;color:var(--onair-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hina-onair-members{ margin-top:10px;display:flex;flex-wrap:wrap;gap:4px; }
.hina-onair-chip{
  font-size:11px;color:var(--onair-blue-deep);
  background:#eaf3fb;border:1px solid #d4e6f6;
  padding:2px 8px;border-radius:999px;
}

/* Lemino ソース色（ティール系で差別化） */
.hina-onair-card.is-lemino .hina-onair-top{ border-left-color:var(--onair-lemino); }
.hina-onair-card.is-lemino .hina-onair-badge{ background:linear-gradient(135deg,#FBA61C 0%,#FF6A3D 45%,#F5158A 100%); }

/* 視聴区分バッジ（Lemino） */
.hina-onair-plan{
  display:inline-block;margin-top:8px;
  font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:999px;
}
.hina-onair-plan.plan-free{ background:#16A37B;color:#fff; }
.hina-onair-plan.plan-partfree{ background:#0EA5A0;color:#fff; }
.hina-onair-plan.plan-premium{ background:#7C3AED;color:#fff; }
.hina-onair-plan.plan-pack{ background:#D4537B;color:#fff; }
.hina-onair-plan.plan-tvod{ background:#E08A1E;color:#fff; }

/* 情報更新日時（控えめ表示） */
.hina-onair-updated{
  font-size:11px;color:#9aa0a6;text-align:right;
  margin:0 2px 8px;letter-spacing:.02em;
}

/* ===== 横長ヘッドライン（ティッカー）1件ずつ表示 view="ticker" ===== */
.hina-onair-ticker{
  position:relative;overflow:hidden;
  height:44px;
  border:1px solid #e6e8eb;border-radius:10px;background:#fff;
}
/* 各見出しを重ねて配置し、JSで1件ずつ 右外→流入→静止→流出→無 を回す */
.hina-onair-tk-item{
  position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;
  display:flex;align-items:center;gap:8px;
  padding:0 18px;text-decoration:none;color:#1a1a1a;font-size:13px;white-space:nowrap;
  transform:translateX(100%);will-change:transform;
}
.hina-onair-tk-item:first-child{ transform:translateX(0); } /* JS無効時のフォールバックで先頭を表示 */
.hina-onair-tk-item:hover .hina-onair-tk-title{ text-decoration:underline; }
.hina-onair-tk-src{
  flex:0 0 auto;font-size:10px;font-weight:700;color:#fff;
  padding:2px 8px;border-radius:999px;letter-spacing:.02em;
}
.hina-onair-tk-item.is-tver   .hina-onair-tk-src{ background:linear-gradient(135deg,var(--onair-tver-a) 0%,var(--onair-tver-b) 100%); }
.hina-onair-tk-item.is-radiko .hina-onair-tk-src{ background:var(--onair-radiko); }
.hina-onair-tk-item.is-lemino .hina-onair-tk-src{ background:linear-gradient(135deg,#FBA61C 0%,#FF6A3D 45%,#F5158A 100%); }
.hina-onair-tk-title{ flex:1 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis; }
.hina-onair-tk-mem{ flex:0 0 auto;font-size:11px;color:#8a9099; }

/* ティッカー内のプランバッジ（無料/一部無料/プレミアム/パック/個別課金） */
.hina-onair-tk-item .hina-onair-plan{
  margin-top:0;flex:0 0 auto;font-size:10px;padding:1px 7px;
}

/* ティッカー: ステッカー類をヘッダー行にまとめる */
.hina-onair-tk-head{ display:inline-flex;align-items:center;gap:8px;flex:0 0 auto; }

/* モバイル: ステッカー行とタイトル行を段分け（タイトルが隠れないように） */
@media (max-width:600px){
  .hina-onair-ticker{ height:58px; }
  .hina-onair-tk-item{
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:3px;padding:8px 14px;
  }
  .hina-onair-tk-title{ width:100%;flex:0 0 auto; }
}

/* ティッカー: タップ時の黒い残り（タップハイライト/フォーカス枠/選択）対策 */
.hina-onair-ticker,
.hina-onair-tk-item{ -webkit-tap-highlight-color:transparent; }
.hina-onair-tk-item,
.hina-onair-tk-item:hover,
.hina-onair-tk-item:focus,
.hina-onair-tk-item:active{ background:transparent;outline:none; }
.hina-onair-tk-item{ -webkit-user-select:none;user-select:none; }

/* YouTube ソース色（YouTube レッド） */
.hina-onair-card.is-youtube .hina-onair-top{ border-left-color:#FF0000; }
.hina-onair-card.is-youtube .hina-onair-badge{ background:#FF0000; }
.hina-onair-tk-item.is-youtube .hina-onair-tk-src{ background:#FF0000; }

/* ===== 検索ツールバー / 気になる絞り込み ===== */
.hina-onair-tools{ display:flex;gap:8px;margin:0 2px 12px;flex-wrap:wrap;align-items:center; }
.hina-onair-search{
  flex:1 1 220px;min-width:160px;padding:8px 12px;
  border:1px solid #d7dadf;border-radius:8px;font-size:14px;background:#fff;color:#1a1a1a;
}
.hina-onair-favfilter{
  flex:0 0 auto;padding:8px 14px;border:1px solid #d7dadf;border-radius:8px;
  background:#fff;color:#444;cursor:pointer;font-size:13px;
}
.hina-onair-favfilter.is-active{ background:#F5A623;border-color:#F5A623;color:#fff; }

/* ===== 気になるボタン（各カード右上） ===== */
.hina-onair-card{ position:relative; }
.hina-onair-card .hina-onair-top{ padding-right:30px; }
.hina-onair-fav{
  position:absolute;top:6px;right:8px;z-index:2;
  width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(0,0,0,.15);
  cursor:pointer;font-size:0;color:#c9ccd1;user-select:none;
}
.hina-onair-fav::before{ content:'\2606';font-size:17px; } /* ☆ */
.hina-onair-card.is-fav .hina-onair-fav::before{ content:'\2605';color:#F5A623; } /* ★ */

/* チャンネル名ステッカー（YouTube） */
.hina-onair-chbadge{
  display:inline-block;margin-left:6px;
  font-size:11px;font-weight:600;color:#444;
  background:#eef0f2;border-radius:999px;padding:2px 9px;
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;
}
.hina-onair-tk-head .hina-onair-chbadge{ margin-left:0;font-size:10px;padding:1px 8px;flex:0 0 auto;max-width:140px; }

/* NHK ソース色（藍系） */
.hina-onair-card.is-nhk .hina-onair-top{ border-left-color:var(--onair-nhk); }
.hina-onair-card.is-nhk .hina-onair-badge{ background:var(--onair-nhk); }
.hina-onair-tk-item.is-nhk .hina-onair-tk-src{ background:var(--onair-nhk); }
