<header class="dc-ab">
<button class="dc-ab__btn" type="button">
<span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
</button>
<h1 class="dc-ab__title">주문 상세</h1>
<div class="dc-ab__actions">
<button class="dc-ab__btn" type="button">
<span aria-hidden="true">⌕</span><span class="dc-sr">검색</span>
</button>
<button class="dc-ab__btn" type="button">
<span aria-hidden="true">⋮</span><span class="dc-sr">더보기</span>
</button>
</div>
</header>
.dc-ab {
display: flex; align-items: center; gap: var(--dc-1);
padding: var(--dc-2);
padding-top: calc(var(--dc-safe-top) + var(--dc-2));
background: var(--dc-surface);
border-bottom: 1px solid var(--dc-line);
font-family: var(--dc-font);
}
.dc-ab__btn {
flex: 0 0 auto;
display: grid; place-items: center;
width: 44px; height: 44px;
border: 0; border-radius: var(--dc-r-full);
background: transparent; color: var(--dc-text);
font-size: 20px; line-height: 1;
transition: background var(--dc-fast);
}
.dc-ab__btn:active { background: var(--dc-sunken); }
.dc-ab__title {
flex: 1 1 auto; min-width: 0;
margin: 0; padding: 0 var(--dc-1);
font-size: 17px; font-weight: 700; letter-spacing: -.01em;
color: var(--dc-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-ab__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.dc-ab__spacer { flex: 0 0 auto; width: 44px; height: 44px; }
.dc-ab--center .dc-ab__title { text-align: center; }
.dc-ab__text {
flex: 0 0 auto;
min-width: 44px; height: 44px; padding: 0 var(--dc-3);
border: 0; border-radius: var(--dc-r-sm);
background: transparent; color: var(--dc-brand-text);
font-family: inherit; font-size: 15px; font-weight: 700;
transition: background var(--dc-fast);
}
.dc-ab__text:active { background: var(--dc-brand-soft); }