<header class="dc-bh">
<div class="dc-bh__bar">
<button class="dc-bh__back" type="button">
<span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
</button>
<button class="dc-bh__act" type="button">
<span aria-hidden="true">⇪</span><span class="dc-sr">공유</span>
</button>
</div>
<h1 class="dc-bh__title">알림 설정</h1>
<p class="dc-bh__desc">푸시와 이메일을 따로 켜고 끌 수 있어요. 중요한 배송 알림은 항상 보냅니다.</p>
</header>
.dc-bh {
padding: 0 var(--dc-4) var(--dc-5);
padding-top: var(--dc-safe-top);
background: var(--dc-surface);
border-bottom: 1px solid var(--dc-line);
font-family: var(--dc-font);
}
.dc-bh__bar {
display: flex; align-items: center; justify-content: space-between;
margin: 0 calc(-1 * var(--dc-2));
padding-top: var(--dc-1);
}
.dc-bh__back,
.dc-bh__act {
display: grid; place-items: center;
width: 44px; height: 44px;
border: 0; border-radius: var(--dc-r-full);
background: transparent; color: var(--dc-text);
line-height: 1; cursor: pointer;
transition: background var(--dc-fast);
}
.dc-bh__back { font-size: 24px; }
.dc-bh__act { font-size: 18px; }
.dc-bh__back:active,
.dc-bh__act:active { background: var(--dc-sunken); }
.dc-bh__title {
margin: var(--dc-3) 0 0;
font-size: 28px; font-weight: 800; line-height: 1.25;
letter-spacing: -.02em; color: var(--dc-text);
}
.dc-bh__desc {
margin: var(--dc-2) 0 0;
font-size: 14px; line-height: 1.6; color: var(--dc-text-sub);
max-width: 34em;
}
.dc-bh--compact { padding-bottom: var(--dc-2); }
.dc-bh--compact .dc-bh__bar { align-items: center; gap: var(--dc-1); }
.dc-bh--compact .dc-bh__title {
flex: 1 1 auto; min-width: 0;
margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}