/* =====================================================
 * 信オン情報ハブ — 固有CSS v2
 * ===================================================== */

/* --- キーワードバー --- */
.ih-keyword-bar {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--c-bg-alt, #f9fafb);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius-lg, 8px);
}
/* 2026-09-13: 既定は summary の1行だけにして、情報1件目までの距離を縮める。
   閉じている間は上下パディングを詰め、開いたときだけ従来の余白に戻す。 */
.ih-keyword-bar:not([open]) {
  padding: 0 16px;
}
.ih-keyword-bar-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text, #374151);
  cursor: pointer;
}
.ih-keyword-bar[open] > .ih-keyword-bar-summary {
  margin-bottom: 10px;
}
.ih-keyword-bar-summary:focus-visible {
  outline: 2px solid var(--brand-primary, #1d4ed8);
  outline-offset: 2px;
}
.ih-keyword-bar-count {
  padding: 1px 7px;
  border-radius: 9999px;
  background: var(--c-border, #e5e7eb);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-sub, #6b7280);
}
/* キーワード追跡の説明（details/summary） */
.ih-keyword-desc {
  margin-bottom: 10px;
}
.ih-keyword-desc-summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--c-text-muted, #6b7280);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.ih-keyword-desc-summary::-webkit-details-marker { display: none; }
.ih-keyword-desc-summary::after {
  content: '▾';
  font-size: 10px;
  transition: transform var(--transition-fast, 150ms);
}
details[open] .ih-keyword-desc-summary::after {
  transform: rotate(-180deg);
}
.ih-keyword-desc-body {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--c-text-sub, #6b7280);
  line-height: 1.6;
  padding: 8px 12px;
  background: var(--c-bg, #fff);
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--c-border, #e5e7eb);
}
.ih-keyword-input-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.ih-keyword-input {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid var(--c-border-strong, #d1d5db);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 14px);
  background: var(--c-bg, #fff);
  color: var(--c-text, #374151);
  outline: none;
  transition: border-color var(--transition-fast, 150ms);
}
.ih-keyword-input:focus {
  border-color: var(--c-primary, #1d4ed8);
  box-shadow: 0 0 0 2px var(--c-focus-shadow, rgba(29,78,216,0.3));
}
.ih-keyword-add-btn {
  padding: 6px 16px;
  background: var(--c-primary, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast, 150ms);
}
.ih-keyword-add-btn:hover { background: var(--c-primary-hover, #1e40af); }

.ih-keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}
.ih-keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background: var(--c-primary-light, #dbeafe);
  color: var(--c-primary-text, #1e3a8a);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
}
.ih-keyword-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: none; background: none; cursor: pointer;
  color: var(--c-primary-text, #1e3a8a);
  opacity: 0.6; font-size: 14px; line-height: 1; padding: 0;
  position: relative;
}
.ih-keyword-tag-remove:hover { opacity: 1; }
/* タップターゲット拡張: 視覚は 16px のままヒット領域を 44px 確保 */
.ih-keyword-tag-remove::before {
  content: '';
  position: absolute;
  inset: -14px;
}

.ih-keyword-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ih-suggest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ih-suggest-label {
  font-size: 12px;
  color: var(--c-text-muted, #6e7583);
}
.ih-suggest-btn {
  padding: 2px 10px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 100px;
  font-size: 12px;
  background: var(--c-bg, #fff);
  color: var(--c-text-sub, #6b7280);
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
}
.ih-suggest-btn:hover {
  background: var(--c-primary-light, #dbeafe);
  /* WCAG AA: #1e3a8a on #dbeafe = 3.6:1 (未達) → #111827 で 13.8:1 に */
  color: #111827;
  border-color: var(--c-primary-border, #93c5fd);
}

/* フィルタートグル */
.ih-filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-text-sub, #6b7280);
  cursor: pointer;
  white-space: nowrap;
}
.ih-filter-toggle input[type="checkbox"] {
  accent-color: var(--c-primary, #1d4ed8);
}

/* --- トレンドタグバー --- */
.ih-trending-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 14px;
  background: var(--c-bg-alt, #f9fafb);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius-lg, 8px);
}
.ih-trending-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-accent, #f59e0b);
  white-space: nowrap;
}
.ih-trending-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ih-trending-tag {
  padding: 2px 10px;
  border: 1px solid var(--brand-accent-light, #fef3c7);
  background: var(--brand-accent-light, #fef3c7);
  color: #92400e;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
}
.ih-trending-tag:hover {
  background: #fde68a;
  border-color: #fde68a;
  /* WCAG AA: #92400e on #fde68a は 4.3:1 で AA 未達 → #78350f で 5.4:1 に */
  color: #78350f;
}

/* --- タブ --- */
.ih-source-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.ih-source-tab {
  padding: 8px 16px;
  border: none; background: none;
  font-size: var(--font-size-sm, 14px);
  color: var(--c-text-sub, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast, 150ms);
  font-weight: 500;
}
.ih-source-tab:hover { color: var(--c-text, #374151); }
.ih-source-tab-active {
  color: var(--c-primary, #1d4ed8);
  border-bottom-color: var(--c-primary, #1d4ed8);
}

/* --- ビュー切替 --- */
.ih-view-hidden { display: none !important; }

/* --- サブフィルター（期間） --- */
.ih-sub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ih-sub-filter {
  padding: 4px 14px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 100px;
  font-size: 12px;
  background: var(--c-bg, #fff);
  color: var(--c-text-sub, #6b7280);
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
}
.ih-sub-filter:hover {
  background: var(--c-primary-light, #dbeafe);
  color: var(--c-primary-text, #1e3a8a);
  border-color: var(--c-primary-border, #93c5fd);
}
.ih-sub-filter-active {
  background: var(--c-primary, #1d4ed8);
  color: #fff;
  border-color: var(--c-primary, #1d4ed8);
}
.ih-sub-filter-active:hover {
  background: var(--c-primary-hover, #1e40af);
  color: #fff;
  border-color: var(--c-primary-hover, #1e40af);
}
/* 並び替えボタン内の補足テキスト（例: 「最近書いてる人」） */
.ih-sort-hint {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.75;
  margin-left: 4px;
}

/* --- タイムライン（1カラム） --- */
.ih-timeline {
  max-width: 720px;
}
.ih-card-list-timeline {
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  background: var(--c-bg-card, #fff);
  /* スケルトンの min-height と合わせてガタつきを防止 */
  min-height: 300px;
}

/* --- カード --- */
.ih-card {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border, #e5e7eb);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast, 150ms);
}
.ih-card:last-child { border-bottom: none; }
.ih-card:hover { background: var(--c-bg-hover, #eef2ff); }

/* サムネイル付きカード */
.ih-card-with-thumb {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ih-card-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-bg-alt, #f3f4f6);
}
.ih-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ih-card-body {
  flex: 1;
  min-width: 0;
}

.ih-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-dark, #111827);
  line-height: 1.5;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ih-card-summary {
  font-size: 13px;
  color: var(--c-text, #4b5563);
  line-height: 1.6;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ih-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--c-text-muted, #9ca3af);
}
.ih-card-meta-source { color: var(--c-text-sub, #6b7280); }
.ih-card-meta-date { color: var(--c-text-muted, #9ca3af); }
.ih-card-meta-sep { color: var(--c-text-muted, #d1d5db); margin: 0 1px; }
.ih-card-tag {
  padding: 0 5px;
  font-size: 10px;
  border-radius: 100px;
  background: transparent;
  color: var(--c-text-muted, #9ca3af);
  border: 1px solid var(--c-border, #e5e7eb);
  line-height: 1.6;
}
.ih-card-highlight { background: #fefce8; }

/* --- ソース種別バッジ --- */
.ih-source-badge {
  display: inline-block;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 100px;
  line-height: 1.6;
  margin-right: 4px;
  vertical-align: middle;
}
.ih-source-badge-official { background: #fef2f2; color: #991b1b; }
.ih-source-badge-blog { background: #f0fdf4; color: #166534; }
.ih-source-badge-youtube { background: #fef2f2; color: #dc2626; }
.ih-source-badge-x { background: #f8fafc; color: #334155; }

/* --- 相対時刻ドット --- */
.ih-freshness-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
}
.ih-freshness-hot { background: #ef4444; }
.ih-freshness-warm { background: #f59e0b; }
.ih-freshness-cool { background: #9ca3af; }

/* --- NEWバッジ --- */
.ih-badge-new {
  display: inline-block;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--c-primary, #1d4ed8);
  border-radius: 100px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* --- ブログディレクトリ --- */
.ih-blog-directory {
  margin-bottom: 24px;
}
.ih-directory-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-dark, #111827);
  margin: 0 0 4px;
}
.ih-directory-desc {
  font-size: 13px;
  color: var(--c-text-muted, #6e7583);
  margin: 0 0 12px;
}
.ih-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
/* ブログ/サイト一覧：サイトキャプチャ付き 1カラム縦積みリスト */
#blog-directory-grid {
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 820px;
}
.ih-blog-dir-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  background: var(--c-bg-card, #fff);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms), transform var(--transition-fast, 150ms);
}
.ih-blog-dir-card:hover {
  border-color: var(--c-primary-border, #93c5fd);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / .08));
  transform: translateY(-1px);
}
/* サムネイル枠（左側固定・サイトキャプチャは横長なので 16:10） */
.ih-blog-dir-thumb {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  aspect-ratio: 16 / 10;
  background: var(--c-bg-alt, #f3f4f6);
  overflow: hidden;
}
.ih-blog-dir-thumb-img,
.ih-blog-dir-thumb-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ih-blog-dir-thumb-img {
  object-fit: cover;
  object-position: top center;
  display: block;
  background: var(--c-bg-alt, #f3f4f6);
}
/* og:image 無し or 読込失敗 → img を隠して背面プレースホルダを見せる */
.ih-blog-dir-thumb-img-empty { display: none; }
.ih-blog-dir-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  background-color: var(--cat-color, #6b7280);
  background-image: linear-gradient(135deg, rgb(255 255 255 / .14), rgb(0 0 0 / .22));
}
/* サムネイル上のバッジ（カテゴリ・地域） */
.ih-blog-dir-badges {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 1;
  max-width: calc(100% - 12px);
}
.ih-blog-dir-cat,
.ih-blog-dir-region {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .25);
}
.ih-blog-dir-region { background: rgb(17 24 39 / .82); }
/* カード本文 */
.ih-blog-dir-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 12px;
}
.ih-blog-dir-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-dark, #111827);
  margin-bottom: 2px;
}
.ih-blog-dir-desc {
  font-size: 12px;
  color: var(--c-text-sub, #6b7280);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ih-blog-dir-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.ih-blog-dir-date {
  font-size: 11px;
  color: var(--c-text-muted, #9ca3af);
}
/* 地域・カテゴリのフィルタ行（ボタン数が多いので折り返す） */
.ih-blog-filters {
  flex-wrap: wrap;
  row-gap: 6px;
  align-items: center;
}
.ih-blog-filter-label {
  font-size: 11px;
  color: var(--c-text-muted, #9ca3af);
  margin-right: 2px;
}
/* スマホ: サムネイルを縮小して横並びを維持 */
@media (max-width: 600px) {
  .ih-blog-dir-thumb { width: 128px; }
  .ih-blog-dir-thumb-fallback { font-size: 22px; }
}
.ih-click-count {
  font-size: 10px;
  color: var(--c-text-muted, #9ca3af);
  background: var(--c-bg-alt, #f3f4f6);
  padding: 1px 6px;
  border-radius: 100px;
}
.ih-click-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--brand-accent, #f59e0b);
  font-weight: 600;
}

/* --- YouTube動画カード（グリッド） --- */
.ih-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.ih-video-card {
  display: block;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  background: var(--c-bg-card, #fff);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast, 150ms);
}
.ih-video-card:hover {
  border-color: var(--c-primary-border, #93c5fd);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ih-video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.ih-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ih-video-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: #fff;
  background: linear-gradient(135deg, #111827, #374151);
  font-size: 12px;
  text-align: center;
}
.ih-video-thumb-fallback[hidden] { display: none; }
.ih-video-thumb-unavailable .ih-video-play-icon { display: none; }
.ih-video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast, 150ms);
}
.ih-video-card:hover .ih-video-play-icon { opacity: 1; }
.ih-video-info {
  padding: 10px 12px;
}
.ih-video-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-dark, #111827);
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ih-video-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--c-text-muted, #9ca3af);
}

/* --- 動画チャンネルカード --- */
.ih-channel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  background: var(--c-bg-card, #fff);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast, 150ms);
}
.ih-channel-card:hover {
  border-color: var(--c-primary-border, #93c5fd);
  background: var(--c-bg-hover, #eef2ff);
}
.ih-channel-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}
.ih-channel-info { flex: 1; min-width: 0; }
.ih-channel-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-dark, #111827);
}
.ih-channel-desc {
  font-size: 12px;
  color: var(--c-text-sub, #6b7280);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ih-subs-badge {
  display: inline-block;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--c-text-muted, #9ca3af);
  background: var(--c-bg-alt, #f3f4f6);
  border-radius: 100px;
  margin-left: 4px;
  vertical-align: middle;
}

.ih-section-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-dark, #111827);
  margin: 0 0 10px;
}

/* --- Xアカウントビュー --- */
.ih-x-section {
  margin-bottom: 16px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  background: var(--c-bg-card, #fff);
}
.ih-section-label {
  padding: 8px 14px 4px;
  font-size: 11px;
  color: var(--c-text-muted, #6e7583);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ih-x-search-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--c-text, #374151);
  font-size: 13px;
  transition: background var(--transition-fast, 150ms);
}
.ih-x-search-link:hover { background: var(--c-bg-hover, #eef2ff); }
.ih-x-link-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--c-text-sub, #6b7280);
}

/* --- Xアカウントカード --- */
.ih-x-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  padding: 8px 14px 14px;
}
.ih-x-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  background: var(--c-bg-card, #fff);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast, 150ms);
}
.ih-x-card:hover {
  border-color: var(--c-primary-border, #93c5fd);
  background: var(--c-bg-hover, #eef2ff);
}
.ih-x-card-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-bg-alt, #f3f4f6);
}
.ih-x-card-info {
  flex: 1;
  min-width: 0;
}
.ih-x-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-dark, #111827);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ih-x-card-handle {
  font-size: 12px;
  color: var(--c-text-muted, #9ca3af);
  margin-bottom: 2px;
}
.ih-x-card-bio {
  font-size: 12px;
  color: var(--c-text-sub, #6b7280);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.ih-x-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--c-text-muted, #9ca3af);
}
.ih-x-card-cat {
  display: inline-block;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 100px;
  line-height: 1.6;
  margin-left: 4px;
  vertical-align: middle;
}
.ih-x-cat-official { background: #fef2f2; color: #991b1b; }
.ih-x-cat-community { background: #f0fdf4; color: #166534; }
.ih-x-cat-streamer { background: #f5f3ff; color: #5b21b6; }
.ih-x-cat-player { background: #eff6ff; color: #1e40af; }
.ih-x-activity {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
}

/* --- スケルトンUI --- */
/* min-height を実カードリストと揃えることで、スケルトン→実カード切替時の
   レイアウトシフト（CLS）を緩和する。スケルトン5枚分 ≈ 300px が目安。 */
.ih-skeleton-list {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}
.ih-skeleton-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.ih-skeleton-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.ih-skeleton-card::before {
  content: '';
  display: block;
  height: 14px;
  width: 70%;
  background: linear-gradient(90deg, var(--c-bg-alt) 25%, #e8e8e8 50%, var(--c-bg-alt) 75%);
  background-size: 200% 100%;
  animation: ihShimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}
.ih-skeleton-card::after {
  content: '';
  display: block;
  height: 10px;
  width: 40%;
  background: linear-gradient(90deg, var(--c-bg-alt) 25%, #e8e8e8 50%, var(--c-bg-alt) 75%);
  background-size: 200% 100%;
  animation: ihShimmer 1.5s infinite;
  border-radius: 4px;
}
.ih-skeleton-video,
.ih-skeleton-dir {
  height: 160px;
  background: linear-gradient(90deg, var(--c-bg-alt) 25%, #e8e8e8 50%, var(--c-bg-alt) 75%);
  background-size: 200% 100%;
  animation: ihShimmer 1.5s infinite;
  border-radius: var(--radius-md, 6px);
}
.ih-skeleton-dir { height: 80px; }
@keyframes ihShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- 共通 --- */
.ih-loading, .ih-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--c-text-muted, #6e7583);
}
.ih-load-more {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  background: var(--c-bg-alt, #f9fafb);
  color: var(--c-primary, #1d4ed8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms);
}
.ih-load-more:hover { background: var(--c-primary-light, #dbeafe); }

/* --- レスポンシブ --- */
@media (max-width: 767px) {
  .ih-keyword-bar { padding: 10px 12px; }
  .ih-keyword-options { flex-direction: column; align-items: flex-start; }
  .ih-source-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .ih-directory-grid { grid-template-columns: 1fr; }
  .ih-video-grid { grid-template-columns: 1fr; }
  .ih-timeline { max-width: none; }
  .ih-trending-bar { flex-wrap: wrap; }
  .ih-x-card-grid { grid-template-columns: 1fr; }
}

/* --- アクセシビリティ --- */
@media (prefers-reduced-motion: reduce) {
  .ih-card,
  .ih-blog-dir-card,
  .ih-channel-card,
  .ih-video-card,
  .ih-suggest-btn,
  .ih-sub-filter,
  .ih-keyword-input,
  .ih-keyword-add-btn {
    transition: none;
  }
  .ih-skeleton-card::before,
  .ih-skeleton-card::after,
  .ih-skeleton-video,
  .ih-skeleton-dir {
    animation: none;
    background: var(--c-bg-alt, #f3f4f6);
  }
}

/* =====================================================
 * Pack 1: 軽量回遊強化（A: 差分バナー / B: タグ→ツール導線 / D: ページ内検索）
 * ===================================================== */

/* --- A: 新着差分バナー --- */
.ih-diff-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--c-primary-light, #dbeafe);
  border: 1px solid var(--c-primary-border, #93c5fd);
  border-radius: var(--radius-lg, 8px);
  cursor: pointer;
  transition: background var(--transition-fast, 150ms);
}
.ih-diff-banner:hover { background: #c7d9fc; }
.ih-diff-banner[hidden] { display: none; }
.ih-diff-banner-icon {
  color: var(--c-primary, #1d4ed8);
  font-size: 10px;
  flex-shrink: 0;
}
.ih-diff-banner-text {
  flex: 1;
  font-size: 13px;
  color: var(--c-primary-text, #1e3a8a);
  line-height: 1.5;
}
.ih-diff-banner-text strong {
  color: var(--c-primary, #1d4ed8);
  font-weight: 700;
}
.ih-diff-banner-keyword {
  color: var(--brand-accent-hover, #d97706);
  font-weight: 500;
}
.ih-diff-banner-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--c-primary-text, #1e3a8a);
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
.ih-diff-banner-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.5);
}

/* タブ未読バッジ */
.ih-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: 5px;
  background: #ef4444;
  color: #fff;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* --- B: タグ→内部ツール導線 --- */
.ih-tool-jump {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  margin-left: 4px;
  background: var(--c-bg, #fff);
  border: 1px dashed var(--c-primary-border, #93c5fd);
  border-radius: 100px;
  color: var(--c-primary, #1d4ed8);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
  white-space: nowrap;
}
.ih-tool-jump:hover {
  background: var(--c-primary-light, #dbeafe);
  border-style: solid;
  border-color: var(--c-primary, #1d4ed8);
}
.ih-tool-jump:focus {
  outline: 2px solid var(--c-focus-ring, #1d4ed8);
  outline-offset: 1px;
}
.ih-tool-jump-icon {
  width: 11px; height: 11px;
  flex-shrink: 0;
}

/* --- D: ページ内検索 --- */
.ih-search-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.ih-search-input-wrap {
  position: relative;
  flex: 1;
  max-width: 400px;
  min-width: 0;
}
.ih-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--c-text-muted, #9ca3af);
  pointer-events: none;
}
.ih-search-input {
  width: 100%;
  padding: 7px 36px 7px 36px;
  border: 1px solid var(--c-border-strong, #d1d5db);
  border-radius: 100px;
  font-size: var(--font-size-sm, 14px);
  background: var(--c-bg, #fff);
  color: var(--c-text, #374151);
  outline: none;
  transition: border-color var(--transition-fast, 150ms);
}
.ih-search-input:focus {
  border-color: var(--c-primary, #1d4ed8);
  box-shadow: 0 0 0 2px var(--c-focus-shadow, rgba(29,78,216,0.3));
}
.ih-search-input::placeholder {
  color: var(--c-text-muted, #9ca3af);
}
.ih-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--c-text-muted, #6b7280);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 100px;
}
.ih-search-clear:hover {
  background: var(--c-bg-alt, #f3f4f6);
  color: var(--c-text, #374151);
}
.ih-search-clear[hidden] { display: none; }
.ih-search-count {
  font-size: 11px;
  color: var(--c-text-muted, #6b7280);
  white-space: nowrap;
}
.ih-search-count[hidden] { display: none; }

/* --- ランキングビュー --- */
.ih-ranking-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.ih-ranking-note {
  font-size: var(--font-size-sm, 13px);
  color: var(--c-text-muted, #6b7280);
  margin: 0 0 16px;
  padding: 8px 12px;
  background: var(--c-bg-alt, #f9fafb);
  border-left: 3px solid var(--c-primary, #1d4ed8);
  border-radius: var(--radius-md, 6px);
}
.ih-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.ih-ranking-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--c-bg, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast, 150ms), transform var(--transition-fast, 150ms);
}
.ih-ranking-card:hover {
  border-color: var(--c-primary, #1d4ed8);
  transform: translateX(2px);
}
.ih-ranking-rank {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  background: var(--c-bg-alt, #f3f4f6);
  color: var(--c-text-muted, #6b7280);
}
.ih-ranking-rank-1 { background: #fde68a; color: #92400e; }
.ih-ranking-rank-2 { background: #e5e7eb; color: #374151; }
.ih-ranking-rank-3 { background: #fed7aa; color: #9a3412; }
.ih-ranking-body {
  flex: 1;
  min-width: 0;
}
.ih-ranking-title {
  font-size: var(--font-size-sm, 14px);
  font-weight: 600;
  color: var(--c-text, #1f2937);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ih-ranking-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--c-text-muted, #6b7280);
}
.ih-ranking-source { font-weight: 500; }
.ih-ranking-count {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--c-bg-alt, #f3f4f6);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text, #374151);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .ih-ranking-card { padding: 8px 10px; gap: 8px; }
  .ih-ranking-rank { width: 30px; height: 30px; font-size: 14px; }
  .ih-ranking-count { margin-left: 0; }
}

/* --- A3: キーワード上限到達通知 --- */
/* addKeyword() で10個上限到達時に一時表示されるインラインメッセージ */
.ih-keyword-limit-notice {
  margin: 4px 0 0;
  font-size: 12px;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-md, 6px);
  padding: 4px 10px;
  animation: ih-fade-in 150ms ease;
}
@keyframes ih-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- アクセシビリティ: フォーカスインジケータ --- */
/* キーボード操作時のみ可視。マウスクリックには出ない（:focus-visible のため）。 */
.ih-source-tab:focus-visible,
.ih-sub-filter:focus-visible,
.ih-suggest-btn:focus-visible,
.ih-trending-tag:focus-visible,
.ih-card:focus-visible,
.ih-card a:focus-visible,
.ih-keyword-tag-remove:focus-visible,
.ih-keyword-add-btn:focus-visible,
.ih-keyword-input:focus-visible,
.ih-search-input:focus-visible,
.ih-search-clear:focus-visible,
.ih-diff-banner-close:focus-visible {
  outline: 2px solid var(--c-focus-ring, #1d4ed8);
  outline-offset: 2px;
}