복사
<div class="dc-empty">
<span class="dc-empty__art" aria-hidden="true">▣</span>
<h2 class="dc-empty__title">아직 출근 기록이 없어요</h2>
<p class="dc-empty__body">현장에 도착해서 출근 버튼을 누르면 하루하루 기록이 여기에 쌓입니다.</p>
<button class="dc-empty__cta" type="button">출근 기록 남기기</button>
<button class="dc-empty__sub" type="button">기록하는 방법 보기</button>
</div>
복사
.dc-empty {
display: flex; flex-direction: column; align-items: center;
gap: var(--dc-3);
padding: var(--dc-7) var(--dc-5) var(--dc-6);
background: var(--dc-bg);
font-family: var(--dc-font);
text-align: center;
}
.dc-empty__art {
display: grid; place-items: center;
width: 72px; height: 72px;
border-radius: var(--dc-r-full);
background: var(--dc-sunken);
color: var(--dc-text-mute);
font-size: 28px; line-height: 1;
}
.dc-empty__art--warn { background: var(--dc-danger-soft); color: var(--dc-danger); font-weight: 700; }
.dc-empty__title {
margin: 0;
font-size: 17px; font-weight: 700; line-height: 1.4;
color: var(--dc-text);
}
.dc-empty__body {
max-width: 280px;
margin: calc(var(--dc-1) * -1) 0 var(--dc-1);
font-size: 14px; line-height: 1.6;
color: var(--dc-text-sub);
}
.dc-empty__cta {
width: 100%; max-width: 280px;
min-height: 48px; padding: 0 var(--dc-5);
border: 0; border-radius: var(--dc-r-md);
background: var(--dc-brand); color: var(--dc-text-on);
font-family: inherit; font-size: 15px; font-weight: 700;
transition: background var(--dc-fast);
}
.dc-empty__cta:active { background: var(--dc-brand-hi); }
.dc-empty__sub {
min-height: 44px; padding: 0 var(--dc-4);
border: 0; border-radius: var(--dc-r-sm);
background: transparent; color: var(--dc-brand-text);
font-family: inherit; font-size: 14px; font-weight: 700;
transition: background var(--dc-fast);
}
.dc-empty__sub:active { background: var(--dc-brand-soft); }