/* areas.html 전용 — 스톤 그리드 인덱스 */
:root {
  --color-primary: #33302B;
  --color-secondary: #6E7B6A;
  --color-accent: #6E7B6A;
  --color-bg: #F7F6F3;
  --color-surface: #EDECE7;
  --color-text: #33302B;
  --color-text-muted: #6B6659;
  --color-border: #BFC5B8;
  --font-display: 'Syne', 'Hahmlet', sans-serif;
  --font-body: 'Noto Sans KR', sans-serif;
}

.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.area-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}
.area-card__arrow svg { width: 18px; height: 18px; }
.area-empty {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
}
@media (max-width: 860px) { .area-grid { grid-template-columns: 1fr 1fr; } }