.list-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.list-card {
  padding: 12px 16px;
  background: var(--color-bg-white);
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition-hover);
}

.list-card:has(:focus-visible) {
  background: var(--color-bg-hover);
}

@media (prefers-reduced-motion: reduce) {
  .list-card {
    transition: none;
  }
}

.list-card-inner {
  gap: 10px;
}

@media (min-width: 768px) {
  .list-card-inner {
    gap: 12px;
  }
}

.list-card-left {
  flex: 0 0 44px;
}

@media (min-width: 768px) {
  .list-card-left {
    flex: 0 0 56px;
  }
}

.list-card-right {
  flex: 1 1 auto;
  min-width: 0;
}

.list-card-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.list-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .list-card-avatar {
    width: 48px;
    height: 48px;
  }
}

.list-card-avatar-link {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
}

/* アバターの見た目は変えず、タップ判定のみ幅・高さとも 44px 以上へ広げる
   （円形の当たり判定が四角になる） */
.list-card-avatar-link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

@media (hover: hover) {
  .list-card-avatar-link:hover .list-card-avatar {
    opacity: var(--opacity-hover);
  }
}

.list-card-body {
  padding: 0;
}

/* 名前リンク・「その他の操作」の ::after が本文へ重ならないよう間隔を広げる
   （本文・画像の上マージンとは相殺される） */
.list-card-header + .list-card-body {
  margin-top: 12px;
}

/* 名前リンクの ::after を overflow: hidden の自身に切られないよう、padding を足して
   同量の負の margin で打ち消す（見た目・レイアウト上の高さは変わらない） */
.list-card-name {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 0;
  padding-block: 12px;
  margin-block: -12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-card-name-link {
  position: relative;
  color: inherit;
  text-decoration: none;
}

/* 文字の見た目は変えず、タップ判定のみ 44px へ広げる。短い名前は max(100%, 44px) で
   左端から右へ伸ばす（右の時刻・「その他の操作」へは .list-card-name の overflow で張り出さない） */
.list-card-name-link::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: max(100%, 44px);
  height: 44px;
  transform: translateY(-50%);
}

@media (hover: hover) {
  .list-card-name-link:hover {
    opacity: var(--opacity-hover);
  }
}

.list-card-time {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-left: 0;
}

.list-card-dropdown-toggle {
  position: relative;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

/* 見た目は変えず、タップ判定のみ 44×44px へ広げる（.nft-card-menu-toggle と同じ考え方）。
   .dropdown-toggle クラスは付いていないため ▼ 描画用の ::after とは衝突しない */
.list-card-dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

@media (hover: hover) {
  .list-card-dropdown-toggle:hover {
    opacity: var(--opacity-hover);
  }
}

.list-card-dropdown-toggle:focus-visible {
  opacity: var(--opacity-hover);
}

.list-card-dropdown-menu {
  font-size: 0.9rem;
}

/* 作品カードのタイトル行（タイトル＋操作メニュー）。作品画像はカードの主役のため、
   操作メニューは画像へ重ねず、タイトルの右へ常に一定サイズで表示する。
   タイトル側だけを縮めて1行省略にし、メニューのトグルは縮ませない */
.nft-card-title {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  /* Bootstrapの.card-titleはmargin-bottomを持つ。この余白は行内では下方向にしか
     付かないため、.nft-card-title-row（align-items: center）がこの要素を箱ごと
     中央寄せする際に見た目の中心が上へずれ、margin無しの.nft-card-menu（アイコン）
     側と上下位置が揃わなくなる。room-card-title（room.css）と同じくmargin自体を
     消し、行内の全要素が同じ土俵（マージン無しの箱）で中央寄せされるようにする */
  margin: 0;
}

/* .card-title-link・.card-title-link-icon自体はnft.css側の定義のため、ここでは
   タイトル行に限定した拡張（縮小可否）のみ行う */
.nft-card-title .card-title-link {
  min-width: 0;
}

.nft-card-title .card-title-link-icon {
  flex-shrink: 0;
}

.nft-card-title-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nft-card-menu {
  flex-shrink: 0;
}

.nft-card-menu-toggle {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: relative;
}

/* 見た目の32pxは維持しつつ、タップ判定のみ44px（Luxucomのタップ領域の基準）へ広げる。
   .common-info-sub-action（common.css）と同じ考え方 */
.nft-card-menu-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

@media (hover: hover) {
  .nft-card-menu-toggle:hover {
    opacity: var(--opacity-hover);
  }
}

.nft-card-menu-toggle:focus-visible {
  opacity: var(--opacity-hover);
}

/* アイコンのfont-sizeは.card-title-link-icon（タイトル右の外部リンクアイコン）と
   揃える必要があるため、nft.css側で.card-title-link-iconとまとめて定義する
   （.nft-card-menu-toggleを使う画面は常にnft.cssも読み込むため参照できる） */

/* 各項目のテキスト（「サロンで紹介する」等）を折り返さず1行に収める。
   包含ブロック（.nft-card-menu、トグル分の32px）基準の max-width: 100% は
   その32pxへ潰れる回帰の原因になったため使わない。.tooltip・
   .room-edit-media-menu .dropdown-item と同じ「min(固定上限, 画面幅基準)」の
   組み合わせで、内容（最長項目）に合わせて広がりつつ画面外へは出ないようにする */
.nft-card-menu .dropdown-menu {
  width: max-content;
  max-width: min(20rem, calc(100vw - var(--space-3) * 2));
}

/* 削除は破壊的操作のため、設定画面のアカウント削除・ルーム編集のルーム削除と同じ
   くすんだ赤で示す */
.nft-card-menu .dropdown-item.nft-delete-btn {
  color: var(--color-danger-muted);
}

.list-card-text {
  margin: 0.3rem 0;
}

/* 「続きを読む／閉じる」は、::after ではなくボタン本体の高さを 44px にする。::after で本文側へ
   広げると、本文の最終行にある URL の当たり判定を奪うため。文字は縦中央のまま（本文・下の
   リアクションとの間隔が均等になる）。vertical-align: top で行ボックスの余白を作らない */
.list-card .card-desc-toggle {
  min-height: 44px;
  vertical-align: top;
}

.list-card .card-desc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-card-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* リアクションボタンの ::after が本文へ食い込まないよう、間隔を
   .salon-reaction-group の padding-block 以上にする（従来 8px） */
.list-card-footer {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-cards-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  flex-direction: column;
  gap: 8px;
}

.list-cards-footer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 32px;
}