/* areas.html 전용 — 센터 정렬 히어로 + 태그 그리드 */
:root {
  --color-primary: hsl(96 28% 28%);
  --color-secondary: hsl(96 20% 40%);
  --color-accent: hsl(18 64% 52%);
  --color-bg: #F7FAF6;
  --color-surface: #FFFFFF;
  --color-text: #212A1E;
  --color-text-muted: #5C6558;
  --color-border: rgba(29, 46, 21, 0.14);
  --font-display: 'Gmarket Sans', 'Pretendard', sans-serif;
  --font-body: 'Pretendard', sans-serif;
}

.hero--center { text-align: center; }
.hero--center .hero__sub { margin-left: auto; margin-right: auto; }

.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.tag-grid a,
.tag-grid span {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.tag-grid a {
  color: var(--color-primary);
  font-weight: 600;
  border-color: var(--color-accent);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tag-grid a:hover {
  background: var(--color-accent);
  color: #fff;
}
.tag-grid .tag--soon {
  color: var(--color-text-muted);
  border-style: dashed;
}

.area-imgset { display: flex; justify-content: center; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin: 0 auto; max-width: 760px; }
.area-imgset figure { margin: 0; width: 260px; text-align: center; }
.area-imgset img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-md); display: block; }
.area-imgset figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); letter-spacing: 0.1em; color: var(--color-accent); font-weight: 600; }