<ul class="dc-noti">
<li class="dc-noti__item dc-noti__item--unread">
<a class="dc-noti__row" href="#">
<span class="dc-noti__ico dc-noti__ico--ok" aria-hidden="true">✓</span>
<span class="dc-noti__body">
<span class="dc-noti__title">3월 급여 2,480,000원이 들어왔습니다</span>
<span class="dc-noti__text">명세서에서 공제 내역을 확인할 수 있습니다</span>
<span class="dc-noti__time">12분 전</span>
</span>
<span class="dc-sr">안 읽음</span>
<span class="dc-noti__dot" aria-hidden="true"></span>
</a>
</li>
<li class="dc-noti__item dc-noti__item--unread">
<a class="dc-noti__row" href="#">
<span class="dc-noti__ico dc-noti__ico--warn" aria-hidden="true">!</span>
<span class="dc-noti__body">
<span class="dc-noti__title">안전교육 이수 기한이 3일 남았습니다</span>
<span class="dc-noti__text">3월 20일까지 듣지 않으면 현장 출입이 막힙니다</span>
<span class="dc-noti__time">2시간 전</span>
</span>
<span class="dc-sr">안 읽음</span>
<span class="dc-noti__dot" aria-hidden="true"></span>
</a>
</li>
<li class="dc-noti__item dc-noti__item--read">
<a class="dc-noti__row" href="#">
<span class="dc-noti__ico" aria-hidden="true">◇</span>
<span class="dc-noti__body">
<span class="dc-noti__title">최영호 소장님이 메시지를 보냈습니다</span>
<span class="dc-noti__text">내일 아침 8시에 자재 들어옵니다</span>
<span class="dc-noti__time">어제</span>
</span>
</a>
</li>
</ul>
.dc-noti {
margin: 0; padding: 0; list-style: none;
background: var(--dc-surface);
font-family: var(--dc-font);
}
.dc-noti__item + .dc-noti__item { border-top: 1px solid var(--dc-line); }
.dc-noti__item--unread { background: var(--dc-brand-soft); }
.dc-noti__row {
display: flex; align-items: flex-start; gap: var(--dc-3);
min-height: 72px; padding: var(--dc-4);
color: inherit; text-decoration: none;
transition: background var(--dc-fast);
}
.dc-noti__ico {
flex: 0 0 auto; display: grid; place-items: center;
width: 36px; height: 36px; border-radius: var(--dc-r-full);
background: var(--dc-sunken); color: var(--dc-text-sub);
font-size: 16px; font-weight: 700;
}
.dc-noti__ico--ok { background: var(--dc-ok-soft); color: var(--dc-ok); }
.dc-noti__ico--warn { background: var(--dc-warn-soft); color: var(--dc-warn); }
.dc-noti__ico--info { background: var(--dc-info-soft); color: var(--dc-info); }
.dc-noti__body {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column; gap: var(--dc-1);
}
.dc-noti__title { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--dc-text); }
.dc-noti__text { font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-noti__time { font-size: 11px; color: var(--dc-text-mute); }
.dc-noti__dot {
flex: 0 0 auto; width: 8px; height: 8px; margin-top: var(--dc-2);
border-radius: var(--dc-r-full); background: var(--dc-danger);
}
.dc-noti__acts { display: flex; gap: var(--dc-2); margin-top: var(--dc-2); }
.dc-noti__btn {
min-height: 44px; padding: 0 var(--dc-4);
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text);
font-family: inherit; font-size: 14px; font-weight: 700;
}
.dc-noti__btn--main {
border-color: var(--dc-brand);
background: var(--dc-brand); color: var(--dc-text-on);
}
.dc-noti__item--read .dc-noti__title { font-weight: 400; color: var(--dc-text-sub); }