update

scss/layout/_footer.scss

@@ -0,0 +1,106 @@
+// =============================================================================
+// layout/_footer.scss
+// =============================================================================
+
+.site-footer {
+	margin-top: var(--space-6);
+	background-color: var(--color-surface);
+	border-top: 1px solid var(--color-border);
+	padding-top: var(--space-5);
+}
+
+.footer-site-name {
+	font-size: 1.25rem;
+	font-weight: 700;
+	margin-bottom: var(--space-2);
+
+	a {
+		color: var(--color-text);
+		text-decoration: none;
+
+		&:hover {
+			color: var(--color-primary);
+		}
+	}
+}
+
+.footer-site-description {
+	color: #6b7280;
+	font-size: 0.875rem;
+	line-height: 1.5;
+	margin-bottom: var(--space-3);
+}
+
+.footer-menu-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	li {
+		margin-bottom: var(--space-2);
+	}
+
+	a {
+		color: var(--color-text);
+		text-decoration: none;
+		transition: color var(--transition-base);
+
+		&:hover {
+			color: var(--color-primary);
+		}
+	}
+}
+
+.social-menu-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-2);
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	a {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: 50%;
+		background-color: var(--color-border);
+		color: var(--color-text);
+		transition:
+			background-color var(--transition-base),
+			color var(--transition-base);
+
+		&:hover {
+			background-color: var(--color-primary);
+			color: #fff;
+		}
+	}
+}
+
+.footer-widget-title {
+	font-size: 1rem;
+	font-weight: 700;
+	margin-bottom: var(--space-3);
+	color: var(--color-text);
+}
+
+.footer-bottom {
+	margin-top: var(--space-5);
+	padding: var(--space-3) 0;
+	border-top: 1px solid var(--color-border);
+}
+
+.footer-copyright {
+	color: #6b7280;
+	font-size: 0.875rem;
+
+	a {
+		color: var(--color-text);
+
+		&:hover {
+			color: var(--color-primary);
+		}
+	}
+}