/* ==========================================
   section-activity.css
   エージェントB: ②最近の活動
   ========================================== */

/* セクション全体 */
.top-activity {
  padding: 0;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  display: block;
  overflow: visible;
  position: relative;
}

/* タイトル */
/* plan 1791984916678 §5.2: 見出しを行内・両端配置に（C位置）。
   front-page-inline.css（enqueue 102で後勝ち）が同セレクタで display:block を出すため
   flex は !important で保全する（白グラデ background-image / padding .25em .8em / border-radius は触れない）。 */
.top-activity-title,
.top-page .top-content-right .top-activity-title,
.top-page .top-activity .top-activity-title {
  font-size: 1.4em;
  color: var(--color-main);
  border-bottom: 2px solid var(--color-sky);
  padding: 0.5em 0.8em 0.3em;
  margin-bottom: 1rem;
  text-align: left !important;
  width: 100%;
  display: flex !important;
  align-items: center;
  gap: 0.5em;
}
.top-activity-title__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* 活動リスト — 正: activity高、下端同期のためmargin除去(左gap 0.8emと同期) */
/* plan 1789870845506: 最新10件・可視4件・リスト内スクロール（カード寸法・gap・外枠不変）
   実測 (Playwright・fonts.ready後): 1280=289.36px/16.08em・768=282.92px/15.72em・390=252.45px/15.78em（自然4件高）。
   単一値16.1emは全幅で4件完全収納＋5件目非表示（1280 +0.4px / 768 +6.9px / 390 +5.1pxのgap余白のみ・カード覗きなし）。
   flex-shrink:0はスクロール成立に必須（既定1ではmax-height時にカードが圧縮され文字が潰れる。寸法変更ではなく保全）。 */
.top-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin-bottom: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 16.1em;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 86, 142, 0.45) transparent;
}
.top-activity-list > * {
  flex-shrink: 0;
}
.top-activity-list::-webkit-scrollbar {
  width: 7px;
}
.top-activity-list::-webkit-scrollbar-track {
  background: transparent;
}
.top-activity-list::-webkit-scrollbar-thumb {
  background: rgba(95, 86, 142, 0.35);
  border-radius: 4px;
}
.top-activity-list:focus-visible {
  outline: 2px solid var(--color-fuji-deep, #5F568E);
  outline-offset: 2px;
}
/* 下端フェード: スクロール可能であることの明示（カード幅不変・クリック阻害なし・JSなし）
   .top-activity の padding (1.5em 1.25em 1.75em) 内側のリスト下端に重ねる。
   left:0/bottom:0 ではpadding領域に落ちてカードに掛からず不可視になるため、左右1.25em・下1.75emでインセット。
   481-768px帯はリスト左右margin 18px分さらに内側（下のメディアクエリで補正）。 */
.top-activity::after {
  content: "";
  position: absolute;
  left: 1.25em;
  right: 1.25em;
  bottom: 1.75em;
  height: 28px;
  background: linear-gradient(to bottom, rgba(243, 250, 253, 0), var(--color-bg-light, #F3FAFD));
  pointer-events: none;
  border-radius: 0 0 8px 8px;
}
/* moved to css/responsive-768.css:APPEND [768] (plan 1790697927646 V400) - SP isolation, PC layer keeps no SP media */
/* 上端フェード: 下端::afterの対称。下にまだある時だけ下端が透け、上にまだある時だけ上端が透ける。
   先頭では上端なし・最下端では下端なし・中間では両端あり、の3状態を視覚化する（CSSのみ・JSなし）。
   リスト先頭の sticky 要素として配置するため、タイトル高・padding・481-768px帯marginの影響を受けず
   自動でリスト框に一致する（コンテナ::after方式のようなem補正が不要）。
   flexアイテム化によるレイアウト加算は margin-bottom で相殺（高さ28px＋gap 0.8em分）。
   対応環境ではスクロール連動で先頭のみ透明、非対応環境では常時非表示にフォールバック。 */
.top-activity-list::before {
  content: "";
  position: sticky;
  top: 0;
  height: 28px;
  margin-bottom: calc(-28px - 0.8em);
  flex-shrink: 0;
  /* 必須: .top-activity-item が position:relative のため、後続カードが上に描画して
     ::before を隠してしまう。z-index でカードより前面に出す（クリックは素通り）。 */
  z-index: 1;
  background: linear-gradient(to bottom, var(--color-bg-light, #F3FAFD), rgba(243, 250, 253, 0));
  pointer-events: none;
  border-radius: 8px 8px 0 0;
  opacity: 0;
}
@supports (animation-timeline: scroll(nearest)) {
  .top-activity-list::before {
    animation: top-activity-fade-top-hint linear both;
    animation-timeline: scroll(nearest);
  }
}
@keyframes top-activity-fade-top-hint {
  0% { opacity: 0; }
  15%, 100% { opacity: 1; }
}
/* 一番下到達でフェードを消す（CSSのみ・JSなし）。
   10件目まで到達したのに最下カードが透け続ける違和感の解消。下にまだある間だけ暗示する。
   ::afterはスクロール容器の子ではないため匿名 scroll(nearest) ではページスクロールに束縛されてしまう。
   名前付きタイムライン＋timeline-scopeでリストのスクロールに束縛する。非対応環境は常時表示にフォールバック。 */
.top-activity {
  timeline-scope: --top-activity-scroll;
}
.top-activity-list {
  scroll-timeline-name: --top-activity-scroll;
  scroll-timeline-axis: block;
}
@supports (animation-timeline: --top-activity-scroll) {
  .top-activity::after {
    animation: top-activity-fade-hint linear both;
    animation-timeline: --top-activity-scroll;
  }
}
@keyframes top-activity-fade-hint {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}
/* plan 1789894077173: JSスクロール連動に置換（全幅共通・iPad/WebKit対応）。
   実測 (Playwright 834): Chromiumは3状態正常。WebKit 26.5は supports(true,true,true) でも
   下端名前付きtimeline不成立で ::after opacity常時0（上端scroll(nearest)は成立）。
   実機iPad症状（下常時表示・上常時非表示）は旧WebKitの両不適用フォールバックと一致。同根のためJS化で両対応。
   実機iPad症状（下常時表示・上常時非表示）は旧WebKitの両不適用フォールバックと一致。同根のためJS化で両対応。
   CSS Scroll-drivenは animation:none で無効化（削除せず巻戻し可能に）。timeline-scope/scroll-timeline-* は
   animationなしでは描画に影響しないため残置。寸法・色・勾配・高さ28px・pointer-events・z-index・radius不変。
   既定（no-js/初期）= is-top相当（上0・下1）。JSが .is-top/.is-mid/.is-bottom/.is-noscroll を付与する。 */
.top-activity-list::before,
.top-activity::after {
  animation: none !important;
}
/* 先頭：上消・下表（既定と同値・明示化） */
.top-activity.is-top .top-activity-list::before {
  opacity: 0;
}
.top-activity.is-top::after {
  opacity: 1;
}
/* 中間：上下表 */
.top-activity.is-mid .top-activity-list::before {
  opacity: 1;
}
.top-activity.is-mid::after {
  opacity: 1;
}
/* 最下端：上表・下消 */
.top-activity.is-bottom .top-activity-list::before {
  opacity: 1;
}
.top-activity.is-bottom::after {
  opacity: 0;
}
/* 非スクロール可能時（件数≦4）：両方消 */
.top-activity.is-noscroll .top-activity-list::before,
.top-activity.is-noscroll::after {
  opacity: 0;
}
@media print {
  .top-activity-list {
    overflow: visible;
    max-height: none;
  }
  .top-activity::after,
  .top-activity-list::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .top-activity-list::before,
  .top-activity::after {
    transition: none;
  }
}

/* 各活動アイテム */
.top-activity-item {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.8em 1em;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  /* plan 1788422502785: 通常時のごく薄い影を18枚に統一（hover 0 4px 12pxより明確に弱く） */
  box-shadow: 0 1px 3px rgba(31,32,65,0.06);
  min-width: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* plan 1788441452706: 白カードhover統一トークンA（影＋浮きのみ・枠維持） */
@media (hover: hover) {
  .top-activity-item:hover {
    border-color: var(--color-border, #DCE6EE);
    box-shadow: 0 4px 16px rgba(31, 32, 65, 0.12);
    transform: translateY(-2px);
  }
  .top-activity-item:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(31, 32, 65, 0.10);
  }
}

.top-activity-item:focus-visible {
  outline: 2px solid var(--color-fuji-deep, #5F568E);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .top-activity-item {
    transition: none;
  }
  .top-activity-item:hover,
  .top-activity-item:active {
    transform: none;
    box-shadow: 0 1px 3px rgba(31, 32, 65, 0.06);
  }
}

@media print {
  .top-activity-item:hover,
  .top-activity-item:active {
    transform: none;
    box-shadow: none;
  }
}

/* ソースアイコン */
.top-activity-source {
  font-size: 0.85em;
  font-weight: bold;
  color: var(--color-fuji-deep);
  white-space: nowrap;
}

/* 日付 */
.top-activity-date {
  font-size: 0.8em;
  color: #888;
  white-space: nowrap;
  min-width: 2.8em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* テキスト */
.top-activity-text {
  font-size: 0.95em;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* plan 1792290633958 §1-1: 見出し右端の「＋」→ 表示トグル（リスト ⇄ ギャラリーの2択）
   形状は正本モック（work/activity-rich-mock/activity-rich-mock.html .vseg）と同値。
   枠: border-radius 9px（内側3pxパディング）＋28×28pxのボタン2つ（radius 6px）、下地は＋ボタンと同系の淡い空色。 */
.vseg {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(79, 126, 153, 0.12);
}
.vseg__btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-sky-deep, #4A6F88);
  font-size: 14px;
  line-height: 1;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.vseg__btn svg { width: 17px; height: 17px; display: block; stroke-width: 2.4; }
.vseg__btn:focus-visible {
  outline: 2px solid var(--color-sky-deep, #4A6F88);
  outline-offset: 2px;
}
.vseg__btn[aria-pressed="true"] {
  background: var(--color-sky-mid, #4F7E99);
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(79, 126, 153, 0.35);
}
@media (hover: hover) {
  .vseg__btn:not([aria-pressed="true"]):hover {
    background: rgba(79, 126, 153, 0.20);
    color: var(--color-sky-deep, #4A6F88);
    transform: translateY(-1px);
  }
}
/* モーダルヘッダー内のトグル＝右端寄せ・下地をわずかに薄く */
.top-activity-modal__head .vseg { margin-left: auto; }
.vseg--modal { background: rgba(79, 126, 153, 0.10); }
/* 見出し右端（青いバーの終端＝カード右端）にトグルを面一配置。
   見出しの右padding 0.8em 分だけ外側へ寄せる（PC/SP共通・モーダル内は対象外） */
.top-activity-title > .vseg { margin-right: -0.8em; }

/* ツールチップ（hover / フォーカス時のみ・350ms遅延で誤表示防止）
   吹き出しはボタンの下方向に展開（右端寄せ・正本モック [data-tip] と同値・12px未満にしない）。 */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  right: -2px;
  z-index: 200;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  background: #39414E;
  color: #ffffff;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(31, 32, 65, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.35s;
}
[data-tip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 5px);
  right: 10px;
  z-index: 201;
  border: 5px solid transparent;
  border-bottom-color: #39414E;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.35s;
}
@media (hover: hover) {
  [data-tip]:hover::after,
  [data-tip]:hover::before { opacity: 1; }
  [data-tip]:hover { z-index: 210; }
}
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before { opacity: 1; transition: opacity 0.15s ease; }

@media (prefers-reduced-motion: reduce) {
  .vseg__btn { transition: none; }
  .vseg__btn:not([aria-pressed="true"]):hover {
    transform: none;
    background: rgba(79, 126, 153, 0.12);
  }
  [data-tip]::after,
  [data-tip]::before { transition: none; }
}

/* Font Awesome brand icon weight fix (YouTube) */
.top-activity-source .fab {
  font-weight: 400;
}

/* ソース別色分け — 外部リンク識別 (原色回避・サイトのくすみパステルに調和)
   blog はデフォルト var(--color-fuji-deep) 維持、youtube/note/speakerdeck/behance のみ上書き。
   将来 :root 変数 --color-activity-youtube / --color-activity-note / --color-activity-speakerdeck / --color-activity-behance へ昇格可能。 */
.top-activity-item[data-source="youtube"] .top-activity-source,
.top-activity-item[data-source="youtube"] .top-activity-source i {
  color: #B14E4B; /* muted brick red: hsl(2 38% 49%) */
}
.top-activity-item[data-source="note"] .top-activity-source,
.top-activity-item[data-source="note"] .top-activity-source i {
  color: #5F6570; /* muted slate gray: hsl(218 7% 41%) */
}
.top-activity-item[data-source="speakerdeck"] .top-activity-source,
.top-activity-item[data-source="speakerdeck"] .top-activity-source i {
  color: #2E7D77; /* muted teal for 資料 */
}
.top-activity-item[data-source="behance"] .top-activity-source,
.top-activity-item[data-source="behance"] .top-activity-source i {
  color: #465E8E; /* muted Behance blue for 作品 */
}

/* affordance (plan 1788165101395): 行末の矢印は右端中央を自然末端に */
.top-activity-item .top-card-aff--iconOnly{
  margin-left:auto;
  flex-shrink:0;
}

/* plan 1788273929470 課題2 PC: 活動カードをカード同型のシェブロン帯に */
.top-activity-item{
  position: relative;
  overflow: hidden;
  padding-right: 33px;
}
.top-activity-item .top-card-aff--iconOnly{
  position: absolute;
  top: 3px; right: 3px; bottom: 3px;
  width: 30px; min-width: 30px; max-width: 30px;
  /* plan 1788423003233: 完全tint一致・濃くしない（var(--color-bg-light,#F3FAFD)と同値 / 8pxフェード維持 / 3px inset白縁） */
  background: linear-gradient(to right, rgba(243,250,253,0) 0, var(--color-bg-light, #F3FAFD) 8px);
  border-left: none;
  border-radius: 0 5px 5px 0;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.top-activity-item .top-activity-text{
  padding-right: 0.6em;
}

/* ==========================================
   plan 1791984916678: 全件モーダル（PC＝中央ダイアログ・≥601px）
   正本モック: work/activity-more-mock/final/activity-plus.html .modal__* と同値。
   スマホ（≤600px＝ボトムシート・スワイプ）は responsive-768.css 側（レスポンシブ隔離 §8）。
   色は実環境トークンのみ（§2 実測値・#F7F8FA 等の近似色禁止）。
   ========================================== */

/* 開いている間の背面スクロールロック（js/top-activity-more.js の documentElement クラス） */
html.top-activity-modal-open,
html.top-activity-modal-open body {
  overflow: hidden;
}

/* 初期＝非表示（hidden 属性＋CSS・SSRで閉じている。ページ表示時に20件が本文へ出ない） */
.top-activity-modal[hidden],
.top-activity-modal.is-closed {
  display: none;
}
.top-activity-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.top-activity-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 52, 64, 0.45);
  border: 0;
  padding: 0;
}
.top-activity-modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* plan 1792290633958 §1-2: ギャラリーモーダル＝カード2カラムのため 560→800px（正本モック data-pattern=rb と同値）。
     狭い画面では calc(100% - 2em) に縮む */
  width: min(800px, calc(100% - 2em));
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(31, 32, 65, 0.28);
  outline: none;
}
/* grabber は スマホのボトムシート専用（PCの中央ダイアログでは出さない・V13） */
.top-activity-modal__grabber {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 4px;
  margin: 0.55em auto 0.1em;
  border-radius: 2px;
  background: var(--color-border, #DCE6EE);
}
.top-activity-modal__head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex: 0 0 auto;
  padding: 0.85em 1em 0.8em;
  border-bottom: 1px solid var(--color-border, #DCE6EE);
  background: #ffffff;
}
.top-activity-modal__title {
  font-size: 1.05em;
  font-weight: bold;
  color: var(--color-main, #5F568E);
}
.top-activity-modal__count {
  font-size: 0.75em;
  font-weight: bold;
  color: var(--color-sky-deep, #4A6F88);
  background: rgba(79, 126, 153, 0.12);
  border-radius: 4px;
  padding: 0.3em 0.6em;
  white-space: nowrap;
}
/* 閉じる（✕）は plan 1792290633958 で廃止（トグルのリスト側・背景クリック・Esc・SPスワイプと役割重複） */
.top-activity-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 2026-10-18 追補2: ユーザー指摘「上フェードがずれる／下フェードがない」の是正。
     sticky の張り付き・クランプ範囲はスクロールコンテナの content box になるため、
     padding 付きだと上=+padding-top（16.2px）・下=-padding-bottom（21.6px）にずれ、
     下フェードはパディング帯に落ちてカードに掛からず不可視になる。
     → padding を 0 にし、余白はリスト margin に移す（背面tint・スクロールバーは追補1のまま）。
     ヘッド（見出し）部分は白のまま変更しない。 */
  padding: 0;
  background: var(--color-bg-light, #F3FAFD);
  /* スクロールバーも非モーダルの .top-activity-list と同表現（細身・藤系） */
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 86, 142, 0.45) transparent;
}
.top-activity-modal__body::-webkit-scrollbar { width: 7px; }
.top-activity-modal__body::-webkit-scrollbar-track { background: transparent; }
.top-activity-modal__body::-webkit-scrollbar-thumb { background: rgba(95, 86, 142, 0.35); border-radius: 4px; }
/* ==========================================
   plan 1792290633958: ギャラリーモーダル（カードグリッド・ビュー）
   正本モック: work/activity-rich-mock/activity-rich-mock.html（RB v3＋表示トグル）同値。
   色はすべて実環境トークンのみ。基準フォントは実サイトと同じ（PC 18px / SP 16px）を前提に
   em指定（0.8em / 0.95em）のため12px未満にならない（PC 14.4px / SP 12.8px・SPタイトル 15.2px）。
   ========================================== */

/* モーダル内カードグリッド: スクロールは __body が担う。2カラム・gap 14px・外周 padding 16px。 */
.top-activity-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 16px;
}

/* カード: 白・枠1px・角丸8px・薄い影・内側余白は上下左右15px
   （額縁の外側余白＝額縁の総厚（帯 max(5px,1.643cqw) 347px幅時 約5.7px＋外周1px）と同値になる調整値） */
.top-activity-card {
  background: #ffffff;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(31, 32, 65, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 15px;
  position: relative;
  z-index: 0;
}
@media (hover: hover) {
  .top-activity-card:hover {
    box-shadow: 0 4px 16px rgba(31, 32, 65, 0.12);
    transform: translateY(-2px);
  }
}
.top-activity-card:focus-within {
  outline: 2px solid var(--color-fuji-deep, #5F568E);
  outline-offset: 2px;
}

/* メディア＋すりガラス額縁（淡い空色）: 画像直結の空色1pxライン → 半透明空色帯 → 外周1px枠。
   帯幅はメディア幅に比例（1.643cqw・最低5px）。PC換算で約347×195（額縁込み）。
   page-blog.css .blog-card-thumb と同架構（配色のみ酸色基調に変更）。 */
.top-activity-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  border: 1px solid rgba(142, 209, 224, 0.55);
  background: var(--color-bg-light, #F3FAFD);
  box-shadow: 0 1px 3px rgba(46, 52, 64, 0.06);
  container-type: inline-size;
  --frame-band: max(5px, 1.643cqw);
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: visible;
  box-sizing: border-box;
}
.top-activity-card__media::before { /* すりガラス帯（外付け・淡い空色） */
  content: "";
  position: absolute;
  inset: calc(-1 * (var(--frame-band) + 1px));
  border: var(--frame-band) solid rgba(142, 209, 224, 0.22);
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}
.top-activity-card__media::after { /* 外周枠 1px（最外縁） */
  content: "";
  position: absolute;
  inset: calc(-1 * (var(--frame-band) + 2px));
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
}
.top-activity-card__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
@media (hover: hover) {
  .top-activity-card:hover .top-activity-card__media {
    box-shadow: 0 2px 8px rgba(79, 126, 153, 0.12);
  }
}
.top-activity-card__media:focus-visible {
  outline: 2px solid var(--color-sky-deep, #4A6F88);
  outline-offset: 3px;
}

/* 再生／資料バッジ（ファサード中央・その場再生は JS で iframe に差し替え） */
.top-activity-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 52, 64, 0.55);
  color: #ffffff;
  transition: background-color 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  z-index: 3;
}
.top-activity-card__play i { font-size: 18px; line-height: 1; }
.top-activity-card__play .fab { font-weight: 400; }
@media (hover: hover) {
  .top-activity-card__media:hover .top-activity-card__play {
    background: var(--color-sky-mid, #4F7E99);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* 本文領域（メディアの下）: メタ行＝「日付 → カテゴリタグ」の順 */
.top-activity-card__body {
  padding: 0.7em 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  flex: 1;
}
.top-activity-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
}
.top-activity-card__meta time {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--color-sky-deep, #4A6F88);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* カテゴリタグ: 角丸4px・枠なし・sky-tint下地＋sky-deep文字・Font Awesome 5 の実カテゴリアイコン */
.top-activity-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1;
  padding: 0.28em 0.6em;
  border-radius: 4px;
  background: var(--color-sky-tint, #F3FAFD);
  border: 1px solid transparent;
  color: var(--color-sky-deep, #4A6F88);
  white-space: nowrap;
}
.top-activity-card__tag i { font-size: 1em; line-height: 1; }
.top-activity-card__tag .fab { font-weight: 400; }
/* ソース別色分け（一覧 .top-activity-source と共通トーン・独自色禁止） */
.top-activity-card__tag[data-source-label="youtube"] > i { color: #B14E4B; }
.top-activity-card__tag[data-source-label="note"] > i { color: #5F6570; }
.top-activity-card__tag[data-source-label="speakerdeck"] > i { color: #2E7D77; }
.top-activity-card__tag[data-source-label="behance"] > i { color: #465E8E; }

/* タイトル: 最大2行クランプ＋2行分の枠（min-height 3em）に上下センター。
   1行タイトルでもカード高さが揃い、余白が偏らない（正本モック .rb-titlebox 同値）。 */
.top-activity-card__titlebox {
  display: flex;
  align-items: center;
  font-size: 0.95em;
  line-height: 1.5;
  min-height: 3em;
}
.top-activity-card__title {
  font-size: inherit;
  font-weight: 500;
  color: var(--color-text, #2E3440);
  text-decoration: none;
  line-height: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (hover: hover) {
  .top-activity-card__title:hover {
    color: var(--color-link, #5F568E);
    text-decoration: underline;
  }
}

/* --- その場表示プレーヤー（YouTube / SpeakerDeck・全幅16:9・同時1つ） ---
   クリック/タップ時に js/top-activity-more.js がカード直後に挿入（grid-column: 1 / -1 で全幅）。
   初期ロードでは iframe を作らない（ファサード）。 */
.top-activity-card__player {
  position: relative;
  grid-column: 1 / -1;
  border-radius: 8px;
  overflow: hidden;
  background: #1f2024;
  box-shadow: 0 4px 14px rgba(31, 32, 65, 0.18);
  margin: 2px 0 6px;
}
.top-activity-card__player-frame { aspect-ratio: 16 / 9; }
.top-activity-card__player-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.top-activity-card__player-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(46, 52, 64, 0.72);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
@media (hover: hover) {
  .top-activity-card__player-close:hover { background: rgba(46, 52, 64, 0.92); }
}
.top-activity-card__player-close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

/* --- モーダル本体の上下フェード（V15: 実環境 section-activity.css の表現を踏襲） ---
   上端＝__body::before（sticky・28px・上端グラデ）、下端＝__body::after（sticky・28px）。
   カードが grid（2カラム）のため sticky 擬似要素は grid 子にすると grid area 内に閉じ込められ
   張り付き意図どおりにならない → 旧実装（追補2/3）と同様、スクロールコンテナ __body 直下の
   擬似要素として置く（外周余白は .top-activity-cards の padding 16px が担う・__body padding は 0）。
   overlay はカード（position:relative）より前面に置くため z-index:3。
   状態は js/top-activity-more.js が .top-activity-modal に is-top/is-mid/is-bottom/is-noscroll を
   付与して同期（28px・EPS=1）。 */
.top-activity-modal__body::before {
  content: "";
  display: block; /* 2026-10-18: __body はブロック容器のため擬似要素が inline になり height が無効・描画されない（E2E 実描画A/Bで検出）。flex アイテムの非モーダル同架構と同様に block 化が必要 */
  position: sticky;
  top: 0;
  height: 28px;
  margin-bottom: -28px;
  z-index: 3;
  background: linear-gradient(to bottom, var(--color-bg-light, #F3FAFD), rgba(243, 250, 253, 0));
  pointer-events: none;
  border-radius: 8px 8px 0 0;
  opacity: 0;
}
.top-activity-modal__body::after {
  content: "";
  display: block; /* 同上 */
  position: sticky;
  bottom: 0;
  height: 28px;
  margin-top: -28px;
  z-index: 3;
  background: linear-gradient(to bottom, rgba(243, 250, 253, 0), var(--color-bg-light, #F3FAFD));
  pointer-events: none;
  border-radius: 0 0 8px 8px;
  opacity: 1;
}
/* 先頭: 上消・下表 / 中間: 上下表 / 最下端: 上表・下消 / 非スクロール: 両消（実環境と同4状態） */
.top-activity-modal.is-top .top-activity-modal__body::before { opacity: 0; }
.top-activity-modal.is-mid .top-activity-modal__body::before,
.top-activity-modal.is-bottom .top-activity-modal__body::before { opacity: 1; }
.top-activity-modal.is-top .top-activity-modal__body::after { opacity: 1; }
.top-activity-modal.is-bottom .top-activity-modal__body::after,
.top-activity-modal.is-noscroll .top-activity-modal__body::after { opacity: 0; }
.top-activity-modal.is-noscroll .top-activity-modal__body::before { opacity: 0; }

/* --- 開閉アニメ（PCの opacity/scale・多重演出禁止の軽量キーフレーム閉線） --- */
@keyframes top-activity-modal-fade-in {
  from { opacity: 0; }
}
@keyframes top-activity-modal-panel-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.97);
  }
}
.top-activity-modal.is-open .top-activity-modal__backdrop {
  animation: top-activity-modal-fade-in 0.18s ease-out;
}
.top-activity-modal.is-open .top-activity-modal__panel {
  animation: top-activity-modal-panel-in 0.18s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .top-activity-modal.is-open .top-activity-modal__backdrop,
  .top-activity-modal.is-open .top-activity-modal__panel {
    animation: none;
    transition: none;
  }
}

@media print {
  .top-activity-modal,
  .vseg {
    display: none !important;
  }
}

/* plan 1792300996495: SP長押し時の選択ハイライトをサイト語彙（藤）に統一。
   ブラウザ既定（Android Chrome・Material You壁紙色）の赤を上書き。
   藤背景＋白文字＝押下中/選択中の既存語彙（ページナビ is-active 等）と同系。 */
.top-activity ::selection,
.top-activity-modal ::selection {
  background-color: var(--color-main, #5F568E);
  color: #ffffff;
}

/* レスポンシブ */