-
diff --git a/design/uiux/prototype/09-Todo관리.html b/design/uiux/prototype/09-Todo관리.html
index 5775b08..39709ff 100644
--- a/design/uiux/prototype/09-Todo관리.html
+++ b/design/uiux/prototype/09-Todo관리.html
@@ -266,6 +266,47 @@
grid-template-columns: repeat(4, 1fr);
}
}
+
+ /* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */
+ .date-input-wrapper {
+ position: relative;
+ }
+
+ .date-input-wrapper input[type="date"] {
+ position: relative;
+ z-index: 1;
+ }
+
+ /* 달력 아이콘을 별도 요소로 표시 */
+ .date-input-wrapper::after {
+ content: '📅';
+ position: absolute;
+ right: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ pointer-events: none;
+ font-size: 18px;
+ z-index: 3;
+ }
+
+ /* 네이티브 달력 아이콘 숨김 */
+ .date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
+ position: absolute;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ z-index: 2;
+ /* Edge 브라우저 캘린더 팝업에 그림자 추가 */
+ filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
+ }
+
+ /* Edge 브라우저용 포커스 시 하단 테두리 강조 */
+ .date-input-wrapper input[type="date"]:focus {
+ box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.15),
+ 0 4px 0 0 var(--primary);
+ }
@@ -390,7 +431,9 @@
diff --git a/design/uiux/prototype/common.css b/design/uiux/prototype/common.css
index 70c85ad..6d076d1 100644
--- a/design/uiux/prototype/common.css
+++ b/design/uiux/prototype/common.css
@@ -209,7 +209,7 @@ a:hover {
align-items: center;
justify-content: center;
gap: var(--space-sm);
- padding: 12px 24px;
+ padding: 12px 16px;
border-radius: var(--radius-md);
font-size: var(--font-body);
font-weight: var(--font-weight-medium);
@@ -298,6 +298,26 @@ a:hover {
z-index: 1001; /* 하단 네비게이션 바(1000) 위에 표시 */
}
+/* Action Bar (하단 액션 바) */
+.action-bar {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 80px;
+ background: var(--white);
+ border-top: 1px solid var(--gray-300);
+ box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
+ padding: var(--space-md);
+ display: flex;
+ gap: var(--space-sm);
+ z-index: 100;
+}
+
+.action-bar .btn {
+ flex: 1;
+}
+
/* 데스크톱에서는 원래 위치로 */
@media (min-width: 768px) {
.fab {
@@ -415,6 +435,92 @@ textarea.form-control {
min-height: 100px;
}
+/* Date/Time Inputs - 캘린더 레이어 스타일링 */
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"] {
+ position: relative;
+ background-image: linear-gradient(to bottom, var(--white) 0%, var(--gray-50, #FAFAFA) 100%);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+ padding-right: 40px; /* 달력 아이콘 공간 확보 */
+}
+
+/* 캘린더 팝업 스타일 개선 */
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator,
+input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+ cursor: pointer;
+ padding: 8px;
+ margin-right: -8px;
+ border-radius: var(--radius-sm);
+ transition: all var(--transition-fast);
+ opacity: 0.8;
+ position: absolute;
+ right: 8px;
+ z-index: 2; /* 캘린더가 열려도 아이콘이 보이도록 */
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator:hover,
+input[type="time"]::-webkit-calendar-picker-indicator:hover,
+input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
+ background: var(--gray-100);
+ opacity: 1;
+ transform: scale(1.1);
+}
+
+/* 캘린더 드롭다운이 열릴 때 input에 포커스 효과 강조 */
+input[type="date"]:focus,
+input[type="time"]:focus,
+input[type="datetime-local"]:focus {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05);
+ background-image: linear-gradient(to bottom, var(--white) 0%, var(--primary-light) 100%);
+ position: relative;
+ z-index: 1000; /* 캘린더가 다른 요소 위에 표시되도록 */
+}
+
+/* 날짜/시간 입력 필드 활성화 시 레이어 구분 */
+input[type="date"]:focus-visible,
+input[type="time"]:focus-visible,
+input[type="datetime-local"]:focus-visible {
+ outline: 2px solid var(--primary);
+ outline-offset: 2px;
+}
+
+/* 브라우저 네이티브 캘린더 팝업 개선 (Chrome/Edge) */
+input[type="date"]::-webkit-datetime-edit,
+input[type="time"]::-webkit-datetime-edit,
+input[type="datetime-local"]::-webkit-datetime-edit {
+ padding: 0;
+ margin-right: 8px;
+}
+
+/* Edge 브라우저 캘린더 팝업 테두리 개선 */
+input[type="date"]::-webkit-calendar-picker-indicator {
+ filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
+}
+
+/* Edge 전용: 캘린더 드롭다운에 시각적 경계 추가 */
+@supports (-ms-ime-align: auto) {
+ input[type="date"]::after,
+ input[type="time"]::after {
+ content: '';
+ position: absolute;
+ top: calc(100% + 4px);
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: var(--primary);
+ opacity: 0;
+ transition: opacity var(--transition-fast);
+ }
+
+ input[type="date"]:focus::after,
+ input[type="time"]:focus::after {
+ opacity: 1;
+ }
+}
+
/* Checkbox */
.checkbox-wrapper {
display: flex;
@@ -815,7 +921,66 @@ textarea.form-control {
}
/* ========================================
- 18. Desktop Sidebar (공통)
+ 18. Header (공통)
+ ======================================== */
+.header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 64px;
+ background: var(--white);
+ border-bottom: 1px solid var(--gray-300);
+ box-shadow: var(--shadow-sm);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 var(--space-md);
+ z-index: 100;
+}
+
+.header-left {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.header-right {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.back-btn,
+.icon-btn {
+ background: transparent;
+ border: none;
+ font-size: 24px;
+ color: var(--gray-700);
+ cursor: pointer;
+ padding: var(--space-sm);
+ transition: color var(--transition-fast);
+}
+
+.icon-btn:hover {
+ color: var(--primary);
+}
+
+.header-title {
+ font-size: var(--font-h3);
+ font-weight: var(--font-weight-bold);
+ color: var(--gray-900);
+}
+
+/* 데스크톱: 헤더 조정 */
+@media (min-width: 768px) {
+ .header {
+ padding: 0 var(--space-xl);
+ }
+}
+
+/* ========================================
+ 19. Desktop Sidebar (공통)
======================================== */
/* 사이드바 기본 숨김 (모바일) */
.sidebar {