From 7cf7662ba51eef7ef12be42b52d55ce455bebf54 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Wed, 8 Apr 2026 13:28:54 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui):=20Tailwind=20v4=20z-index=20=EC=9C=A0?=
 =?UTF-8?q?=ED=8B=B8=EB=A6=AC=ED=8B=B0=20=EB=88=84=EB=9D=BD=20=E2=80=94=20?=
 =?UTF-8?q?@utility=20=EB=A1=9C=20=EB=93=B1=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 증상
/documents 페이지에서 사이드바 drawer 를 열면 뒤의 필터 칩 row
(`+ 태그`, `+ 형식`) 와 sticky 선택 toolbar 가 사이드바 위로 **그대로
비쳐 보이는** 시각 버그. 사이드바 tree 내용과 섞여 완전히 사용 불가.

## 근본 원인
`@theme { --z-dropdown: 30; --z-drawer: 40; --z-toast: 60 }` 로 정의했지만,
Tailwind v4 는 `--z-*` 를 utility namespace 로 인식하지 않음. 그래서 Drawer
및 페이지의 `class="... z-drawer"`, `class="... z-dropdown"` 이
컴파일 CSS 에 **아예 없는 클래스 (.z-drawer 등 생성 안 됨)** → `z-index:
auto` 로 fallback.

CSS 2.1 stacking 규칙상 positioned z-auto 끼리는 **DOM order** 로 paint 됨.
layout.svelte 의 Drawer 가 먼저 렌더되고 페이지 `<slot/>` 의 `.relative`
필터 칩 popover 컨테이너가 나중에 렌더 → 필터 칩이 사이드바 위에 그려짐.

`--z-modal` 만 살아남은 이유: Modal.svelte 가 `calc(var(--z-modal) + ...)`
로 inline style 에서 실제 var() 참조해서 Tailwind 가 tree-shaking 에서
제외함.

## 수정
`frontend/src/app.css` 의 `@theme` 블록 바로 아래에 Tailwind v4
`@utility` directive 로 4개 유틸리티 명시 등록:

```css
@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); }
```

var() 참조 덕분에 `--z-*` 변수도 tree-shaking 에서 제외됨.

## 다른 파일 변경 없음
Drawer.svelte, documents/+page.svelte, inbox/+page.svelte, Modal.svelte
의 기존 클래스 사용부는 **한 글자도 수정 안 함**. @utility 등록만으로
자동 재활성.

## 검증
- npm run build 통과
- 컴파일 CSS 에 .z-drawer/.z-dropdown/.z-modal 클래스 실제 생성 확인
  (.z-toast 는 소스 사용부가 없어 JIT 제외, 필요 시 자동 생성)
- --z-dropdown/--z-drawer/--z-modal/--z-toast 4개 모두 :root 에 emit
- lint:tokens 168 유지

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/app.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

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 {