diff --git a/src/components/FAB.css b/src/components/FAB.css
new file mode 100644
index 0000000..fdeef4f
--- /dev/null
+++ b/src/components/FAB.css
@@ -0,0 +1,50 @@
+/* FAB — Floating Action Button (mobile-only) */
+
+.fab {
+ display: none;
+ position: fixed;
+ right: 20px;
+ bottom: calc(var(--bottom-nav-h) + var(--safe-area-bottom) + 16px);
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ background: var(--gradient-accent);
+ border: none;
+ color: #000;
+ font-size: 24px;
+ z-index: 250;
+ box-shadow: 0 0 0 1px var(--neon-cyan-dim), 0 4px 16px rgba(0, 255, 255, 0.25);
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+ transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
+}
+
+@media (max-width: 768px) {
+ .fab {
+ display: flex;
+ }
+}
+
+.fab:active {
+ transform: scale(0.92);
+}
+
+.fab__icon {
+ width: 24px;
+ height: 24px;
+ flex-shrink: 0;
+}
+
+/* Variant: positioned above a music mini-player */
+.fab--above-player {
+ bottom: calc(var(--bottom-nav-h) + var(--safe-area-bottom) + 16px + 56px);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ .fab {
+ transition: none;
+ }
+}
diff --git a/src/components/FAB.jsx b/src/components/FAB.jsx
new file mode 100644
index 0000000..7376519
--- /dev/null
+++ b/src/components/FAB.jsx
@@ -0,0 +1,37 @@
+import { useIsMobile } from '../hooks/useIsMobile';
+import './FAB.css';
+
+const PlusIcon = () => (
+
+);
+
+export default function FAB({ onClick, icon, label = '액션', className = '' }) {
+ const isMobile = useIsMobile();
+
+ if (!isMobile) return null;
+
+ return (
+
+ );
+}