반응형 카드 그리드

<section class="card-grid-section">
  <div class="section-header">
    <h2 class="section-title">카드 그리드</h2>
    <p class="section-desc">반응형 카드 레이아웃 예시</p>
  </div>

  <div class="card-grid">
    <article class="card">
      <div class="card-badge">신규</div>
      <div class="card-icon">🚀</div>
      <h3 class="card-title">카드 제목</h3>
      <p class="card-desc">카드 설명 텍스트가 여기에 들어갑니다. 두 줄로 제한됩니다.</p>
      <div class="card-tags">
        <span class="tag">태그1</span>
        <span class="tag">태그2</span>
      </div>
      <div class="card-footer">
        <span class="card-meta">2026.05.05</span>
        <a href="#" class="card-action">자세히 →</a>
      </div>
    </article>
    <!-- 카드 반복 -->
  </div>
</section>

<style>
:root {
  --bg: #0d1117; --surface: #161b22; --surface-2: #21262d;
  --text: #e6edf3; --text-muted: #8b949e; --border: #30363d;
  --accent: #58a6ff; --accent-bg: #1f6feb; --success: #3fb950;
  --radius: 12px; --transition: 0.15s ease;
}

*, *::before, *::after { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; padding: 2rem; }

.section-header { margin-bottom: 1.5rem; }
.section-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
.section-desc { color: var(--text-muted); font-size: 0.9375rem; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.625rem;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.card-badge {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 0.6875rem; font-weight: 600;
  background: var(--success); color: #000;
  padding: 0.125rem 0.5rem; border-radius: 999px;
}

.card-icon { font-size: 2rem; line-height: 1; }
.card-title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; }
.card-desc {
  font-size: 0.8125rem; color: var(--text-muted); margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: auto; }
.tag {
  font-size: 0.75rem; font-weight: 500; padding: 0.15rem 0.5rem;
  border-radius: 999px; background: var(--surface-2);
  color: var(--text-muted); border: 1px solid var(--border);
}

.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.75rem; border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}
.card-meta { font-size: 0.75rem; color: var(--text-muted); font-family: monospace; }
.card-action { font-size: 0.8125rem; color: var(--accent); text-decoration: none; font-weight: 500; }
.card-action:hover { color: #79c0ff; }
</style>