<div class="dc-cmp" role="region" aria-label="요금제 비교 표" tabindex="0">
<table class="dc-cmp__table">
<caption class="dc-cmp__cap">요금제별로 되는 것과 안 되는 것</caption>
<thead>
<tr>
<th scope="col" class="dc-cmp__corner">기능</th>
<th scope="col">무료</th>
<th scope="col" class="dc-cmp__best">프로</th>
<th scope="col">팀</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">만들 수 있는 문서</th>
<td>3개까지</td>
<td class="dc-cmp__best">무제한</td>
<td>무제한</td>
</tr>
<tr>
<th scope="row">워터마크 없는 내보내기</th>
<td><span class="dc-cmp__no" aria-hidden="true">–</span><span class="dc-sr">안 됩니다</span></td>
<td class="dc-cmp__best"><span class="dc-cmp__yes" aria-hidden="true">✓</span><span class="dc-sr">됩니다</span></td>
<td><span class="dc-cmp__yes" aria-hidden="true">✓</span><span class="dc-sr">됩니다</span></td>
</tr>
<tr>
<th scope="row">지난 버전 보관</th>
<td>7일</td>
<td class="dc-cmp__best">30일</td>
<td>180일</td>
</tr>
<tr>
<th scope="row">권한 나누기</th>
<td><span class="dc-cmp__no" aria-hidden="true">–</span><span class="dc-sr">안 됩니다</span></td>
<td class="dc-cmp__best"><span class="dc-cmp__no" aria-hidden="true">–</span><span class="dc-sr">안 됩니다</span></td>
<td><span class="dc-cmp__yes" aria-hidden="true">✓</span><span class="dc-sr">됩니다</span></td>
</tr>
<tr>
<th scope="row">문의 답변</th>
<td>메일</td>
<td class="dc-cmp__best">평일 당일</td>
<td>전담 담당자</td>
</tr>
</tbody>
</table>
</div>
.dc-cmp { overflow-x:auto; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); font-family:var(--dc-font); }
.dc-cmp__table { width:100%; min-width:520px; border-collapse:separate; border-spacing:0; font-size:14px; }
.dc-cmp__cap { padding:var(--dc-3) var(--dc-4); text-align:left; font-size:14px; font-weight:700; color:var(--dc-text); }
.dc-cmp__table th, .dc-cmp__table td { padding:var(--dc-3) var(--dc-4); border-top:1px solid var(--dc-line); text-align:left; vertical-align:top; color:var(--dc-text-sub); }
.dc-cmp__table thead th { background:var(--dc-sunken); color:var(--dc-text); font-size:13px; white-space:nowrap; }
.dc-cmp__table tbody th { color:var(--dc-text); font-weight:600; }
.dc-cmp__table tbody th, .dc-cmp__corner { position:sticky; left:0; z-index:1; background:var(--dc-surface); box-shadow:1px 0 0 var(--dc-line); }
.dc-cmp__best { background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-cmp__yes { color:var(--dc-ok); font-weight:700; }
.dc-cmp__no { color:var(--dc-text-mute); }