/* ── projects/index.html 페이지 전용 스타일 ── */

section { padding-top: 2.5rem; }

.year-group { margin-bottom: 3rem; }
.year-label {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.7rem; color: #747474; margin-bottom: 1.25rem;
  padding-bottom: .75rem; border-bottom: 2px solid #80350E;
  display: flex; align-items: center; gap: .75rem;
}
.year-count {
  font-size: .75rem; font-weight: 600; color: #80350E;
  background: var(--white); border-radius: 8px;
  border: 2px solid #80350E;
  padding: .2rem .65rem;
}
.proj-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
.proj-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 6px; padding: 1.5rem;
  transition: all var(--transition); position: relative;
}
.proj-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .85rem; }
.proj-period {
  font-size: .9rem; font-weight: 600; color: var(--gray-500);
  background: var(--gray-100); border-radius: var(--radius-full);
  padding: .2rem .65rem; white-space: nowrap; flex-shrink: 0;
}
.proj-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--navy); line-height: 1.5; margin-bottom: .4rem; }
.proj-agency { font-size: 1rem; color: var(--gray-500); margin-bottom: .6rem; }
.proj-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; margin-top: .75rem; }
.proj-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; }
.proj-bottom .proj-status { margin-top: 0; }
.proj-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .88rem; font-weight: 600; color: #80350E;
  border: 1.5px solid #80350E; border-radius: var(--radius-full);
  padding: .2rem .7rem; text-decoration: none;
  transition: all .15s ease;
}
.proj-link:hover { background: #80350E; color: #fff; }
.proj-status::before { content: '●'; font-size: .55rem; }
.active { color: #16a34a; } .active::before { color: #16a34a; }
.completed { color: var(--gray-400); } .completed::before { color: var(--gray-400); }

@media (max-width: 640px) { .proj-grid { grid-template-columns: 1fr; } }