dashboard 형태의 UI 수정 및 고도화

src/components/PageHeader.css

@@ -0,0 +1,67 @@
+/* ── PageHeader ──────────────────────────────────────────────────────── */
+
+.page-header {
+    padding: 0 0 20px;
+    margin-bottom: 4px;
+}
+
+.page-header__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.page-header__subtitle {
+    margin: 0;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.28em;
+    color: var(--page-accent, var(--neon-cyan));
+    font-family: var(--font-display, 'Space Grotesk', sans-serif);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.page-header__subtitle::before {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 1.5px;
+    background: var(--page-accent, var(--neon-cyan));
+    border-radius: 2px;
+    box-shadow: 0 0 6px var(--page-accent, var(--neon-cyan));
+    flex-shrink: 0;
+}
+
+.page-header__title {
+    margin: 0;
+    font-size: clamp(22px, 3vw, 32px);
+    font-weight: 800;
+    font-family: var(--font-display, 'Space Grotesk', sans-serif);
+    color: var(--text-bright, #fff);
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+}
+
+.page-header__line {
+    height: 1px;
+    background: linear-gradient(
+        90deg,
+        var(--page-accent, var(--neon-cyan)) 0%,
+        transparent 60%
+    );
+    margin-top: 14px;
+    opacity: 0.3;
+}
+
+@media (max-width: 768px) {
+    .page-header {
+        padding: 0 0 16px;
+    }
+
+    .page-header__title {
+        font-size: clamp(18px, 5vw, 24px);
+    }
+}