diff --git a/frontend/src/app.css b/frontend/src/app.css
index 47962ea..5221297 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -45,6 +45,25 @@
   --spacing-rail: 320px;
 }
 
+/* Tailwind v4 는 --z-* 를 utility namespace 로 인식하지 않으므로
+   @utility 로 명시적으로 등록해야 z-drawer / z-dropdown / z-toast 가
+   실제 클래스로 생성된다. --z-modal 은 Modal.svelte 가 inline style 로
+   var() 참조해서 이미 보존되고 있지만, z-modal 클래스도 일관성 차원에서
+   함께 등록한다. var() 참조 덕분에 Tailwind v4 가 --z-* 변수도 tree-shaking
+   에서 제외하고 :root 에 emit 한다. */
+@utility z-dropdown {
+  z-index: var(--z-dropdown);
+}
+@utility z-drawer {
+  z-index: var(--z-drawer);
+}
+@utility z-modal {
+  z-index: var(--z-modal);
+}
+@utility z-toast {
+  z-index: var(--z-toast);
+}
+
 /* 기존 :root 변수는 .markdown-body와의 호환을 위해 유지 (공존 layer). */
 /* 후속 phase에서 markdown-body도 토큰 마이그레이션 검토 가능. */
 :root {