/* ===================================================================
   components.list-page.css - 리스트/아카이브 공통 스타일
   =================================================================== */

.list-page-content { padding-top: var(--list-page-content-pt, calc(var(--nav-height, 88px) + var(--spacing-32))); padding-bottom: var(--list-page-content-pb, 11.25rem); background-color: var(--bg-primary); }

.list-page-header { margin-bottom: var(--spacing-20); }
.list-page-header h1 { margin-bottom: 0; }

.list-page-tabs { margin-top: calc(var(--spacing-20) * -0.5); margin-bottom: var(--spacing-8); }

.press-list { display: flex; flex-direction: column; gap: var(--spacing-20); }
.list-page-pagination { padding-top: var(--spacing-16); display: flex; justify-content: flex-end; }
.coomspace-list { display: flex; flex-direction: column; gap: var(--spacing-20); }

.press-row,
.coomspace-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
    row-gap: var(--spacing-20);
}

.page-header { margin-bottom: var(--spacing-20); }
.page-header h1 { margin-bottom: var(--spacing-4); }
.list-page-section { margin-bottom: var(--spacing-12); }
.list-page-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-6); row-gap: var(--spacing-20); margin-bottom: var(--spacing-12); }
.pagination-section { padding-top: var(--spacing-xl); display: flex; justify-content: flex-end; }

/* 반응형 */
@media (max-width: 1440px) {
  .list-page-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-6); row-gap: var(--spacing-20); }
  .press-row,
  .coomspace-row { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-6); row-gap: var(--spacing-20); }
}
@media (max-width: 480px) {
  .list-page-content { padding-top: calc(var(--nav-height, 88px) + var(--spacing-8)); padding-bottom: var(--spacing-12); }
  .list-page-header { margin-bottom: var(--spacing-8); }
  .list-page-tabs { margin-top: calc(var(--spacing-8) * -0.5); margin-bottom: var(--spacing-4); }
  
  .list-page-grid,
  .list-page-grid.grid--3-cols,
  .list-page-grid.grid--4-cols { grid-template-columns: 1fr; row-gap: var(--spacing-16); }
  .press-row,
  .coomspace-row { grid-template-columns: 1fr; row-gap: var(--spacing-16); }
  .past-popup-grid { grid-template-columns: 1fr; row-gap: var(--spacing-16); }
  
  .list-page-pagination { padding-top: var(--spacing-8); }
  .pagination-section { padding-top: var(--spacing-8); }
}