UI 디자인 대대적으로 대시보드 형태의 전문적인 느낌으로 재구성
This commit is contained in:
236
src/index.css
236
src/index.css
@@ -1,35 +1,241 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Manrope:wght@300;400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
/* ── Reset ───────────────────────────────────────────────────────────── */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── Design Tokens ───────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ── Background Surfaces ─────────────────────────────────────────── */
|
||||
--bg: #070b19;
|
||||
--bg-secondary: #0a0f23;
|
||||
--bg-tertiary: #0d1530;
|
||||
|
||||
/* ── Glass Surfaces ──────────────────────────────────────────────── */
|
||||
--surface: rgba(10, 18, 45, 0.8);
|
||||
--surface-raised: rgba(14, 24, 58, 0.9);
|
||||
--surface-card: rgba(255, 255, 255, 0.03);
|
||||
|
||||
/* ── Neon Cyan ───────────────────────────────────────────────────── */
|
||||
--neon-cyan: #00d4ff;
|
||||
--neon-cyan-dim: rgba(0, 212, 255, 0.6);
|
||||
--neon-cyan-muted: rgba(0, 212, 255, 0.12);
|
||||
|
||||
/* ── Neon Purple ─────────────────────────────────────────────────── */
|
||||
--neon-purple: #8b5cf6;
|
||||
--neon-purple-dim: rgba(139, 92, 246, 0.6);
|
||||
--neon-purple-muted: rgba(139, 92, 246, 0.12);
|
||||
|
||||
/* ── Gradients ───────────────────────────────────────────────────── */
|
||||
--grad-accent: linear-gradient(135deg, #00d4ff 0%, #8b5cf6 100%);
|
||||
--grad-accent-subtle: linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
|
||||
--grad-bg-radial: radial-gradient(ellipse 120% 80% at 20% 0%, rgba(0, 212, 255, 0.06) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 100% 70% at 80% 10%, rgba(139, 92, 246, 0.05) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 80% 60% at 50% 80%, rgba(0, 100, 180, 0.04) 0%, transparent 70%);
|
||||
|
||||
/* ── Text ────────────────────────────────────────────────────────── */
|
||||
--text: #ccd6f6;
|
||||
--text-bright: #e8f0fe;
|
||||
--text-dim: #8892b0;
|
||||
--text-muted: #4a5572;
|
||||
|
||||
/* ── Borders ─────────────────────────────────────────────────────── */
|
||||
--line: rgba(255, 255, 255, 0.07);
|
||||
--line-bright: rgba(0, 212, 255, 0.25);
|
||||
--line-subtle: rgba(255, 255, 255, 0.04);
|
||||
|
||||
/* ── Glow Effects ────────────────────────────────────────────────── */
|
||||
--glow-cyan: 0 0 20px rgba(0, 212, 255, 0.25), 0 0 60px rgba(0, 212, 255, 0.08);
|
||||
--glow-purple: 0 0 20px rgba(139, 92, 246, 0.25), 0 0 60px rgba(139, 92, 246, 0.08);
|
||||
--glow-active: 0 0 30px rgba(0, 212, 255, 0.2), 0 2px 0 rgba(0, 212, 255, 0.4);
|
||||
|
||||
/* ── Shadows ─────────────────────────────────────────────────────── */
|
||||
--shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
--shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.65);
|
||||
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
|
||||
|
||||
/* ── Border Radii ────────────────────────────────────────────────── */
|
||||
--radius-xs: 6px;
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 20px;
|
||||
--radius-xl: 28px;
|
||||
|
||||
/* ── Layout ──────────────────────────────────────────────────────── */
|
||||
--sidebar-w: 240px;
|
||||
--topbar-h: 56px;
|
||||
|
||||
/* ── Typography ──────────────────────────────────────────────────── */
|
||||
--font-display: 'Space Grotesk', 'Noto Sans KR', system-ui, serif;
|
||||
--font-body: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
|
||||
|
||||
/* ── Easing ──────────────────────────────────────────────────────── */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
/* ── Page Accent Colors ──────────────────────────────────────────── */
|
||||
--accent-home: #00d4ff;
|
||||
--accent-blog: #c084fc;
|
||||
--accent-lotto: #34d399;
|
||||
--accent-stock: #38bdf8;
|
||||
--accent-travel: #fb923c;
|
||||
--accent-lab: #fbbf24;
|
||||
|
||||
/* ── Convenience alias ───────────────────────────────────────────── */
|
||||
--accent: var(--neon-cyan);
|
||||
|
||||
/* ── Legacy / Backward-compat aliases ───────────────────────────── */
|
||||
--muted: var(--text-dim);
|
||||
--fg: var(--text-bright);
|
||||
--surface-hover: var(--surface-raised);
|
||||
--line-strong: var(--line-bright);
|
||||
--accent-strong: var(--neon-purple);
|
||||
--shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
|
||||
}
|
||||
|
||||
/* ── Base Document ───────────────────────────────────────────────────── */
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: radial-gradient(2000px 1200px at 15% 5%, rgba(247, 168, 165, 0.25), transparent 70%),
|
||||
radial-gradient(1600px 1200px at 85% 0%, rgba(253, 212, 177, 0.18), transparent 70%),
|
||||
radial-gradient(1500px 800px at 50% 50%, rgba(151, 201, 170, 0.1), transparent 80%),
|
||||
#0f0d12;
|
||||
overflow: hidden;
|
||||
background-color: var(--bg);
|
||||
background-image: var(--grad-bg-radial);
|
||||
background-attachment: fixed;
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
/* ── Scrollbar ───────────────────────────────────────────────────────── */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 212, 255, 0.22);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 212, 255, 0.45);
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 212, 255, 0.22) transparent;
|
||||
}
|
||||
|
||||
/* ── Selection ───────────────────────────────────────────────────────── */
|
||||
|
||||
::selection {
|
||||
background: rgba(0, 212, 255, 0.2);
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
/* ── Focus ───────────────────────────────────────────────────────────── */
|
||||
|
||||
:focus-visible {
|
||||
outline: 1.5px solid rgba(0, 212, 255, 0.8);
|
||||
outline-offset: 3px;
|
||||
border-radius: var(--radius-xs);
|
||||
}
|
||||
|
||||
/* ── Typography ──────────────────────────────────────────────────────── */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.75;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--neon-cyan);
|
||||
}
|
||||
|
||||
/* ── Images ──────────────────────────────────────────────────────────── */
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Form Elements ───────────────────────────────────────────────────── */
|
||||
|
||||
button {
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-family: var(--font-body);
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: var(--neon-cyan-dim);
|
||||
box-shadow: 0 0 0 3px var(--neon-cyan-muted);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select option {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ── Responsive Mobile Override ──────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
overflow: auto;
|
||||
background-attachment: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user