/* 소개 페이지 전용 — 이 페이지에서만 쓰는 레이아웃.
   패널·단계흐름·유무료 태그는 shared/css/panel.css 공용. */
.about-head { padding-bottom: 48px; }

/* 이용 흐름 카드에 유·무료 태그를 붙일 때 아래쪽에 붙게 */
.about-journey .step { display: flex; flex-direction: column; }
.about-journey .step p { flex: 1; margin-bottom: 14px; }
.about-journey .step .tag-free,
.about-journey .step .tag-paid { align-self: flex-start; }

.about-values { border-top: 1px solid var(--line); background: var(--surface); }
.about-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.about-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px 22px; }
.about-card h3 { font-size: 16px; font-weight: 700; color: var(--primary-dark); margin-bottom: 10px; }
.about-card p { font-size: 13.5px; color: var(--text-mute); line-height: 1.7; }
@media (max-width: 1000px) { .about-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .about-grid { grid-template-columns: 1fr; } }

.about-facts { padding-top: 72px; }