mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 16:06:23 +00:00
bb921e10eb
- 가파팀 프로토타입 파일 삭제 - 가파팀 유저스토리 삭제 - 실시간 회의록 작성 플로우 설계서 추가 (Mermaid, Markdown) - 백업 및 데이터 디렉토리 추가 - AI 데이터 샘플 생성 도구 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
781 lines
17 KiB
CSS
781 lines
17 KiB
CSS
/*
|
|
* 회의록 작성 및 공유 개선 서비스 - 공통 스타일시트
|
|
* 버전: 1.0
|
|
* 작성일: 2025-10-20
|
|
* 레퍼런스: 스타일 가이드 v1.0
|
|
*/
|
|
|
|
/* ===== CSS Reset ===== */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ===== Root Variables (CSS Custom Properties) ===== */
|
|
:root {
|
|
/* Primary Colors */
|
|
--color-primary-light: #4DFFDB;
|
|
--color-primary-main: #00D9B1;
|
|
--color-primary-dark: #00A88A;
|
|
|
|
/* Secondary Colors */
|
|
--color-secondary-light: #A5B4FC;
|
|
--color-secondary-main: #6366F1;
|
|
--color-secondary-dark: #4F46E5;
|
|
|
|
/* Semantic Colors */
|
|
--color-success-light: #6EE7B7;
|
|
--color-success-main: #10B981;
|
|
--color-success-dark: #059669;
|
|
|
|
--color-warning-light: #FCD34D;
|
|
--color-warning-main: #F59E0B;
|
|
--color-warning-dark: #D97706;
|
|
|
|
--color-error-light: #FCA5A5;
|
|
--color-error-main: #EF4444;
|
|
--color-error-dark: #DC2626;
|
|
|
|
--color-info-light: #93C5FD;
|
|
--color-info-main: #3B82F6;
|
|
--color-info-dark: #2563EB;
|
|
|
|
/* Neutral Colors */
|
|
--color-gray-50: #F9FAFB;
|
|
--color-gray-100: #F3F4F6;
|
|
--color-gray-200: #E5E7EB;
|
|
--color-gray-300: #D1D5DB;
|
|
--color-gray-400: #9CA3AF;
|
|
--color-gray-500: #6B7280;
|
|
--color-gray-600: #4B5563;
|
|
--color-gray-700: #374151;
|
|
--color-gray-800: #1F2937;
|
|
--color-gray-900: #111827;
|
|
--color-white: #FFFFFF;
|
|
--color-black: #000000;
|
|
|
|
/* Spacing System (8px base) */
|
|
--spacing-0: 0;
|
|
--spacing-1: 4px;
|
|
--spacing-2: 8px;
|
|
--spacing-3: 12px;
|
|
--spacing-4: 16px;
|
|
--spacing-5: 20px;
|
|
--spacing-6: 24px;
|
|
--spacing-8: 32px;
|
|
--spacing-10: 40px;
|
|
--spacing-12: 48px;
|
|
--spacing-16: 64px;
|
|
--spacing-20: 80px;
|
|
|
|
/* Font Sizes */
|
|
--font-size-display: 48px;
|
|
--font-size-h1: 36px;
|
|
--font-size-h2: 30px;
|
|
--font-size-h3: 24px;
|
|
--font-size-h4: 20px;
|
|
--font-size-body-large: 18px;
|
|
--font-size-body: 16px;
|
|
--font-size-body-small: 14px;
|
|
--font-size-caption: 12px;
|
|
|
|
/* Font Weights */
|
|
--font-weight-light: 300;
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* Line Heights */
|
|
--line-height-tight: 1.25;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.75;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-full: 50%;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
--shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms ease-out;
|
|
--transition-base: 200ms ease-out;
|
|
--transition-slow: 300ms ease-out;
|
|
|
|
/* Z-index */
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1100;
|
|
--z-modal-backdrop: 1200;
|
|
--z-modal: 1300;
|
|
--z-toast: 1400;
|
|
--z-tooltip: 1500;
|
|
}
|
|
|
|
/* ===== Typography ===== */
|
|
body {
|
|
font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
'Apple SD Gothic Neo', sans-serif;
|
|
font-size: var(--font-size-body);
|
|
font-weight: var(--font-weight-regular);
|
|
line-height: var(--line-height-normal);
|
|
color: var(--color-gray-600);
|
|
background-color: var(--color-gray-50);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--color-gray-900);
|
|
font-weight: var(--font-weight-bold);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
h1 { font-size: var(--font-size-h1); letter-spacing: -0.02em; }
|
|
h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-semibold); }
|
|
h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); }
|
|
h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); }
|
|
|
|
a {
|
|
color: var(--color-primary-main);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-primary-dark);
|
|
}
|
|
|
|
/* ===== Layout Utilities ===== */
|
|
.container {
|
|
width: 100%;
|
|
padding: 0 var(--spacing-6);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.container { padding: 0 var(--spacing-8); }
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.container { padding: 0 var(--spacing-16); }
|
|
}
|
|
|
|
.container-small { max-width: 640px; }
|
|
.container-medium { max-width: 768px; }
|
|
.container-large { max-width: 1024px; }
|
|
.container-xlarge { max-width: 1280px; }
|
|
.container-2xlarge { max-width: 1536px; }
|
|
|
|
/* ===== Button Styles ===== */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-3) var(--spacing-6);
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-body);
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Primary Button */
|
|
.btn-primary {
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background-color: var(--color-primary-light);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.btn-primary:active:not(:disabled) {
|
|
background-color: var(--color-primary-dark);
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
background-color: var(--color-gray-300);
|
|
color: var(--color-gray-500);
|
|
}
|
|
|
|
/* Secondary Button */
|
|
.btn-secondary {
|
|
background-color: transparent;
|
|
color: var(--color-primary-main);
|
|
border: 1px solid var(--color-primary-main);
|
|
}
|
|
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background-color: rgba(0, 217, 177, 0.1);
|
|
}
|
|
|
|
.btn-secondary:active:not(:disabled) {
|
|
background-color: rgba(0, 217, 177, 0.2);
|
|
}
|
|
|
|
.btn-secondary:disabled {
|
|
border-color: var(--color-gray-300);
|
|
color: var(--color-gray-400);
|
|
}
|
|
|
|
/* Text Button */
|
|
.btn-text {
|
|
background-color: transparent;
|
|
color: var(--color-gray-700);
|
|
padding: var(--spacing-2) var(--spacing-4);
|
|
}
|
|
|
|
.btn-text:hover:not(:disabled) {
|
|
background-color: var(--color-gray-100);
|
|
}
|
|
|
|
.btn-text:active:not(:disabled) {
|
|
background-color: var(--color-gray-200);
|
|
}
|
|
|
|
/* Button Sizes */
|
|
.btn-sm { padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-body-small); }
|
|
.btn-lg { padding: var(--spacing-4) var(--spacing-8); font-size: var(--font-size-body-large); }
|
|
|
|
/* Icon Button */
|
|
.btn-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
border-radius: var(--radius-md);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.btn-icon:hover:not(:disabled) {
|
|
background-color: var(--color-gray-100);
|
|
}
|
|
|
|
.btn-icon-sm { width: 32px; height: 32px; }
|
|
.btn-icon-lg { width: 48px; height: 48px; }
|
|
|
|
/* Floating Action Button */
|
|
.fab {
|
|
position: fixed;
|
|
right: var(--spacing-4);
|
|
bottom: var(--spacing-4);
|
|
width: 56px;
|
|
height: 56px;
|
|
padding: 0;
|
|
border-radius: var(--radius-full);
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
box-shadow: var(--shadow-md);
|
|
z-index: var(--z-sticky);
|
|
}
|
|
|
|
.fab:hover {
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.fab:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* ===== Form Styles ===== */
|
|
.form-group {
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: var(--spacing-2);
|
|
font-size: var(--font-size-body-small);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-gray-700);
|
|
}
|
|
|
|
.form-input,
|
|
.form-textarea,
|
|
.form-select {
|
|
width: 100%;
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
border: 1px solid var(--color-gray-300);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-body);
|
|
font-family: inherit;
|
|
background-color: var(--color-white);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.form-input {
|
|
height: 48px;
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-textarea:focus,
|
|
.form-select:focus {
|
|
outline: 4px solid rgba(0, 217, 177, 0.2);
|
|
border-color: var(--color-primary-main);
|
|
border-width: 2px;
|
|
}
|
|
|
|
.form-input::placeholder,
|
|
.form-textarea::placeholder {
|
|
color: var(--color-gray-400);
|
|
}
|
|
|
|
.form-input:disabled,
|
|
.form-textarea:disabled,
|
|
.form-select:disabled {
|
|
background-color: var(--color-gray-100);
|
|
color: var(--color-gray-400);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-input.error,
|
|
.form-textarea.error,
|
|
.form-select.error {
|
|
border-color: var(--color-error-main);
|
|
}
|
|
|
|
.form-error {
|
|
display: block;
|
|
margin-top: var(--spacing-1);
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-error-main);
|
|
}
|
|
|
|
/* ===== Card Styles ===== */
|
|
.card {
|
|
background-color: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-6);
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.card.interactive:hover {
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-2px);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card.interactive:active {
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
transform: scale(0.99);
|
|
}
|
|
|
|
.card-header {
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: var(--font-size-h4);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-gray-900);
|
|
}
|
|
|
|
.card-body {
|
|
color: var(--color-gray-600);
|
|
}
|
|
|
|
/* ===== Badge Styles ===== */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1;
|
|
}
|
|
|
|
.badge-primary {
|
|
background-color: var(--color-primary-light);
|
|
color: var(--color-primary-dark);
|
|
}
|
|
|
|
.badge-success {
|
|
background-color: var(--color-success-light);
|
|
color: var(--color-success-dark);
|
|
}
|
|
|
|
.badge-warning {
|
|
background-color: var(--color-warning-light);
|
|
color: var(--color-warning-dark);
|
|
}
|
|
|
|
.badge-error {
|
|
background-color: var(--color-error-light);
|
|
color: var(--color-error-dark);
|
|
}
|
|
|
|
.badge-neutral {
|
|
background-color: var(--color-gray-200);
|
|
color: var(--color-gray-700);
|
|
}
|
|
|
|
/* ===== Modal Styles ===== */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: var(--z-modal-backdrop);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--spacing-4);
|
|
opacity: 0;
|
|
animation: fadeIn var(--transition-base);
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.modal {
|
|
background-color: var(--color-white);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--spacing-8);
|
|
max-width: 600px;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-lg);
|
|
z-index: var(--z-modal);
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
animation: modalIn var(--transition-base);
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.modal-header {
|
|
margin-bottom: var(--spacing-6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: var(--font-size-h3);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-gray-900);
|
|
}
|
|
|
|
.modal-close {
|
|
padding: var(--spacing-2);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--color-gray-500);
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: var(--color-gray-700);
|
|
}
|
|
|
|
.modal-body {
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
gap: var(--spacing-3);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes modalIn {
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* ===== Toast Styles ===== */
|
|
.toast-container {
|
|
position: fixed;
|
|
top: var(--spacing-4);
|
|
right: var(--spacing-4);
|
|
z-index: var(--z-toast);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
.toast {
|
|
background-color: var(--color-white);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-4) var(--spacing-5);
|
|
max-width: 400px;
|
|
box-shadow: var(--shadow-md);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-3);
|
|
border-left: 4px solid var(--color-gray-400);
|
|
animation: slideInRight var(--transition-base);
|
|
}
|
|
|
|
.toast-success { border-left-color: var(--color-success-main); }
|
|
.toast-error { border-left-color: var(--color-error-main); }
|
|
.toast-warning { border-left-color: var(--color-warning-main); }
|
|
.toast-info { border-left-color: var(--color-info-main); }
|
|
|
|
.toast-icon {
|
|
flex-shrink: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.toast-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.toast-title {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
|
|
.toast-message {
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
}
|
|
|
|
.toast-close {
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--color-gray-500);
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ===== Loading Styles ===== */
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid var(--color-gray-200);
|
|
border-top-color: var(--color-primary-main);
|
|
border-radius: var(--radius-full);
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.spinner-sm { width: 24px; height: 24px; border-width: 3px; }
|
|
.spinner-lg { width: 56px; height: 56px; border-width: 5px; }
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.skeleton {
|
|
background-color: var(--color-gray-200);
|
|
border-radius: var(--radius-sm);
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
/* ===== Utility Classes ===== */
|
|
.text-center { text-align: center; }
|
|
.text-left { text-align: left; }
|
|
.text-right { text-align: right; }
|
|
|
|
.mt-1 { margin-top: var(--spacing-1); }
|
|
.mt-2 { margin-top: var(--spacing-2); }
|
|
.mt-3 { margin-top: var(--spacing-3); }
|
|
.mt-4 { margin-top: var(--spacing-4); }
|
|
.mt-6 { margin-top: var(--spacing-6); }
|
|
.mt-8 { margin-top: var(--spacing-8); }
|
|
|
|
.mb-1 { margin-bottom: var(--spacing-1); }
|
|
.mb-2 { margin-bottom: var(--spacing-2); }
|
|
.mb-3 { margin-bottom: var(--spacing-3); }
|
|
.mb-4 { margin-bottom: var(--spacing-4); }
|
|
.mb-6 { margin-bottom: var(--spacing-6); }
|
|
.mb-8 { margin-bottom: var(--spacing-8); }
|
|
|
|
.flex { display: flex; }
|
|
.flex-col { flex-direction: column; }
|
|
.items-center { align-items: center; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.gap-2 { gap: var(--spacing-2); }
|
|
.gap-3 { gap: var(--spacing-3); }
|
|
.gap-4 { gap: var(--spacing-4); }
|
|
|
|
.hidden { display: none; }
|
|
.block { display: block; }
|
|
|
|
/* ===== 회의록 서비스 특화 스타일 ===== */
|
|
|
|
/* 상태 배지 - 회의록 전용 */
|
|
.status-draft {
|
|
background-color: var(--color-warning-light);
|
|
color: var(--color-warning-dark);
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.status-verifying {
|
|
background-color: var(--color-info-light);
|
|
color: var(--color-info-dark);
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.status-confirmed {
|
|
background-color: var(--color-success-light);
|
|
color: var(--color-success-dark);
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
/* 전문용어 하이라이트 */
|
|
.term-highlight {
|
|
border-bottom: 2px dotted var(--color-primary-main);
|
|
cursor: pointer;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.term-highlight:hover {
|
|
color: var(--color-primary-dark);
|
|
}
|
|
|
|
/* AI 제안 영역 */
|
|
.ai-suggestion {
|
|
background-color: var(--color-gray-50);
|
|
border: 1px dashed var(--color-primary-main);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-4);
|
|
margin: var(--spacing-4) 0;
|
|
position: relative;
|
|
}
|
|
|
|
.ai-suggestion::before {
|
|
content: "✨ AI 제안";
|
|
position: absolute;
|
|
top: -10px;
|
|
left: var(--spacing-4);
|
|
background-color: var(--color-white);
|
|
padding: 0 var(--spacing-2);
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-primary-main);
|
|
}
|
|
|
|
/* Todo 카드 */
|
|
.todo-card {
|
|
background-color: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-4);
|
|
box-shadow: var(--shadow-sm);
|
|
position: relative;
|
|
}
|
|
|
|
.todo-card.priority-high {
|
|
border-left: 4px solid var(--color-error-main);
|
|
}
|
|
|
|
.todo-card.priority-medium {
|
|
border-left: 4px solid var(--color-warning-main);
|
|
}
|
|
|
|
.todo-progress {
|
|
height: 4px;
|
|
background-color: var(--color-gray-200);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
margin-top: var(--spacing-3);
|
|
}
|
|
|
|
.todo-progress-bar {
|
|
height: 100%;
|
|
background-color: var(--color-primary-main);
|
|
transition: width var(--transition-slow);
|
|
}
|
|
|
|
/* 협업 커서 (예시) */
|
|
.collab-cursor {
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 20px;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.collab-cursor-label {
|
|
position: absolute;
|
|
top: -24px;
|
|
left: 0;
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--font-size-caption);
|
|
color: var(--color-white);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 반응형 유틸리티 */
|
|
@media (max-width: 767px) {
|
|
.hide-mobile { display: none !important; }
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
.hide-tablet { display: none !important; }
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.hide-desktop { display: none !important; }
|
|
}
|