/* ===== 3列カード ===== */
#list.grid.cards{
  display:grid; gap:20px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1024px){ #list.grid.cards{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){  #list.grid.cards{ grid-template-columns:1fr;} }

/* ===== カード ===== */
#list.grid.cards .topic-card{
  background:#fff;
  border:3px solid #111;          /* 左右同じ太さ */
  border-radius:16px;
  box-shadow:6px 6px 0 #000;      /* 影追加 */
  padding:16px;
  position:relative;              /* 参照基準 */
  overflow:visible;               /* はみ出しOK（しっぽ用） */
}

/* ===== カード内 ===== */
#list.grid.cards .topic-card .topic-head{ display:flex; gap:8px; align-items:center; }
#list.grid.cards .topic-card .topic-hero{ display:flex; align-items:center; gap:10px; margin-top:8px; }
#list.grid.cards .topic-card .topic-avatar{
  width:64px; height:64px; border-radius:50%;
  border:3px solid #111; object-fit:cover; background:#fff;
}
#list.grid.cards .topic-card .topic-nick{ font-weight:900; }

/* ===== 吹き出し（左上▽／先端が枠外） ===== */
#list.grid.cards .topic-card .bubble{
  position:relative !important;
  display:inline-block;
  background:#fff; color:#111;
  border:3px solid #111 !important;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  overflow:visible;
}

/* ▼外側：黒三角（※未使用側をゼロにして▲を消す） */
#list.grid.cards .topic-card .bubble::after{
  content:"" !important;
  position:absolute !important;
  top:-21px !important;           /* 先端が枠外へ出る高さ */
  bottom:auto !important;         /* 既定の bottom を打ち消す（▲を防止） */
  left:14px !important;           /* バブル左上寄り（必要なら 10〜20px 調整） */
  width:0; height:0;
  border-left:10px solid transparent !important;
  border-right:10px solid transparent !important;
  border-bottom:18px solid #111 !important;  /* ▽（上向き） */
  border-top:0 !important;                   /* ▲（下向き）を完全無効化 */
  pointer-events:none;
  z-index:1;
}

/* ▼内側：白三角（外側より少し内側に重ねる） */
#list.grid.cards .topic-card .bubble::before{
  content:"" !important;
  position:absolute !important;
  top:-15px !important;           /* 外側より3px下 */
  bottom:auto !important;         /* 既定の bottom を打ち消す（▲を防止） */
  left:16px !important;           /* 外側より2px右 */
  width:0; height:0;
  border-left:8px solid transparent !important;
  border-right:8px solid transparent !important;
  border-bottom:15px solid #fff !important;  /* ▽（上向き） */
  border-top:0 !important;                   /* ▲（下向き）を完全無効化 */
  pointer-events:none;
  z-index:2;
}