<div class="dc-wrap">
<p class="dc-wrap__note">컨테이너 — 최대 너비 1120px, 양옆 여백 24px</p>
<div class="dc-grid">
<div class="dc-grid__cell dc-grid__cell--12">머리말 · 12열</div>
<div class="dc-grid__cell dc-grid__cell--8">본문 · 8열</div>
<div class="dc-grid__cell dc-grid__cell--4">곁가지 · 4열</div>
<div class="dc-grid__cell dc-grid__cell--4">카드 · 4열</div>
<div class="dc-grid__cell dc-grid__cell--4">카드 · 4열</div>
<div class="dc-grid__cell dc-grid__cell--4">카드 · 4열</div>
</div>
</div>
.dc-wrap { width:100%; max-width:1120px; margin-inline:auto; padding-inline:var(--dc-6); font-family:var(--dc-font); }
.dc-wrap--narrow { max-width:680px; }
.dc-wrap__note { margin:0 0 var(--dc-3); font-size:12px; color:var(--dc-text-mute); }
.dc-wrap__text { margin:0 0 var(--dc-3); font-size:15px; line-height:1.7; color:var(--dc-text-sub); }
.dc-grid { display:grid; margin:0; padding:0; list-style:none; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--dc-4); }
.dc-grid--auto { grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.dc-grid__cell { display:flex; align-items:center; justify-content:center; min-height:64px; padding:var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-sunken); font-size:13px; color:var(--dc-text-sub); text-align:center; }
.dc-grid__cell--12 { grid-column:span 12; }
.dc-grid__cell--8 { grid-column:span 8; }
.dc-grid__cell--4 { grid-column:span 4; }
@media (max-width:700px) {
.dc-wrap { padding-inline:var(--dc-4); }
.dc-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
.dc-grid--auto { grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); }
.dc-grid__cell--12, .dc-grid__cell--8 { grid-column:span 4; }
.dc-grid__cell--4 { grid-column:span 2; }
}