/* p22.css — 휴게소철거현장(휴게소 전용 사례 아카이브) · 그래파이트 앰버 · 사례카드+필터칩 아키타입 */
:root{
  --accent:#31343A;
  --sub:#F0B429;
  --bg:#F4F4F5;
  --surface:#FFFFFF;
  --line:#E2E2E5;
  --display-font:'SUIT',var(--font-fallback);
  --body-font:var(--font-fallback);
  --label-font:'Bebas Neue',var(--font-fallback);
}
@font-face{
  font-family:'SUIT';
  src:local('SUIT');
  font-weight:700;
  font-display:swap;
}
.hero-eyebrow{font-family:var(--label-font);letter-spacing:.16em;}

/* 사례 카드 그리드 */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.case-card{
  position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;
  display:flex;flex-direction:column;gap:10px;
}
.case-card svg{width:26px;height:26px;color:var(--accent);}
.case-thumb{margin:-24px -24px 0;border-radius:14px 14px 0 0;overflow:hidden;aspect-ratio:16/10;}
.case-thumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;}
.case-badge{
  align-self:flex-start;background:var(--sub);color:var(--accent);font-size:.74rem;font-weight:700;
  padding:4px 12px;border-radius:20px;
}
.case-card h3{font-family:var(--display-font);font-size:1.02rem;font-weight:700;color:#1f2328;}
.case-card p{font-size:.88rem;color:#5a626b;line-height:1.7;}
.case-card .case-link{margin-top:auto;padding-top:4px;font-size:.82rem;font-weight:700;color:var(--accent);}

/* 필터칩: 브랜드 기본 스타일 위 간격만 보정 */
.filter-chips{justify-content:flex-start;}

.diagram-wrap svg text{font-family:var(--font-fallback);}