/* ========================================
   ヘッダー直下タブボックス（新着/おすすめ/ランダム）
   自サイト記事専用。アンテナ枠（外部RSS）とは独立したコンポーネント。
   ======================================== */

.home-articles-tabs__tabbar {
  display: flex;
  background: #1e293b; /* slate-800 と統一 */
}

.home-articles-tabs__tab {
  flex: 1 1 0;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 900;
  color: #94a3b8; /* slate-400 */
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.home-articles-tabs__tab:hover {
  color: #e2e8f0;
}

.home-articles-tabs__tab.is-active {
  color: #ffffff;
  border-bottom-color: #f43f5e; /* rose-500 */
  background: rgba(255, 255, 255, 0.05);
}

.home-articles-tabs__panel {
  display: none;
  padding: 12px;
}

.home-articles-tabs__panel.is-active {
  display: block;
}

.home-articles-tabs__empty {
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  padding: 20px 0;
}

/* 縦一列のテキストリンクリスト。アンテナ枠と同じ「文字だけのリンク一覧」の実装方式
   （固定高 + overflow-y:auto）を流用し、記事6行分の高さで固定して、それを超える分は
   ボックス内だけをマウスホイールで縦スクロールする。横方向の動き・ページ送りは無し。
   1行の高さ（padding 8px*2 + line-height 25.6px + border-top 1px ≒ 42.6px）× 6行 ≒ 255px。 */
.home-articles-tabs__list {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 255px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.home-articles-tabs__row {
  border-top: 1px solid #f3f4f6;
}

.home-articles-tabs__row:first-child {
  border-top: none;
}

.home-articles-tabs__link {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #0056d6;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, color 0.15s;
}

.home-articles-tabs__link:hover {
  background: #eff6ff;
  color: #4338ca;
  text-decoration: underline;
}