<dl class="dc-dl">
<div class="dc-dl__row">
<dt class="dc-dl__key">주문번호</dt>
<dd class="dc-dl__val">2026-0312-0087</dd>
</div>
<div class="dc-dl__row">
<dt class="dc-dl__key">주문자</dt>
<dd class="dc-dl__val">김도현<span class="dc-dl__note">010-1234-5678</span></dd>
</div>
<div class="dc-dl__row">
<dt class="dc-dl__key">결제 수단</dt>
<dd class="dc-dl__val">신용카드<span class="dc-dl__note">국민 1234 · 3개월 무이자</span></dd>
</div>
<div class="dc-dl__row">
<dt class="dc-dl__key">받는 곳</dt>
<dd class="dc-dl__val">경기도 화성시 동탄순환대로 1길 24, 삼성반도체 3공구 현장사무소</dd>
</div>
<div class="dc-dl__row">
<dt class="dc-dl__key">요청 사항</dt>
<dd class="dc-dl__val">—</dd>
</div>
</dl>
.dc-dl {
margin: 0; max-width: 560px;
font-family: var(--dc-font); font-size: 13px;
}
.dc-dl__row {
display: grid; grid-template-columns: 120px 1fr;
gap: var(--dc-4); align-items: start;
padding: var(--dc-3) 0;
border-bottom: 1px solid var(--dc-line);
}
.dc-dl__row:last-child { border-bottom: 0; }
.dc-dl__key { margin: 0; font-weight: 600; color: var(--dc-text-mute); }
.dc-dl__val { margin: 0; color: var(--dc-text); line-height: 1.6; }
.dc-dl__note {
display: block; margin-top: 2px;
font-size: 12px; color: var(--dc-text-sub);
}
.dc-dl--stacked .dc-dl__row { grid-template-columns: 1fr; gap: var(--dc-1); }
.dc-dl--actions .dc-dl__val {
display: flex; align-items: center; justify-content: space-between;
gap: var(--dc-3);
}
.dc-dl__action {
position: relative;
flex: 0 0 auto;
min-height: 32px; padding: 0 var(--dc-2);
border: 0; border-radius: var(--dc-r-xs);
background: transparent; color: var(--dc-brand-text);
font-family: inherit; font-size: 13px; font-weight: 700;
cursor: pointer;
}
.dc-dl__action::before { content: ""; position: absolute; inset: -6px; }
.dc-dl__action:hover { background: var(--dc-brand-soft); }
@media (max-width: 480px) {
.dc-dl__row { grid-template-columns: 1fr; gap: var(--dc-1); }
}