<div class="dc-price">
<div class="dc-price__card">
<h3 class="dc-price__name">무료</h3>
<p class="dc-price__cost"><span class="dc-price__num">0원</span></p>
<p class="dc-price__note">혼자 써 보기 시작할 때</p>
<ul class="dc-price__list">
<li class="dc-price__row"><span class="dc-price__tick" aria-hidden="true">✓</span>문서 3개까지</li>
<li class="dc-price__row"><span class="dc-price__tick" aria-hidden="true">✓</span>PDF 내보내기</li>
<li class="dc-price__row"><span class="dc-price__tick" aria-hidden="true">✓</span>메일 문의</li>
</ul>
<button type="button" class="dc-price__btn">무료로 시작</button>
</div>
<div class="dc-price__card is-best">
<p class="dc-price__flag">가장 많이 고르는 요금제</p>
<h3 class="dc-price__name">프로</h3>
<p class="dc-price__cost"><span class="dc-price__num">12,000원</span><span class="dc-price__per">/ 월</span></p>
<p class="dc-price__note">혼자 일하지만 결과를 내보내야 할 때</p>
<ul class="dc-price__list">
<li class="dc-price__row"><span class="dc-price__tick" aria-hidden="true">✓</span>문서 무제한</li>
<li class="dc-price__row"><span class="dc-price__tick" aria-hidden="true">✓</span>워터마크 없는 내보내기</li>
<li class="dc-price__row"><span class="dc-price__tick" aria-hidden="true">✓</span>버전 30일 보관</li>
</ul>
<button type="button" class="dc-price__btn dc-price__btn--primary">프로 시작하기</button>
</div>
<div class="dc-price__card">
<h3 class="dc-price__name">팀</h3>
<p class="dc-price__cost"><span class="dc-price__num">9,000원</span><span class="dc-price__per">/ 명 · 월</span></p>
<p class="dc-price__note">같은 문서를 여러 사람이 고칠 때</p>
<ul class="dc-price__list">
<li class="dc-price__row"><span class="dc-price__tick" aria-hidden="true">✓</span>프로의 모든 기능</li>
<li class="dc-price__row"><span class="dc-price__tick" aria-hidden="true">✓</span>권한 나누기</li>
<li class="dc-price__row"><span class="dc-price__tick" aria-hidden="true">✓</span>세금계산서 발행</li>
</ul>
<button type="button" class="dc-price__btn">팀으로 시작</button>
</div>
</div>
.dc-price { display:flex; flex-wrap:wrap; align-items:stretch; gap:var(--dc-4); font-family:var(--dc-font); }
.dc-price__card { flex:1 1 210px; display:flex; flex-direction:column; gap:var(--dc-2); padding:var(--dc-5); border:1px solid var(--dc-line); border-radius:var(--dc-r-lg); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-price__card.is-best { border-color:var(--dc-brand); box-shadow:var(--dc-sh-2); }
.dc-price__flag { margin:0; align-self:flex-start; padding:var(--dc-1) var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:12px; font-weight:700; }
.dc-price__name { margin:0; font-size:14px; font-weight:700; color:var(--dc-text-sub); }
.dc-price__cost { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--dc-1); margin:0; }
.dc-price__num { font-size:26px; font-weight:800; color:var(--dc-text); font-variant-numeric:tabular-nums; }
.dc-price__per { font-size:13px; color:var(--dc-text-mute); }
.dc-price__note { margin:0; font-size:13px; line-height:1.6; color:var(--dc-text-sub); }
.dc-price__list { display:flex; flex-direction:column; gap:var(--dc-2); margin:var(--dc-3) 0 var(--dc-4); padding:0; list-style:none; }
.dc-price__row { display:flex; gap:var(--dc-2); font-size:13px; line-height:1.5; color:var(--dc-text-sub); }
.dc-price__tick { flex:0 0 auto; color:var(--dc-ok); font-weight:700; }
.dc-price__btn { margin-top:auto; min-height:44px; padding:0 var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font:inherit; font-weight:600; cursor:pointer; }
.dc-price__btn:hover { background:var(--dc-sunken); }
.dc-price__btn--primary { border-color:var(--dc-brand); background:var(--dc-brand); color:var(--dc-text-on); }
.dc-price__btn--primary:hover { background:var(--dc-brand-hi); border-color:var(--dc-brand-hi); }