/* ===================================================================
   TOPの「最新の恋愛相談」カード（TOP改修 11・2026-09-10）
   出典: Figma Make src/App.tsx L460-500 / src/index.css の実測値
     リスト   flex-col gap-2（8px）
     カード   border 1px #e0e0e0 / radius 16 / bg #fff / overflow hidden
     内側     padding 14px 16px
     タイトル 15px 700 #1e1e1e / lh1.5 / mb6
     本文     13px #555 / lh1.7 / mb8 / 3行クランプ（PCは2行）/ word-break: break-all
     タグ     11px 700 ピンク / mb4
     メタ行   11px #777 / 左に日時・右にコメント数（ピンク太字＋アイコン12px）
     ボタン   flex gap-3(12px) mt-4(16px) mb-8(32px) / flex:1 / radius999 / 13px 0 / 13.5px 700
   ⚠️ アイコン画像・カテゴリバッジはモックに無いので出さない
   =================================================================== */
.gw-cslist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gw-cslist__card {
  display: block;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.gw-cslist__title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1e1e1e;
  line-height: 1.5;
  margin-bottom: 6px;
}

.gw-cslist__body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 8px;
  /* モック index.css の .post-body-clamp と同じ。日本語の長文が枠を割らないように */
  word-break: break-all;
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  .gw-cslist__body { -webkit-line-clamp: 2; }
}

.gw-cslist__tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--gwt-primary, #de4592);
  margin-bottom: 4px;
}

.gw-cslist__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #777;
}
.gw-cslist__comments {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  color: var(--gwt-primary, #de4592);
}
.gw-cslist__comments svg { display: block; }

/* CTA 2本 */
.gw-cslist__cta {
  display: flex;
  gap: 12px;
  margin: 16px 0 32px;
}
.gw-cslist__cta .gwt-btn { flex: 1; padding: 13px 0; }

/* gw-top-design の .gwt-btn が無い場面（TOP以外）でも最低限崩れないように */
.gw-cslist__cta a {
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 400px) {
  /* 幅の狭い端末ではボタンを縦に */
  .gw-cslist__cta { flex-direction: column; }
}