/* --- カード本体のベーススタイル --- */
.compact-link-card {
  border: 1px solid var(--accent-color);
  border-left-width: 6px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: all 0.25s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
}
.compact-link-card.single-card {
  max-width: 480px; /* 単独表示の時は幅を制限 */
}
.compact-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
.compact-link-card a { 
  text-decoration: none !important; 
  color: inherit !important; 
  display: flex; 
  flex-direction: column; 
  flex-grow: 1; 
}
.card-inner { display: flex; align-items: stretch; min-height: 80px; flex-grow: 1; }
.card-thumb { width: 110px; flex-shrink: 0; border-right: 1px solid #f0f0f0; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-body { 
  flex-grow: 1; 
  padding: 10px 14px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  overflow: hidden; 
  min-width: 0; /* 長いテキストでカードが横に伸びるのを防ぐ */
}
.card-text-content { 
  flex-grow: 1; 
  overflow: hidden; 
  margin-right: 8px; 
  min-width: 0; /* 長いテキストでカードが横に伸びるのを防ぐ */
}
.card-title { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.3; margin-bottom: 2px; color: #1a202c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-url-text { font-size: 0.7rem; color: #a0aec0; font-weight: 700; text-transform: uppercase; }
.card-arrow { width: 18px; height: 18px; color: #cbd5e0; transition: transform 0.2s ease, color 0.2s ease; flex-shrink: 0; }
.compact-link-card:hover .card-arrow { color: var(--accent-color); transform: translateX(3px); }

/* --- 複数展開（グリッド）用スタイル --- */
.link-card-grid-wrapper {
  max-width: 100%;
}
.link-card-grid {
  display: grid;
  /* minmax(0, 1fr) にすることで、中身が長くても均等な幅を維持します */
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 1.5rem;
  align-items: stretch;
}
.link-card-grid-item {
  display: flex;
  flex-direction: column;
  min-width: 0; /* グリッドアイテム自体が横に伸びるのを防ぐ */
}
.link-card-grid-item .compact-link-card {
  margin: 0; 
  max-width: 100%; /* グリッドアイテム内では幅いっぱい */
  flex-grow: 1; /* カード自体の高さを揃える */
}
.link-card-description {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #4a5568;
  line-height: 1.5;
  padding: 0 0.25rem;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 900px) {
  /* ここも minmax(0, 1fr) に修正 */
  .link-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .compact-link-card.single-card { max-width: 100%; }
  .link-card-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}