/** * Wanted DS — Web (Console + Platform + Manage Portal) * * DrunkVoca 앱과 동일한 Wanted Design System 포팅(UI Overhaul v2)을 * Spring Thymeleaf 관리자 페이지에 동일하게 적용합니다. * * 토큰 출처(앱과 동기화): * - DrunkVoca/src/design-system/primitives.ts (indigo / slate / emerald / rose / amber) * - DrunkVoca/src/design-system/themes.ts (light/dark 시맨틱 매핑) * * 매핑 결정사항: * - indigo → Wanted Blue (#2049FF primary) * - slate → Wanted Gray (cool blue-tinted neutrals) * - emerald → Wanted Mint (#0FB37C, mastered/완성) * - rose → Wanted Danger (#E54848) * - amber → Wanted Warning (#F59F0A) * - lavender / sky 유지 (Wanted 미대응 톤) * * 사용: * * Tailwind 와 함께 사용. layout 의 인라인 tailwind.config 가 primary/slate/gray * 팔레트를 동일 값으로 오버라이드합니다. */ /* ============================================================ Pretendard 폰트 (한글 메인) — 외부 CDN ============================================================ */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); /* ============================================================ Primitive — 모든 모드에서 동일 (Wanted DS 팔레트) ============================================================ */ :root { /* Wanted Blue — `indigo` alias (의도가 명확한 이름) */ --indigo-50: #EEF4FF; --indigo-100: #D9E6FF; --indigo-200: #B8D0FF; --indigo-300: #8AB1FF; --indigo-400: #5B8EFF; --indigo-500: #3366FF; --indigo-600: #2049FF; --indigo-700: #1635CC; --indigo-800: #122A9A; --indigo-900: #0E2078; --indigo-950: #0A1859; /* Wanted Gray — cool blue-tinted neutrals */ --slate-50: #FAFAFB; --slate-100: #F4F5F7; --slate-200: #EAECEF; --slate-300: #D8DBE0; --slate-400: #B8BCC4; --slate-500: #8B909A; --slate-600: #5F6470; --slate-700: #44474F; --slate-800: #2E3138; --slate-900: #1C1E23; --slate-950: #0E1014; /* Accents */ --lavender-400: #A78BFA; --lavender-500: #8B5CF6; --emerald-300: #55D6AD; /* Wanted Mint 300 */ --emerald-500: #0FB37C; /* Wanted Mint 500 (mastered primary) */ --rose-300: #F59F9F; --rose-500: #E54848; /* Wanted Danger 500 */ --amber-300: #FACB70; --amber-500: #F59F0A; /* Wanted Warning 500 */ --sky-400: #38BDF8; /* Motion */ --duration-fast: 120ms; --duration-base: 200ms; --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* Fonts */ --font-kr: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; } /* ============================================================ Light theme (기본) — themes.ts 의 lightColors 와 동기화 ============================================================ */ :root, [data-theme="light"] { --bg-primary: var(--slate-50); --bg-secondary: var(--slate-100); --bg-tertiary: var(--slate-200); --bg-elevated: #FFFFFF; --bg-overlay: rgba(14, 16, 20, 0.55); /* themes.ts overlay (Wanted) */ --text-primary: var(--slate-950); --text-secondary: var(--slate-700); --text-tertiary: var(--slate-500); --text-on-accent: #FFFFFF; --text-disabled: var(--slate-400); --border-default: var(--slate-200); --border-subtle: var(--slate-100); --border-strong: var(--slate-300); --accent: var(--indigo-600); --accent-hover: var(--indigo-700); --accent-subtle: var(--indigo-50); --status-success: var(--emerald-500); --status-error: var(--rose-500); --status-warning: var(--amber-500); --insight-gradient: linear-gradient(135deg, var(--indigo-700) 0%, var(--indigo-500) 55%, var(--indigo-400) 100%); --shadow-sm: 0 1px 2px rgba(10, 24, 89, 0.06); /* indigo-950 tint */ --shadow-md: 0 4px 12px rgba(10, 24, 89, 0.08); --shadow-lg: 0 12px 32px rgba(10, 24, 89, 0.12); } /* ============================================================ Dark theme — toggle via [data-theme="dark"] on or ============================================================ */ [data-theme="dark"] { --bg-primary: var(--slate-950); --bg-secondary: var(--slate-900); --bg-tertiary: var(--slate-800); --bg-elevated: var(--slate-900); /* themes.ts: bgCard = slate-900 */ --bg-overlay: rgba(0, 0, 0, 0.6); --text-primary: var(--slate-50); --text-secondary: var(--slate-300); --text-tertiary: var(--slate-500); --text-on-accent: #FFFFFF; --text-disabled: var(--slate-600); --border-default: #2A2D35; /* Wanted dark subtle */ --border-subtle: #1F2127; --border-strong: #3A3E48; --accent: var(--indigo-400); --accent-hover: var(--indigo-300); --accent-subtle: rgba(91, 142, 255, 0.12); --status-success: var(--emerald-300); --status-error: var(--rose-300); --status-warning: var(--amber-300); --insight-gradient: linear-gradient(135deg, var(--indigo-800) 0%, var(--indigo-600) 55%, var(--indigo-400) 100%); --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); } /* ============================================================ Base ============================================================ */ html, body { font-family: var(--font-kr); background-color: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; transition: background-color var(--duration-base) var(--ease-out-soft); } /* ============================================================ Tailwind 호환 시맨틱 유틸리티 (점진적 마이그레이션용) ============================================================ */ .mi-bg { background-color: var(--bg-primary); } .mi-bg-secondary { background-color: var(--bg-secondary); } .mi-bg-tertiary { background-color: var(--bg-tertiary); } .mi-bg-elevated { background-color: var(--bg-elevated); } .mi-text { color: var(--text-primary); } .mi-text-primary { color: var(--text-primary); } .mi-text-secondary { color: var(--text-secondary); } .mi-text-tertiary { color: var(--text-tertiary); } .mi-text-accent { color: var(--accent); } .mi-border { border-color: var(--border-default); } .mi-border-subtle { border-color: var(--border-subtle); } /* ============================================================ Components ============================================================ */ /* Card */ .mi-card { background-color: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-sm); } /* Button — primary */ .mi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; border: 1px solid transparent; transition: all var(--duration-fast) var(--ease-out-soft); cursor: pointer; white-space: nowrap; } .mi-btn-primary { background-color: var(--accent); color: var(--text-on-accent); } .mi-btn-primary:hover { background-color: var(--accent-hover); } .mi-btn-ghost { background-color: transparent; color: var(--text-secondary); border-color: var(--border-default); } .mi-btn-ghost:hover { border-color: var(--border-strong); color: var(--text-primary); } .mi-btn-danger { background-color: var(--status-error); color: #FFFFFF; } /* Input */ .mi-input { width: 100%; height: 36px; padding: 0 12px; background-color: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 8px; font-size: 13px; color: var(--text-primary); transition: border-color var(--duration-fast) var(--ease-out-soft); } .mi-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); } .mi-input::placeholder { color: var(--text-tertiary); } /* Tag / Chip */ .mi-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; } .mi-tag-live { background-color: color-mix(in srgb, var(--status-success) 14%, transparent); color: var(--status-success); } .mi-tag-pending { background-color: color-mix(in srgb, var(--status-warning) 14%, transparent); color: var(--status-warning); } .mi-tag-draft { background-color: var(--bg-secondary); color: var(--text-tertiary); } .mi-tag-error { background-color: color-mix(in srgb, var(--status-error) 14%, transparent); color: var(--status-error); } .mi-tag-info { background-color: var(--accent-subtle); color: var(--accent); } /* Sidebar nav */ .mi-nav-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all var(--duration-fast) var(--ease-out-soft); cursor: pointer; } .mi-nav-item:hover { color: var(--text-primary); background-color: var(--bg-secondary); } .mi-nav-item.active { background-color: var(--accent-subtle); color: var(--accent); font-weight: 600; } .mi-nav-kicker { padding: 16px 16px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); } /* Table */ .mi-table { width: 100%; border-collapse: collapse; background-color: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; } .mi-table th { text-align: left; padding: 10px 16px; background-color: var(--bg-primary); border-bottom: 1px solid var(--border-subtle); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); } .mi-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-primary); } .mi-table tr:last-child td { border-bottom: none; } .mi-table tbody tr:hover { background-color: var(--bg-primary); } /* Page heading */ .mi-page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); } .mi-page-desc { font-size: 13px; color: var(--text-secondary); margin-top: 4px; } .mi-page-desc strong { color: var(--text-primary); font-weight: 600; } /* Insight gradient card (모임장 대시보드) */ .mi-insight-card { background: var(--insight-gradient); color: #FFFFFF; border-radius: 16px; padding: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); } /* Mono / numbers */ .mi-mono { font-family: var(--font-mono); letter-spacing: -0.01em; } /* Select — native 드롭다운 커스터마이즈 stroke 색은 slate-500 (#8B909A) — 라이트/다크 모두 대비 적정 */ .mi-select { width: 100%; height: 40px; padding: 0 36px 0 12px; background-color: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 10px; font-size: 13px; color: var(--text-primary); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B909A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out-soft), box-shadow var(--duration-fast) var(--ease-out-soft); } .mi-select:hover { border-color: var(--border-strong); } .mi-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); } /* File drop zone — 커스텀 파일 업로드 */ .mi-file-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 28px 20px; background-color: var(--bg-secondary); border: 1.5px dashed var(--border-default); border-radius: 12px; cursor: pointer; text-align: center; transition: border-color var(--duration-fast) var(--ease-out-soft), background-color var(--duration-fast) var(--ease-out-soft); } .mi-file-drop:hover { border-color: var(--border-strong); background-color: var(--bg-tertiary); } .mi-file-drop--active { border-color: var(--accent); border-style: solid; background-color: var(--accent-subtle); } .mi-file-drop--filled { border-color: var(--accent); border-style: solid; background-color: var(--accent-subtle); } .mi-file-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .mi-file-drop__icon { width: 44px; height: 44px; border-radius: 12px; background-color: var(--bg-elevated); display: flex; align-items: center; justify-content: center; color: var(--accent); box-shadow: var(--shadow-sm); } .mi-file-drop--filled .mi-file-drop__icon { background-color: var(--accent); color: var(--text-on-accent); } .mi-file-drop__title { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; } .mi-file-drop__hint { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.02em; } .mi-file-drop__meta { font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary); background-color: var(--bg-elevated); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border-subtle); } .mi-file-drop__accent { color: var(--accent); font-weight: 600; } /* File button — 컴팩트 인라인 파일 선택 */ .mi-file-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: 8px; background-color: #FFFFFF; color: var(--text-primary); font-size: 12px; font-weight: 600; letter-spacing: -0.01em; border: 1px solid var(--border-subtle); cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-out-soft), border-color var(--duration-fast) var(--ease-out-soft); max-width: 240px; } .mi-file-btn:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); } .mi-file-btn--filled { border-color: var(--accent); color: var(--accent); } .mi-file-btn__icon { flex-shrink: 0; color: var(--text-tertiary); } .mi-file-btn--filled .mi-file-btn__icon { color: var(--accent); } .mi-file-btn__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .mi-file-btn__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }