/* 投稿フィードの見た目(2026-09-21 切り出し)。
   プロフィール・店舗ページ(partials/posts_overlays.html)と検索ページが
   この 1 本を読む。.pfeed* はここにしか置かない。
   注: .pfeed[hidden] は .posts-grid[hidden] と同じ規則に入っていて割れない
   ので、あちらに残したまま、検索ページ用に同じ 1 行だけ下に置く。 */
.pfeed[hidden] { display: none !important; }
/* .posts-grid も同じ理由(display:grid が UA の [hidden] に勝つ)。
   検索ページ側にガードが無く、おすすめの下にグリッドが出たままだった
   (2026-09-22、ユーザー指摘「グリッド混じってるだが」)。 */
.posts-grid[hidden] { display: none !important; }

/* 投稿まわりの CSS(2026-09-14 切り出し)。マークアップ・JS と同じ場所に
   置かないと、この partial を使う別のページで位置や表示が効かない。 */
/* 投稿(2026-09-13、ユーザー指示「インスタグラムのようなフォトギャラリーな
   表示」): 1件1カードの縦積みをやめ、正方形タイルの3列グリッドにする。
   タイルを押すと、その投稿を大きく見るシートが開く(写真の無い投稿は
   本文をタイルに出す - 空のタイルが並ぶと何の投稿か分からないため)。 */
/* 見せ方の切り替え(2026-09-17)。粒は店舗ページのサブタブ
   (.stab-sub-btn)と同じ形・同じ色にする - 新しい粒のデザインは作らない。
   あちらの CSS は各ページの中にあるので、値だけをここへ写している。 */
.pfeed-switch {
  display: flex;
  gap: 6px;
  padding: 2px 0 10px;
}


.pfeed-switch-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid #ece4e8;
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #6f5a64;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}


.pfeed-switch-btn.active {
  background: var(--primary-soft, #fbe3ee);
  border-color: var(--primary-dark, #c9658f);
  color: var(--primary-dark, #c9658f);
}


/* 縦並び(2026-09-17、ユーザー指示「上に画像、下に文、その下に、コメントと
   リポストといいねと共有」)。 */
.pfeed { display: block; }


/* 投稿と投稿の区切り(2026-09-23、ユーザー指示「ポストとポストの間の
   区切りをもう少しはっきりして」)。背景が桜色なので、従来の #f1e6ec は
   地色に溶けてどこで切れているのか分からなかった。線を一段濃くし、
   前後の余白も少し広げて、1 件ずつのかたまりが見えるようにする。 */
.pfeed-card {
  border-bottom: 1px solid #e3c8d7;
  padding: 0 0 13px;
  margin-bottom: 15px;
}


.pfeed-card:last-child { border-bottom: none; margin-bottom: 0; }


/* X 由来の投稿(2026-09-21)。AIRIS で書いたものと混ざるので、
   出どころが分かるようにする。控えなので画像は無い。 */
.pfeed-from-x {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 0 2px; padding: 4px 10px 4px 8px;
  border-radius: 999px; background: rgba(42, 36, 39, .06);
  color: #6b5a62; font-size: 11.5px; font-weight: 800;
  text-decoration: none;
}

.pfeed-from-x:active { background: rgba(42, 36, 39, .12); }

.pfeed-from-x-mark { display: inline-flex; width: 11px; height: 11px; }

.pfeed-from-x-mark svg { width: 100%; height: 100%; fill: currentColor; }


/* 共有リンクで来たときの目印(2026-09-22)。写真の無い投稿は全画面で
   開けないので、どれのことか一瞬だけ示す。 */
.pfeed-card-shared {
  animation: pfeedShared 2.4s ease-out;
}

@keyframes pfeedShared {
  0%, 60% { background: rgba(232, 116, 160, .10); }
  100% { background: transparent; }
}


/* リポストの札(2026-09-22、ユーザー指示)。持ち主の行より一段小さく、
   誰が回したのかだけを静かに出す。 */
.pfeed-repost-by {
  display: flex; align-items: center; gap: 5px;
  /* 名前の列に揃える(アイコン36px + 隙間10px)。 */
  padding: 0 2px 6px 46px;
  color: #8a7b83; font-size: 11.5px; font-weight: 800;
}

.pfeed-repost-mark { font-size: 11px; line-height: 1; }

.pfeed-repost-media { display: block; text-decoration: none; color: inherit; }


/* 左の列にアイコンだけ、右の列に中身すべて(2026-09-22、ユーザー指示)。 */
.pfeed-row { display: flex; align-items: flex-start; gap: 10px; }

.pfeed-avatar-link { flex: 0 0 auto; display: block; }

.pfeed-main { flex: 1 1 auto; min-width: 0; }

/* 名前・@ID・経過時間を1行に。長い名前やIDは詰めて、時間だけは必ず残す
   - いつの投稿かは、名前が切れても要る情報。 */
.pfeed-meta {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.pfeed-headlink {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.pfeed-time {
  flex: 0 0 auto;
  font-size: 13px;
  color: #6f5a64;
  white-space: nowrap;
}

/* 中黒は時間が入ったときだけ。JS が入れるまでは何も出さない。 */
.pfeed-time:not(:empty)::before { content: "·"; margin: 0 4px; }

.pfeed-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #f3e7ee;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #b8547e;
}

.pfeed-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pfeed-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 14px; font-weight: 800; color: #2a2427;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pfeed-handle {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px; font-weight: 500; color: #6f5a64;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* 写真は元の縦横比のまま出す(切り取らない)。右の列に入ったので、
   左右へはみ出させるのはやめた(2026-09-22)。 */
.pfeed-media { margin: 10px 0 0; cursor: pointer; }


.pfeed-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}


/* 文字の装飾(2026-09-23、ユーザー指示「写メ日記みたいに、文字の
   フォントや大きさ、色まで変えれるように」)。名前は post_rich_text.py の
   一覧と 1 対 1。ここに無い名前は付かないので、増やすときは両方を直す。 */
/* 既定にも実体を持たせる(2026-09-23、ユーザー報告「ゴシックを押下
   できない」)。外側の指定を上書きできるようにするため。 */
.prt-f-gothic { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
.prt-f-mincho { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
.prt-f-maru { font-family: "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", "Yu Gothic", sans-serif; }

/* 2026-10-13 に足した書体。端末に入っていない字なので Web フォント
   (Google Fonts)を使う。読み込みは static/js/post-actions.js が、その書体が
   画面に出たときだけ行う(1 書体ぶんの CSS が約 110KB あり、全部を毎回
   読むと重い)。読めるまで / 読めないときは、後ろに並べた端末の書体で出る。
   名前は post_rich_text.py の FONTS と 1 対 1。 */
.prt-f-tegaki { font-family: "Yomogi", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; }
.prt-f-pen { font-family: "Klee One", "Hiragino Mincho ProN", "Yu Mincho", serif; }
.prt-f-pop { font-family: "Hachi Maru Pop", "Hiragino Maru Gothic ProN", sans-serif; }
/* 極太は元から太い 1 種類だけの書体。擬似の太字を重ねると崩れるので禁止する
   (子の span にも効く)。 */
.prt-f-futo { font-family: "Dela Gothic One", "Hiragino Sans", "Yu Gothic", sans-serif; font-synthesis: none; }
.prt-f-elegant { font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; }

/* 大きさは **絶対値**(2026-09-23、ユーザー報告「連続で押したらだんだん
   変わる」)。em だと入れ子で掛け算になり、押すたびに大きくなっていた。 */
.prt-s-sm { font-size: 12px; font-weight: 400; line-height: 1.7; }
.prt-s-md { font-size: 14px; font-weight: 400; line-height: 1.7; }
.prt-s-lg { font-size: 18px; font-weight: 800; line-height: 1.45; }
.prt-s-xl { font-size: 24px; font-weight: 800; line-height: 1.35; }

.prt-c-base { color: #3f2f37; }

/* 全画面ビューアは黒地(2026-09-23)。白地向けの色をそのまま出すと
   黒・グレー・茶・紫が読めないので、同じ色味の明るい側へ差し替える。
   保存されている指定は変えない - 出し方を場所に合わせるだけ。 */
.reel .prt-c-base { color: #ffffff; }
.reel .prt-c-gray { color: #c9bfc5; }
.reel .prt-c-red { color: #ff7b72; }
.reel .prt-c-pink { color: #ff8fc0; }
.reel .prt-c-orange { color: #ffab5e; }
.reel .prt-c-brown { color: #dcae80; }
.reel .prt-c-green { color: #7fd79b; }
.reel .prt-c-blue { color: #79bdf0; }
.reel .prt-c-purple { color: #c5a6f5; }
.prt-c-red { color: #d0342c; }
.prt-c-pink { color: #d6367f; }
.prt-c-orange { color: #c2620d; }
.prt-c-brown { color: #8a5a2b; }
.prt-c-green { color: #2e7d46; }
.prt-c-blue { color: #1f6fb2; }
.prt-c-purple { color: #7a4bbf; }
.prt-c-gray { color: #7a6a72; }

/* 2026-10-13 に足した 9 色(黄・黄緑は同日の追加)。白地向けと、全画面ビューア(.reel、黒地)向けの
   明るい側を対で持つ。名前は post_rich_text.py の COLORS と 1 対 1。 */
.prt-c-coral { color: #e0533f; }
.prt-c-gold { color: #b07d0a; }
.prt-c-teal { color: #0f8b8d; }
.prt-c-sky { color: #2b9fd9; }
.prt-c-navy { color: #24408e; }
.prt-c-wine { color: #8e2447; }
.prt-c-lavender { color: #9a7ee0; }
.prt-c-yellow { color: #e8b800; }
.prt-c-lime { color: #6aa31a; }
.reel .prt-c-coral { color: #ff9d8a; }
.reel .prt-c-gold { color: #f2c94c; }
.reel .prt-c-teal { color: #5fd6d3; }
.reel .prt-c-sky { color: #8fd3ff; }
.reel .prt-c-navy { color: #8fa8ff; }
.reel .prt-c-wine { color: #ee8aa6; }
.reel .prt-c-lavender { color: #cdbdf7; }
.reel .prt-c-yellow { color: #ffe45c; }
.reel .prt-c-lime { color: #b6e65c; }

/* 太字・斜体・下線・マーカー(2026-10-13)。大きさ(.prt-s-*)より後ろに置く
   - 大きさが決める太さを、太字の指定が上書きできるように。
   下線は子から打ち消せない(text-decoration は親から伝わる)ので、編集欄は
   外側の span を割って外へ出してから掛ける。 off / none は「元に戻す」
   方向の指定で、見た目を消すだけ。 */
.prt-b-on { font-weight: 800; }
.prt-b-off { font-weight: 400; }
.prt-i-on { font-style: italic; }
.prt-i-off { font-style: normal; }
.prt-u-on { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prt-u-off { text-decoration: none; }
.prt-m-yellow { background: linear-gradient(transparent 55%, rgba(255, 226, 106, 0.85) 55%); }
.prt-m-pink { background: linear-gradient(transparent 55%, rgba(255, 170, 205, 0.75) 55%); }
.prt-m-blue { background: linear-gradient(transparent 55%, rgba(150, 210, 255, 0.8) 55%); }
.prt-m-green { background: linear-gradient(transparent 55%, rgba(160, 230, 175, 0.8) 55%); }
.prt-m-none { background: none; }

.pfeed-body {
  padding: 3px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #3f2f37;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 本文の URL(2026-10-19)。目印は下線 - 作者が「下線 off」を選んでいても消さない
   (内側の span の text-decoration:none は、外側の <a> の下線を消せない)。
   色は AIRIS のブランド色(白地で 5.1:1)。作者が色を付けた塊は、内側の span の色が勝つ。
   長い URL が 375px を溢れないよう、1 行に収まらないときだけ途中で折る(break-all にすると、直前の文の行末へ URL の頭だけが残って押しにくい)。 */
.pfeed-body a {
  color: #b4486f;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.pfeed-body a:active { opacity: 0.6; }


/* 行頭に印、そのあと 4 つ(2026-09-26、ユーザー指示「上のAIRISのものと
   縦で揃うように」)。下の X の行(.pfeed-xstats)と **同じ列割り** にして、
   コメント・リポスト・いいねが縦に揃うようにする。
   押せるのは印と字のところだけ(2026-09-23、ユーザー指示「押下範囲が
   広すぎます」) - 列は広いが、ボタンは justify-self: start で中身の
   ぶんだけの大きさのままにする。あいだの余白は押しても何も起きない。 */
.pfeed-actions {
  display: grid;
  /* 最後の列(共有)は中身のぶん(39px)で固定し、残りを 3 等分する
     (2026-09-26、ユーザー指示「等間隔にして」「スペース余ってるでしょ」)。
     4 つとも 1fr にすると最後の列も等分され、右端に 24px 余っていた。
     下の X の行も同じ列割りにするので、最後が空でも 3 つの位置は揃う。 */
  grid-template-columns: 15px repeat(3, 1fr) 39px;
  align-items: center;
  gap: 8px;
  padding: 8px 0 0;
}
.pfeed-actions > .pfeed-act { justify-self: start; }

/* AIRIS の印(2026-09-26)。プロフィールの .airis-follow-mark と同じ作り。
   ロゴは淡い水彩で、白地に 15px だとほとんど見えないので、地色の上に
   白抜きで置く(2026-09-23 にプロフィール側で決めた見せ方に合わせる)。 */
.pfeed-actions .airis-follow-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex-shrink: 0;
  background: linear-gradient(135deg, #d98ab0, #c53060);
  border-radius: 4px;
}
.pfeed-actions .airis-follow-mark img {
  width: 100%; height: 100%;
  box-sizing: border-box; padding: 1px;
  display: block; object-fit: contain;
  filter: brightness(3) saturate(0);
}


.pfeed-act {
  /* 中身のぶんだけの大きさにする(2026-09-23、ユーザー指示)。以前は
     flex: 1 1 0 で 1 つが行の 4 分の 1 を占めており、字の右の空きまで
     押せてしまっていた。 */
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  /* 中央寄せだと、入りきらないとき左右どちらも切れて絵文字まで欠ける。
     左から並べて、あふれるのは文字の末尾だけにする(2026-09-22)。 */
  justify-content: flex-start;
  gap: 2px;
  appearance: none;
  border: none;
  background: transparent;
  /* 右の列に入って幅が狭くなったぶん詰める(2026-09-22)。はみ出した分は
     隣に重ねず切る - 重なると、どの数字がどの操作のものか分からない。 */
  overflow: hidden;
  /* 指で押せる大きさは確保する。記号のすぐ周りだけで、隣との間の
     余白(約 43px)は押しても何も起きない。 */
  padding: 8px 9px;
  font-family: inherit;
  /* 列が広がったので字も戻す(2026-09-23)。色は同じ色味のまま暗くして
     白地に 5.1:1 - #8a7f84 は 3.9:1 で、この大きさには足りなかった。
     2026-09-24(ユーザー指示「もう少し大きく」): 色/太さは維持し
     文字サイズとpaddingだけ上げる - コントラスト比は文字サイズに
     依存しないため後退しない。 */
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted, #6f5a64);
  /* 桁が変わっても 2 段の数字の左端が動かないように(2026-09-26)。
     下の X の行は前から同じ指定を持っている。 */
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}


.pfeed-act-icon { font-size: 13.5px; line-height: 1; flex: 0 0 auto; }

/* 印は線画(2026-09-23、ユーザー指示「揃えて」)。大きさは字のときと
   同じ見え方になるよう、字送りではなく実寸で決める。
   2026-09-24(ユーザー指示「もう少し大きく」): 実寸・線幅を比率を保った
   まま底上げ(16→19px、線幅1.8→1.9)。線画の形・色・状態別スタイルは
   変更しない。 */
.pfeed-act-icon svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 押した状態。いいねは同じ形のまま塗りつぶす - 線画では ♡→♥ のように
   字を入れ替えられない。リポストは色だけで足りるので塗らない。 */
.pfeed-act.is-on[data-postact="like"] .pfeed-act-icon svg { fill: currentColor; }

.pfeed-repost-mark svg { width: 12px; height: 12px; }


.pfeed-act:active { opacity: 0.6; }


/* 2026-09-17 に「まだ中身が無いものは薄くする」として コメント/リポスト/
   いいね を #b8a7ae にしていたが、3 つとも実装が済んだので外した
   (2026-09-23、ユーザー報告「文字が薄くて見えない」)。白地に 2.5:1 で、
   この文字の大きさでは読めなかった。 */


.pfeed-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(20, 15, 18, 0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}


/* X の控えは 1 投稿に最大 4 枚。横に並べ、はみ出しは横スクロール。 */
/* 写真が複数ある投稿(2026-10-01、ユーザー指示「画像は横スライドで
   切り替えできるように」「横にも画像ある感の表示がいい」)。

   1 枚ぶんの幅をわざと画面より狭くして、**右に次の写真の端をのぞかせる**。
   指を離した位置で止まらないよう、scroll-snap で 1 枚ずつ吸い付かせる。
   以前は高さ揃えの横スクロールで、写真の大きさがまちまちだった。

   JS は使わない - このカードは「もっと読む」で後から差し込まれるので、
   差し込むたびに配線し直す作りにすると、配線漏れが必ず出る。 */
.pfeed-media-multi {
  display: flex; gap: 6px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pfeed-media-multi::-webkit-scrollbar { display: none; }
.pfeed-media-multi img {
  /* のぞかせる幅を引いた残りが 1 枚ぶん。 */
  flex: 0 0 calc(100% - 34px);
  width: calc(100% - 34px);
  scroll-snap-align: start;
  aspect-ratio: 4 / 3; height: auto; max-height: 420px;
  object-fit: cover; border-radius: 10px; background: #f7eef3;
}
/* 最後の 1 枚は右端まで来てほしいので、後ろに余白を足す。
   これが無いと、最後の写真が左に寄ったまま止まる。 */
.pfeed-media-multi::after {
  content: ""; flex: 0 0 28px;
}

/* 何枚あるか(2026-10-01)。のぞかせるだけでは「あと何枚か」が
   分からないので、枚数を角に出す。 */
.pfeed-media-wrap { position: relative; }
.pfeed-media-count {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(24, 16, 20, .58); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  pointer-events: none;
}
.pfeed-media-count svg {
  width: 11px; height: 11px; fill: none; stroke: currentColor;
  stroke-width: 2;
}

/* いいねを押した状態(2026-09-22、ユーザー指示)。上の
   .pfeed-act[data-postact="like"] の落ち着いた色より後ろに置いて勝たせる。 */
.pfeed-act.is-on { color: #e0245e; }
.pfeed-act:disabled { opacity: 0.45; cursor: default; }

/* 全画面ビューアの操作列(2026-09-22、ユーザー指示「TikTokみたいに画面の
   右に縦に配置」)。ビューアは 2 実装あるが、見た目はここ 1 箇所。
   下の説明文と右下の投稿者チップに被らない高さに置く。 */
.preel-rail {
  position: absolute;
  right: 8px;
  bottom: 120px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}

.preel-rail[hidden] { display: none !important; }

.preel-act {
  flex: 0 0 auto;
  width: 52px;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  background: transparent;
  border: none;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  font-size: 10px;
  line-height: 1.2;
}

.preel-act .pfeed-act-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(20, 15, 18, 0.42);
  font-size: 19px;
  line-height: 1;
}

/* 画面の上の色に負けないよう、落ち着いた色の指定より後ろで白に戻す。 */
.preel-rail .pfeed-act,
.preel-rail .pfeed-act[data-postact="comment"],
.preel-rail .pfeed-act[data-postact="repost"],
.preel-rail .pfeed-act[data-postact="like"] { color: #fff; }
.preel-rail .pfeed-act.is-on { color: #ff4d79; }
.preel-rail .pfeed-act.is-on .pfeed-act-icon { background: rgba(224, 36, 94, 0.28); }


/* ---- リポストのときに選ばせるシート(2026-09-24、ユーザー指示) ---- */
.pfeed-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(32, 18, 26, 0.34);
  display: flex;
  align-items: flex-end;
}

.pfeed-sheet-box {
  width: 100%;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}

.pfeed-sheet-btn {
  display: block;
  width: 100%;
  padding: 14px 12px;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 700;
  color: #4a3a42;
  text-align: left;
  cursor: pointer;
}

.pfeed-sheet-btn + .pfeed-sheet-btn { border-top: 1px solid #f3e7ec; }
.pfeed-sheet-cancel { color: var(--muted, #6f5a64); text-align: center; }

/* ---- 引用元のカード ---- */
.pfeed-quote {
  display: block;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid #efdde5;
  border-radius: 14px;
  background: #fffdfe;
  color: inherit;
  text-decoration: none;
}

.pfeed-quote-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.pfeed-quote-avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  object-fit: cover;
}

.pfeed-quote-name { font-size: 12.5px; font-weight: 700; color: #3f3037; }
.pfeed-quote-handle { font-size: 12px; color: var(--muted, #6f5a64); }

.pfeed-quote-body {
  font-size: 13px;
  line-height: 1.55;
  color: #4a3a42;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pfeed-quote-image {
  display: block;
  width: 100%;
  margin-top: 8px;
  border-radius: 10px;
}


/* 全画面ビューアの中の引用(2026-09-24)。背景が暗いので、白い面ではなく
   うっすら明るい面にして、文字を明るくする。 */
.reel .pfeed-quote {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.28);
}

.reel .pfeed-quote-name { color: #fff; }
.reel .pfeed-quote-handle { color: rgba(255, 255, 255, 0.72); }
.reel .pfeed-quote-body { color: rgba(255, 255, 255, 0.92); }

/* 右の操作列(.preel-rail)と重ならないようにする(2026-09-24)。
   引用カードを差し込んだことで、列の下に潜り込んでいた。 */
.reel .pfeed-quote { margin-right: 58px; }

/* X での反応(2026-09-25、ユーザー指示「ポストの下にあるコメント、リポスト、
   いいねは横にアイコンつけて縦に並べて表示」)。
   プロフィールの .x-follow-stats と同じ作り - 行頭に X の印を置き、
   AIRIS の行(.pfeed-actions)のすぐ下へ重ねる。**合算しない**:
   AIRIS のいいねと X のいいねは別の母集団なので、行を分けて両方見せる。
   押すと元の投稿へ行く。数字は取り込みのときの控えで、押せるボタンでは
   ない - ここから X へいいねはできないため、button にしない。 */
/* 上の AIRIS の行と同じ列割り(2026-09-26、ユーザー指示)。最後の列
   (共有)はこの行には無いので空く。間隔は上の行と見分けが付くだけ開ける。 */
.pfeed-xstats {
  display: grid;
  /* 上の行と **同じ列割り**(2026-09-26)。最後の 39px はこの行には
     中身が無いので空くだけ。ここを変えると 3 つの位置が上とずれる。 */
  grid-template-columns: 15px repeat(3, 1fr) 39px;
  align-items: center;
  gap: 8px;
  /* 上の行のボタンは下に 8px の padding を持つので、ここを 2px にすると
     絵と絵のあきは 10px(2026-09-26、ユーザー指示「もう少し近づけて」)。
     12px のときは 20px あいていて、別の段のように見えていた。 */
  margin: 2px 0 0; padding: 0;
  /* 字は上の行(.pfeed-act)と同じ(2026-09-26、ユーザー指示
     「AIRISとXでフォントと文字色同じにして」)。並んで出る 2 段なので、
     片方だけ細く薄いと別のものに見える。 */
  font-size: 12.5px; font-weight: 700; color: var(--muted, #6f5a64);
  text-decoration: none;
}
.pfeed-xstats .x-follow-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex-shrink: 0;
  background: #0f1419; border-radius: 4px; color: #fff;
}
.pfeed-xstats .x-follow-mark svg {
  width: 100%; height: 100%;
  box-sizing: border-box; padding: 2.5px;
  fill: currentColor;
}
/* 上のボタン(.pfeed-act は padding 8px 9px)と印の左端を合わせる
   (2026-09-26)。左に 9px 入れないと、上下で絵が 9px ずれる。 */
.pfeed-xstat {
  display: inline-flex; align-items: center; gap: 2px;
  justify-self: start;
  padding: 0 9px;
}
.pfeed-xstat-num { font-variant-numeric: tabular-nums; }
.pfeed-xstats:active { opacity: 0.6; }