From 2b081eede7243ba35849daa12038ed9d55800f7f Mon Sep 17 00:00:00 2001
From: yabo0812 <yabo0812@gmail.com>
Date: Thu, 23 Oct 2025 19:33:11 +0900
Subject: [PATCH] =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B0=80?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EC=97=90=20D-day=20=EB=B0=B0=EC=A7=80=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=AC=B8=EC=84=9C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- D-day 배지 섹션 추가 (8. 배지 섹션 내)
- 5가지 D-day 상태별 배지 스타일 정의
  * .badge-dday (D-Day 오늘 마감)
  * .badge-warning (D-1~3 임박)
  * .badge-primary (D-4~7 여유)
  * .badge-secondary (D-8+ 충분)
  * .badge-overdue (D+N 지연)
- CSS 코드 예시 및 색상 체계 설명 포함

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 design/uiux/style-guide.md | 52 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/design/uiux/style-guide.md b/design/uiux/style-guide.md
index 9bd5e52..ce0bb0f 100644
--- a/design/uiux/style-guide.md
+++ b/design/uiux/style-guide.md
@@ -333,6 +333,58 @@
 }
 ```
 
+### D-day 배지
+Todo 마감일 표시를 위한 D-day 배지 스타일입니다.
+
+```css
+/* D-Day (오늘 마감) */
+.badge-dday {
+  background: #E8F5E9;
+  color: #2E7D32;
+  border: 1px solid #81C784;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+}
+
+/* D-1 ~ D-3 (임박) */
+.badge-warning {
+  background: #FFF3E0;
+  color: #F57C00;
+  border: 1px solid #FFCC80;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+}
+
+/* D-4 ~ D-7 (여유) */
+.badge-primary {
+  background: #E3F2FD;
+  color: #1976D2;
+  border: 1px solid #90CAF9;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+}
+
+/* D-8+ (충분) */
+.badge-secondary {
+  background: #F5F5F5;
+  color: #616161;
+  border: 1px solid #E0E0E0;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+}
+```
+
+**D-day 배지 색상 체계**
+- **지연 (D+N)**: `.badge-overdue` - 빨간색 배경, 흰색 글씨
+- **오늘 (D-Day)**: `.badge-dday` - 연한 녹색 배경, 진한 녹색 글씨, 테두리
+- **임박 (D-1~3)**: `.badge-warning` - 연한 주황 배경, 진한 주황 글씨, 테두리
+- **여유 (D-4~7)**: `.badge-primary` - 연한 파랑 배경, 진한 파랑 글씨, 테두리
+- **충분 (D-8+)**: `.badge-secondary` - 연한 회색 배경, 진한 회색 글씨, 테두리
+
 ---
 
 ## 9. 아이콘