/* ═══════════════════════════════════════════════════════════════
   AIBUILDERZ 下層ページ v8 ─ 一覧型（/media/・/resources/・/case-list/）
   置き場: assets/css/v8-list.css（ハンドル aibz-v8-list、依存 aibz-v8-common）
   読み込み: page-media.php・page-resources.php・page-case-list.php の中で、get_header('v8') より前に優先度 101 で

   ・記事カード .tcard はトップのメディアの章と同じカード（アイキャッチがあれば上に出す .has-ph。無ければ題で組む）
   ・資料カード .rcard はトップの資料の章の大きなカード（表紙を左、真ん中に文字とボタン）
   ・導入事例 .cl はトップの導入事例と同じ、写真の額縁と押せる題の一覧
   ・すべて body.v8 の下に閉じる。寸法は common.css の3段（1024px 以上／768〜1023px／768px 未満）に合わせる
   ═══════════════════════════════════════════════════════════════ */

/* ── 下層の頭の補い：リードの1行目を太く（トップの章の .sub と同じ役目） ── */
.v8 .lh-sub{position:relative; max-width:42em; margin:28px 0 0; font-size:20px; font-weight:800; line-height:1.7; letter-spacing:.03em; color:var(--ink)}
.v8 .lh-sub + .lh-lead{max-width:52em; margin-top:8px}   /* トップの章と同じく、1440px では1行に収める */
@media (max-width:1023px){ .v8 .lh-sub{font-size:18px} }
@media (max-width:767px) { .v8 .lh-sub{margin-top:20px; font-size:17px; line-height:1.75} }
.v8 .lh-sub{word-break:auto-phrase}


/* ═══ メディア：分類（絞り込み）─ 白いチップにせず、文字と下線で ═══
   4列×2段の索引。いま選んでいる分類は黒い下線、ほかは細い罫。右に本数 */
.v8 .tabs ul{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 28px; margin:0; padding:0; list-style:none}
.v8 .tabs a{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:56px; padding:10px 2px; border-bottom:1px solid var(--hair);
  font-size:15px; font-weight:700; line-height:1.5; letter-spacing:.04em; color:var(--ink2); text-decoration:none;
}
.v8 .tabs a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#111;
  transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.v8 .tabs a[aria-current]{color:var(--ink); font-weight:800}
.v8 .tabs a[aria-current]::after{transform:scaleX(1)}
@media (hover:hover){
  .v8 .tabs a:hover{color:#111}
  .v8 .tabs a:not([aria-current]):hover::after{transform:scaleX(1); opacity:.28}
}
.v8 .tabs .n{flex:0 0 auto; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink3); font-variant-numeric:tabular-nums}
/* 分類の名前は語の途中で折らない。折れるのは「・」の後（<wbr>）だけ。それでも入らない幅のときだけ字で折る */
.v8 .tabs .t{min-width:0; word-break:keep-all; overflow-wrap:anywhere}

/* 表示している範囲（116本中 1〜12本目） */
.v8 .ml-count{margin:28px 0 28px; font-size:14px; font-weight:700; line-height:1.5; letter-spacing:.06em; color:var(--ink3); font-variant-numeric:tabular-nums}
/* 分類とページ送りで戻ってきたとき、ヘッダーの下に分類の索引が来るようにする */
.v8 #list{scroll-margin-top:calc(var(--hdr-top) + var(--hdr-h) + 8px)}


/* ═══ 記事カード .tcard ─ トップのメディアの章と同じ「アイキャッチを使わず題で組む」カード ═══
   カテゴリ・日付 → 題（4行ぶん）→ 抜粋（2行）→ 細い罫と「記事を読む」と黒い丸の矢印。
   地に大きく薄く番号を敷く。同じ段のカードは高さをそろえ、下の行の位置も合わせる */
.v8 .tcards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px}
.v8 .tcard{
  display:flex; flex-direction:column; height:100%;
  padding:30px 28px 24px; border-radius:18px;
  box-shadow:var(--e2), 0 0 0 1px var(--pale);
}
.v8 a.tcard:hover{box-shadow:var(--e3), 0 0 0 1px var(--pale)}
.v8 .tcard .no{
  position:absolute; right:-6px; top:-22px; z-index:0; margin:0;
  font-size:112px; font-weight:900; line-height:1; letter-spacing:-.02em;
  color:rgba(17,17,17,.055); pointer-events:none; user-select:none; font-variant-numeric:tabular-nums;
}
.v8 .tcard .tx, .v8 .tcard .ft{position:relative; z-index:1}
.v8 .tcard .tx{padding-bottom:22px}
.v8 .tcard .meta{display:flex; align-items:center; gap:12px; margin:0; font-size:13px; line-height:1.5}
.v8 .tcard .cat{font-weight:800; letter-spacing:.08em; color:var(--ink2)}
.v8 .tcard .dt{padding-left:12px; border-left:1px solid var(--hair); font-weight:700; letter-spacing:.1em; color:var(--ink3); font-variant-numeric:tabular-nums}
.v8 .tcard .ttl{
  margin:20px 0 0; min-height:calc(1.56em * 4);
  font-size:18px; font-weight:900; line-height:1.56; letter-spacing:.01em; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
.v8 .tcard .ex{
  margin:12px 0 0; font-size:15px; font-weight:500; line-height:1.85; letter-spacing:.03em; color:var(--ink2);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.v8 .tcard .ttl, .v8 .tcard .ex{word-break:auto-phrase}
/* 下の行：細い罫、「記事を読む」、黒い丸の矢印。カードの下端にそろえる */
.v8 .tcard .ft{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:16px; border-top:1px solid var(--hair);
  font-size:14px; font-weight:700; line-height:1.5; letter-spacing:.06em; color:var(--ink);
}
.v8 .tcard .ar{
  position:relative; flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:#111; color:#fff;
  box-shadow:0 8px 16px -10px rgba(6,12,22,.6);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.v8 .tcard .ar svg{position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -5px}
.v8 .tcard .ar path{fill:currentColor}
@media (hover:hover){ .v8 a.tcard:hover .ar{transform:translateX(4px)} }

@media (max-width:1023px){
  .v8 .tabs ul{gap:0 20px}
  .v8 .tabs a{font-size:14px; letter-spacing:.02em}
  .v8 .tcards{grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px}
  /* 数が奇数なら最後の1枚を横いっぱいに（穴を空けない） */
  .v8 .tcards > li:last-child:nth-child(odd){grid-column:1 / -1}
  .v8 .tcards > li:last-child:nth-child(odd) .ttl{min-height:0}
}
@media (max-width:767px){
  .v8 .tabs ul{grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 16px}
  .v8 .tabs a{min-height:52px}
}
/* 389px 以下（Android の 360px など）：列の隙間と字間を詰め、分類の名前を1行に収める。
   320px では3つが「・」の後で2行になる。そのときも同じ段の下線がそろうよう、行の高さを li いっぱいに伸ばす */
@media (max-width:389px){
  .v8 .tabs ul{gap:0 12px}
  .v8 .tabs a{gap:6px; padding-left:0; padding-right:0; font-size:14px; letter-spacing:0}
}
.v8 .tabs li{display:flex; min-width:0}
.v8 .tabs li > a{flex:1 1 auto; min-width:0}
@media (max-width:767px){
  .v8 .ml-count{margin:22px 0 20px}
  .v8 .tcards{grid-template-columns:minmax(0,1fr); gap:20px}
  .v8 .tcard{padding:28px 22px 20px}
  .v8 .tcard .no{font-size:96px; top:-18px}
  .v8 .tcard .ttl{min-height:0; margin-top:16px; font-size:18px}
  .v8 .tcard .tx{padding-bottom:20px}
}
.v8 .tcards{margin:0; padding:0; list-style:none}
.v8 .tcards > li{min-width:0}

/* ── アイキャッチのある記事カード .tcard.has-ph（2026-09-22 板垣さん「メディアも基本的にアイキャッチを使いたい」） ──
   上にアイキャッチ（WordPress の原寸 1200×630 と同じ比率。切らずに全部見せる）→ 番号・カテゴリ・日付 → 題 → 抜粋 → 下の行。
   アイキャッチは記事詳細（v8-article-tone.css）と同じ白黒にそろえ、青い面を一覧に持ち込まない。
   番号は地に大きく敷かず、カテゴリの前に小さく置く。アイキャッチの無い記事は上の「題で組む」カードのまま */
.v8 .tcard.has-ph{padding:0}
/* 画像は流れの中に置き、幅から高さを決める（枠の aspect-ratio と絶対配置に頼らない。iPhone の Safari でも高さが 0 にならない） */
.v8 .tcard .ph{position:relative; flex:0 0 auto; overflow:hidden; border-bottom:1px solid var(--hair); background:#9EA2A8}
.v8 .tcard .ph img{
  display:block; width:100%; height:auto; aspect-ratio:1200 / 630; object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(1.02);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){ .v8 a.tcard:hover .ph img{transform:scale(1.03)} }
.v8 .tcard.has-ph .tx{padding:22px 26px 20px}
.v8 .tcard .nm{font-weight:800; letter-spacing:.06em; color:var(--ink3); font-variant-numeric:tabular-nums}
.v8 .tcard .nm + .cat{padding-left:12px; border-left:1px solid var(--hair)}
.v8 .tcard.has-ph .ttl{margin-top:14px; min-height:calc(1.56em * 3); -webkit-line-clamp:3}
.v8 .tcard.has-ph .ex{margin-top:10px}
.v8 .tcard.has-ph .ft{margin:auto 26px 0; padding:14px 0 20px}
@media (min-width:768px) and (max-width:1023px){
  /* 最後の1枚を横いっぱいにしたときは、アイキャッチを左・文字を右に（common.css の .acard と同じ組み方） */
  .v8 .tcards > li:last-child:nth-child(odd) .tcard.has-ph{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto}
  .v8 .tcards > li:last-child:nth-child(odd) .tcard.has-ph .ph{grid-row:1 / 3; aspect-ratio:auto; min-height:100%; border-bottom:0; border-right:1px solid var(--hair)}
  .v8 .tcards > li:last-child:nth-child(odd) .tcard.has-ph .ph img{position:absolute; inset:0; height:100%; aspect-ratio:auto}
  .v8 .tcards > li:last-child:nth-child(odd) .tcard.has-ph .tx{align-self:center; padding:26px 28px 16px}
  .v8 .tcards > li:last-child:nth-child(odd) .tcard.has-ph .ft{margin:0 28px}
}
@media (max-width:767px){
  .v8 .tcard.has-ph{padding:0}
  .v8 .tcard.has-ph .tx{padding:18px 20px 18px}
  .v8 .tcard.has-ph .ttl{min-height:0; margin-top:12px; -webkit-line-clamp:4}
  .v8 .tcard.has-ph .ft{margin:auto 20px 0; padding:14px 0 18px}
}

/* 記事がないとき */
.v8 .ml-empty{padding:56px 0 8px; text-align:center}
.v8 .ml-empty p{margin:0 0 24px; font-size:16px; font-weight:500; line-height:1.9; color:var(--ink2)}


/* ═══ ページ送り .pager ─ 前へ／番号／次へ。番号は文字と下線、前後は三角の丸 ═══ */
.v8 .pager{display:flex; align-items:center; justify-content:center; gap:16px 24px; margin-top:64px}
.v8 .pager-nums{display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none}
.v8 .pager-nums a, .v8 .pager-nums span{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 4px;
  font-size:16px; font-weight:700; line-height:1; letter-spacing:.02em; color:var(--ink2);
  text-decoration:none; font-variant-numeric:tabular-nums;
}
.v8 .pager-nums [aria-current]{color:var(--ink); font-weight:900}
.v8 .pager-nums [aria-current]::after{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background:#111}
.v8 .pager-nums .gap{min-width:24px; color:var(--ink3)}
@media (hover:hover){ .v8 .pager-nums a:hover{color:#111; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px} }
.v8 .pager-step{
  display:inline-flex; align-items:center; gap:12px; min-height:44px;
  font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--ink); text-decoration:none;
}
.v8 .pager-step .go{width:44px; height:44px}
.v8 .pager-step.prev .go svg{transform:scaleX(-1); margin-left:-7px}
.v8 .pager-step.is-off{visibility:hidden}
.v8 .pager-now{display:none; margin:0; font-size:16px; font-weight:800; letter-spacing:.08em; color:var(--ink); font-variant-numeric:tabular-nums}
@media (max-width:767px){
  .v8 .pager{justify-content:space-between; gap:12px; margin-top:44px}
  .v8 .pager-nums{display:none}
  .v8 .pager-now{display:block}
}


/* ═══ 資料カード .rcard ─ トップの資料の章の大きなカード ═══
   左に表紙（16:9）、右の面の真ん中に資料名・説明・ボタン。カードぜんたいが資料請求のページへのリンク */
.v8 .rcards{display:grid; gap:28px}
.v8 .rcard{
  display:grid; grid-template-columns:47% minmax(0,1fr); align-items:stretch;
  box-shadow:var(--e2), 0 0 0 1px var(--pale);
}
.v8 a.rcard:hover{box-shadow:var(--e3), 0 0 0 1px var(--pale)}
.v8 .rcard.no-ph{grid-template-columns:minmax(0,1fr)}
.v8 .rcard .ph{position:relative; aspect-ratio:16 / 9; overflow:hidden; border-right:1px solid var(--hair); background:#fff}
.v8 .rcard .ph img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:30% 50%}
.v8 .rcard .bd{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:36px 48px; text-align:center;
}
.v8 .rcard .hd{margin:0; font-size:26px; font-weight:800; line-height:1.5; letter-spacing:.02em; color:var(--ink); word-break:auto-phrase}
.v8 .rcard .ld{margin:14px 0 0; font-size:15px; font-weight:500; line-height:1.9; letter-spacing:.04em; color:var(--ink2); word-break:auto-phrase}
.v8 .rcard .btnx{margin-top:28px}
@media (hover:hover){ .v8 a.rcard:hover .btnx::before{opacity:1; animation-play-state:running} }
@media (max-width:1023px){
  .v8 .rcard{grid-template-columns:50% minmax(0,1fr)}
  .v8 .rcard .ph img{object-position:0% 50%}   /* 表紙の左端（社名と人物）を残す */
  .v8 .rcard .bd{padding:28px 28px}
  .v8 .rcard .hd{font-size:20px}
  .v8 .rcard .btnx{margin-top:22px}
}
@media (max-width:767px){
  .v8 .rcard{grid-template-columns:minmax(0,1fr)}
  /* 767px 以下は表紙を流れの中に置き、幅から高さを決める（2026-09-22 板垣さん「スマホで一覧に行くとアイキャッチがない」）。
     枠の aspect-ratio と絶対配置の画像だけだと、iPhone の Safari では1列の grid で枠の高さが 0 になり、表紙が消えることがある */
  .v8 .rcard .ph{aspect-ratio:auto; border-right:0; border-bottom:1px solid var(--hair)}
  .v8 .rcard .ph img{position:relative; inset:auto; height:auto; aspect-ratio:16 / 9; object-position:30% 50%}
  .v8 .rcard .bd{padding:26px 20px 28px}
  .v8 .rcard .btnx{align-self:stretch; padding-left:20px; padding-right:56px}
}


/* ═══ 導入事例 .cl ─ トップと同じ、写真の額縁と押せる題の一覧 ═══
   1024px 以上：左に大きな額縁、右に5件の題。題に触れる（フォーカスする）と額縁の写真が入れ替わり、押すと事例のページへ。
   1023px 以下：額縁は1件ずつに付け、写真と題を縦に並べる（指では触れて入れ替えられないため） */
.v8 .cl{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:stretch}
.v8 .cl-frame{
  position:relative; min-height:400px; border-radius:28px; background:#C9CDD2;
  box-shadow:0 46px 64px -40px rgba(10,18,32,.58), 0 26px 44px -26px rgba(10,18,32,.34), 0 3px 8px -2px rgba(10,18,32,.12);
}
.v8 .cl-ph{
  position:absolute; inset:0; z-index:0; display:block; overflow:hidden; border-radius:inherit;
  clip-path:inset(0 round 28px); opacity:0; pointer-events:none;
  transition:opacity .55s cubic-bezier(.2,.7,.2,1);
}
.v8 .cl-ph.on{z-index:1; opacity:1; pointer-events:auto}
.v8 .cl-ph img, .v8 .cl-thumb img{
  position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.02);
}
.v8 .cl-ph img{transform:scale(1.05); transition:transform 7s ease-out}
.v8 .cl-ph.on img{transform:none}
/* 左上からのごく薄い光と、下へ向かうわずかな沈み。縁の内側に細い光（トップの額縁と同じ） */
.v8 .cl-ph .tone, .v8 .cl-thumb .tone{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(90% 80% at 12% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(200deg, rgba(20,26,34,0) 50%, rgba(20,26,34,.12) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30), inset 0 1px 1px rgba(255,255,255,.45);
}
/* 写真ごとの切り取り位置 */
.v8 .cl .p1 img{object-position:72% 50%}   /* 左が白い壁なので、机の列の側へ寄せる */
.v8 .cl .p2 img{object-position:50% 80%}
.v8 .cl .p3 img{object-position:50% 30%}
.v8 .cl .p4 img{object-position:50% 50%}
.v8 .cl .p5 img{object-position:50% 50%}

.v8 .cl-list{display:flex; flex-direction:column; margin:0; padding:0; list-style:none; border-bottom:1px solid var(--hair)}
.v8 .cl-list > li{flex:1 1 0; display:flex; min-width:0}
.v8 .cl-row{
  position:relative; flex:1 1 auto; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px;
  min-height:80px; padding:12px 0 12px 2px; color:var(--ink); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
/* 上の細い罫。いま額縁に出ている行は、黒い罫を左から引く（トップの一覧と同じ） */
.v8 .cl-row::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--hair)}
.v8 .cl-row::after{
  content:""; position:absolute; left:0; right:0; top:-.5px; height:2px; background:#111;
  transform-origin:left center; transform:scaleX(0); transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.v8 .cl-row.on::after{transform:scaleX(1)}
.v8 .cl-thumb{display:none}
.v8 .cl-no{align-self:center; min-width:2em; font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--ink3); font-variant-numeric:tabular-nums}
.v8 .cl-t{min-width:0; font-size:19px; font-weight:700; line-height:1.5; letter-spacing:.03em; opacity:.74; transition:opacity .3s ease; word-break:auto-phrase}
.v8 .cl-row.on .cl-t{opacity:1}
.v8 .cl-ar{
  position:relative; flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:#111; color:#fff;
  box-shadow:0 8px 16px -10px rgba(6,12,22,.6); transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.v8 .cl-ar svg{position:absolute; left:50%; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -5.5px}
.v8 .cl-ar path{fill:currentColor}
@media (hover:hover){
  .v8 .cl-row:hover .cl-t{opacity:1}
  .v8 .cl-row:hover .cl-ar{transform:translateX(4px)}
}
.v8 .cl-row:focus-visible{outline:2px solid #111; outline-offset:2px; border-radius:6px}

@media (prefers-reduced-motion: reduce){
  .v8 .cl-ph, .v8 .cl-ph img, .v8 .cl-row::after{transition:none}
  .v8 .cl-ph img{transform:none}
}

/* 1023px 以下：額縁を1件ずつに付ける。768〜1023px は写真を左・題を右、767px 以下は写真を上・題を下 */
@media (max-width:1023px){
  .v8 .cl{display:block}
  .v8 .cl-frame{display:none}
  .v8 .cl-list{border-bottom:0}
  .v8 .cl-list > li + li{margin-top:32px}
  .v8 .cl-row{
    grid-template-columns:minmax(0,40%) auto minmax(0,1fr) auto; grid-template-areas:"ph no t ar";
    gap:0 16px; min-height:0; padding:0;
  }
  .v8 .cl-row::before, .v8 .cl-row::after{display:none}
  .v8 .cl-thumb{
    grid-area:ph; position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden;
    margin-right:12px; border-radius:22px; background:#C9CDD2;
    box-shadow:0 34px 46px -32px rgba(10,18,32,.55), 0 12px 20px -12px rgba(10,18,32,.28);
  }
  .v8 .cl-no{grid-area:no}
  .v8 .cl-t{grid-area:t; font-size:18px; letter-spacing:.02em; opacity:1}
  .v8 .cl-ar{grid-area:ar}
}
@media (max-width:767px){
  .v8 .cl-list > li + li{margin-top:40px}
  .v8 .cl-row{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"ph ph" "t ar"; gap:18px 12px}
  .v8 .cl-no{display:none}   /* 題の幅を取るため、番号は出さない（長い題「セールスリスト構築パイプライン」が語の途中で折れないように） */
  .v8 .cl-thumb{margin-right:0; border-radius:18px; box-shadow:0 30px 40px -28px rgba(10,18,32,.55), 0 10px 18px -10px rgba(10,18,32,.26)}
  .v8 .cl-t{font-size:17px; letter-spacing:.02em}
}

/* ═══ 記事を探す（タグを選ぶ形。2026-09-22） ═══ */
.v8 .ftag{margin:0 0 28px; padding:22px 24px 18px; border-radius:20px; background:var(--face); box-shadow:var(--e1), 0 0 0 1px var(--faceline)}
.v8 .ftag-hd{margin:0 0 14px; font-size:17px; font-weight:900; letter-spacing:.04em; color:var(--ink); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px}
.v8 .ftag-note{font-size:12px; font-weight:500; letter-spacing:.03em; color:var(--ink3)}
.v8 .ftag-list{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none}
.v8 .ftag-t{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 8px 0 16px; border-radius:999px; background:#fff;
  box-shadow:0 0 0 1px rgba(17,17,17,.14), 0 6px 12px -10px rgba(14,26,44,.4); color:var(--ink); font-size:14px; font-weight:700; text-decoration:none;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease}
.v8 .ftag-t .n{display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:28px; padding:0 8px; border-radius:999px; background:rgba(17,17,17,.06); font-size:12px; font-weight:800; color:var(--ink2); font-variant-numeric:tabular-nums}
.v8 .ftag-t[aria-pressed="true"]{background:linear-gradient(150deg,#1A1F26 0%,#0D1116 48%,#151A20 100%); color:#F6F6F6; box-shadow:0 10px 18px -12px rgba(14,26,44,.6)}
.v8 .ftag-t[aria-pressed="true"] .n{background:rgba(255,255,255,.16); color:#fff}
.v8 .ftag-t[aria-pressed="true"]::before{content:""; width:14px; height:14px; margin-left:-4px; border-radius:50%; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.8 11 12 5.2' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
@media (hover:hover){ .v8 .ftag-t:hover{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(17,17,17,.3), 0 8px 14px -10px rgba(14,26,44,.45)} }
.v8 .ftag-act{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--hair)}
.v8 .ftag-res{margin:0; font-size:14px; font-weight:700; color:var(--ink2)}
.v8 .ftag-res b{margin:0 3px 0 10px; font-size:26px; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; vertical-align:-2px}
.v8 .ftag-clear{font-size:13px; font-weight:700; color:var(--ink2); text-decoration:underline; text-underline-offset:3px}
.v8 .ftag-go{margin-left:auto}
.v8 .ftag [hidden]{display:none !important}
.v8 .ml .tabs{display:none}
@media (max-width:767px){
  .v8 .ftag{padding:18px 16px 14px; border-radius:16px}
  .v8 .ftag-t{font-size:13px; padding-left:14px}
  .v8 .ftag-go{margin-left:0; width:100%; justify-content:center}
}