@leviosa-ai/detail-page-editor 0.14.2 → 0.15.0

package/components/cardnews/color-input.tsx

@@ -161,7 +161,7 @@ export function ColorInput({
       <PopoverPrimitive.Trigger asChild>
         <button
           type="button"
-          className={`${swatchPx} rounded-dpe-md border border-dpe-ink-200 cursor-pointer shrink-0 transition-colors hover:border-dpe-ink-400`}
+          className={`${swatchPx} rounded-le-md border border-le-ink-200 cursor-pointer shrink-0 transition-colors hover:border-le-ink-400`}
           style={{
             backgroundColor: isTransparentValue ? undefined : safeColor,
             backgroundImage: isTransparentValue ? CHECKER_BG : undefined,
@@ -177,17 +177,17 @@ export function ColorInput({
           어긋난 자리에 떴다.
 
           포털은 body 로 나가므로 편집기 뿌리 딱지를 다시 달아 준다 — 안 달면 소비자 앱이
-          `[data-dpe-root]` 로 좁혀 둔 색·모서리 토큰이 이 팝오버에만 안 먹어서, 각진
+          `[data-le-root]` 로 좁혀 둔 색·모서리 토큰이 이 팝오버에만 안 먹어서, 각진
           인스펙터 위에 둥근 카드가 하나 뜬다. */}
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
           data-layer-panel
-          data-dpe-root=""
+          data-le-root=""
           side="bottom"
           align="start"
           sideOffset={6}
           collisionPadding={8}
-          className="z-[200] w-56 bg-dpe-surface border border-dpe-ink-200 rounded-dpe-md shadow-[0_12px_40px_rgba(0,0,0,0.16)] p-3 space-y-2.5"
+          className="z-[200] w-56 bg-le-surface border border-le-ink-200 rounded-le-md shadow-[0_12px_40px_rgba(0,0,0,0.16)] p-3 space-y-2.5"
         >
           {/* Transparent + Preset palette */}
           <div className="grid grid-cols-6 gap-1.5">
@@ -195,7 +195,7 @@ export function ColorInput({
               <button
                 type="button"
                 onClick={() => selectColor("transparent")}
-                className={`w-7 h-7 rounded-dpe-md border transition-colors relative overflow-hidden ${
+                className={`w-7 h-7 rounded-le-md border transition-colors relative overflow-hidden ${
                   isTransparentValue ? "border-[var(--color-primary)] ring-1 ring-[var(--color-primary)]" : "border-[var(--color-border)]"
                 }`}
                 style={{ backgroundImage: CHECKER_BG, backgroundSize: "8px 8px" }}
@@ -203,7 +203,7 @@ export function ColorInput({
               >
                 {/* Diagonal line to indicate "none/transparent" */}
                 <span className="absolute inset-0 flex items-center justify-center">
-                  <span className="block w-[130%] h-px bg-dpe-danger-500 rotate-45" />
+                  <span className="block w-[130%] h-px bg-le-danger-500 rotate-45" />
                 </span>
               </button>
             )}
@@ -212,7 +212,7 @@ export function ColorInput({
                 key={color}
                 type="button"
                 onClick={() => selectColor(color)}
-                className={`w-7 h-7 rounded-dpe-md border transition-colors ${
+                className={`w-7 h-7 rounded-le-md border transition-colors ${
                   !isTransparentValue && safeColor.toUpperCase() === color ? "border-[var(--color-primary)] ring-1 ring-[var(--color-primary)]" : "border-[var(--color-border)]"
                 }`}
                 style={{ backgroundColor: color }}
@@ -231,13 +231,13 @@ export function ColorInput({
                     key={color}
                     type="button"
                     onClick={() => selectColor(color)}
-                    className={`size-5 rounded-dpe-md border transition-colors ${
+                    className={`size-5 rounded-le-md border transition-colors ${
                       !isTransparentValue && safeColor.toUpperCase() === color ? "border-[var(--color-primary)] ring-1 ring-[var(--color-primary)]" : "border-[var(--color-border)]"
                     }`}
                     style={{ backgroundColor: color }}
                   />
                 ) : (
-                  <span key={idx} className="size-5 rounded-dpe-md border border-transparent" />
+                  <span key={idx} className="size-5 rounded-le-md border border-transparent" />
                 );
               })}
             </div>
@@ -249,7 +249,7 @@ export function ColorInput({
               <button
                 type="button"
                 onClick={openEyeDropper}
-                className="flex shrink-0 items-center gap-1 rounded-dpe-md px-1.5 py-1.5 text-[11px] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)]"
+                className="flex shrink-0 items-center gap-1 rounded-le-md px-1.5 py-1.5 text-[11px] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface)] hover:text-[var(--color-text-primary)]"
                 title={t("cardnews.colorInput.eyedropper")}
               >
                 <Pipette className="w-3.5 h-3.5" />
@@ -262,7 +262,7 @@ export function ColorInput({
               onChange={(e) => setHexInput(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && handleHexSubmit()}
               placeholder="#000000"
-              className="min-w-0 flex-1 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface px-2 py-1.5 text-xs font-mono text-dpe-ink-900 focus:outline-none focus:border-dpe-ink-400"
+              className="min-w-0 flex-1 rounded-le-md border border-le-ink-200 bg-le-surface px-2 py-1.5 text-xs font-mono text-le-ink-900 focus:outline-none focus:border-le-ink-400"
             />
           </div>
         </PopoverPrimitive.Content>

package/components/detail-page/ai-generate-panel.tsx

@@ -487,8 +487,8 @@ export function AiGeneratePanel({
             onClick={() => setMode("image")}
             className={
               mode === "image"
-                ? "flex h-10 items-center justify-center gap-2 rounded-dpe-md bg-dpe-ink-900 text-sm font-dpe-semibold text-dpe-on-accent"
-                : "flex h-10 items-center justify-center gap-2 rounded-dpe-md border border-dpe-ink-200 text-sm font-dpe-medium text-dpe-ink-600 hover:bg-dpe-ink-50"
+                ? "flex h-10 items-center justify-center gap-2 rounded-le-md bg-le-ink-900 text-sm font-le-semibold text-le-on-accent"
+                : "flex h-10 items-center justify-center gap-2 rounded-le-md border border-le-ink-200 text-sm font-le-medium text-le-ink-600 hover:bg-le-ink-50"
             }
           >
             <Sparkles aria-hidden="true" size={15} />
@@ -499,8 +499,8 @@ export function AiGeneratePanel({
             onClick={() => setMode("gif")}
             className={
               isGif
-                ? "flex h-10 items-center justify-center gap-2 rounded-dpe-md bg-dpe-ink-900 text-sm font-dpe-semibold text-dpe-on-accent"
-                : "flex h-10 items-center justify-center gap-2 rounded-dpe-md border border-dpe-ink-200 text-sm font-dpe-medium text-dpe-ink-600 hover:bg-dpe-ink-50"
+                ? "flex h-10 items-center justify-center gap-2 rounded-le-md bg-le-ink-900 text-sm font-le-semibold text-le-on-accent"
+                : "flex h-10 items-center justify-center gap-2 rounded-le-md border border-le-ink-200 text-sm font-le-medium text-le-ink-600 hover:bg-le-ink-50"
             }
           >
             <Sparkles aria-hidden="true" size={15} />
@@ -511,12 +511,12 @@ export function AiGeneratePanel({
 
       {/* GIF 모드: 배경 투명 토글(기본 ON). 상세페이지 움짤은 대체로 배경 투명. */}
       {isGif ? (
-        <label className="flex cursor-pointer items-center justify-between rounded-dpe-md border border-dpe-ink-200 px-3 py-2.5">
+        <label className="flex cursor-pointer items-center justify-between rounded-le-md border border-le-ink-200 px-3 py-2.5">
           <span className="flex flex-col">
-            <span className="text-sm font-dpe-medium text-dpe-ink-800">
+            <span className="text-sm font-le-medium text-le-ink-800">
               {t("detailPage.aiGenerate.transparentBg")}
             </span>
-            <span className="text-[11px] leading-4 text-dpe-ink-500">
+            <span className="text-[11px] leading-4 text-le-ink-500">
               {t("detailPage.aiGenerate.transparentBgHint")}
             </span>
           </span>
@@ -524,7 +524,7 @@ export function AiGeneratePanel({
             type="checkbox"
             checked={transparent}
             onChange={(e) => setTransparent(e.target.checked)}
-            className="h-4 w-4 accent-dpe-ink-900"
+            className="h-4 w-4 accent-le-ink-900"
           />
         </label>
       ) : null}
@@ -532,23 +532,23 @@ export function AiGeneratePanel({
       {/* 이미지 모델(티어) 선택 — GIF 모드는 단일 모델이라 숨긴다. */}
       <div hidden={isGif}>
         <div className="mb-2 flex items-center gap-1">
-          <p className="text-xs font-dpe-medium text-dpe-ink-500">{t("detailPage.aiGenerate.imageModel")}</p>
+          <p className="text-xs font-le-medium text-le-ink-500">{t("detailPage.aiGenerate.imageModel")}</p>
           <Tooltip>
             <TooltipTrigger asChild>
               <button
                 type="button"
-                className="flex h-4 w-4 items-center justify-center rounded-full text-dpe-ink-400 hover:text-dpe-ink-600"
+                className="flex h-4 w-4 items-center justify-center rounded-full text-le-ink-400 hover:text-le-ink-600"
                 aria-label={t("detailPage.aiGenerate.modelQualityHelp")}
               >
                 <Info aria-hidden="true" size={13} />
               </button>
             </TooltipTrigger>
             <TooltipContent side="left" className="max-w-[240px] text-left">
-              <p className="mb-1 font-dpe-semibold">{t("detailPage.aiGenerate.modelTooltipTitle")}</p>
+              <p className="mb-1 font-le-semibold">{t("detailPage.aiGenerate.modelTooltipTitle")}</p>
               <ul className="space-y-1">
                 {tierOptions.map((tk) => (
                   <li key={tk}>
-                    <span className="font-dpe-medium">{IMAGE_TIER_META[tk].label}</span>
+                    <span className="font-le-medium">{IMAGE_TIER_META[tk].label}</span>
                     <span className="opacity-80"> · {IMAGE_TIER_META[tk].quality}</span>
                   </li>
                 ))}
@@ -567,20 +567,20 @@ export function AiGeneratePanel({
               return (
                 <SelectItem key={tk} value={tk} className="items-start py-2">
                   <div className="flex flex-col gap-0.5 pr-2">
-                    <span className="flex items-center gap-1.5 text-sm font-dpe-medium text-dpe-ink-900">
+                    <span className="flex items-center gap-1.5 text-sm font-le-medium text-le-ink-900">
                       {meta.label}
                       {meta.badge ? (
-                        <span className="rounded-full bg-dpe-ink-900 px-1.5 py-px text-[10px] font-dpe-semibold text-dpe-on-accent">
+                        <span className="rounded-full bg-le-ink-900 px-1.5 py-px text-[10px] font-le-semibold text-le-on-accent">
                           {meta.badge}
                         </span>
                       ) : null}
                       {typeof cost === "number" && cost > 0 ? (
-                        <span className="text-[11px] font-dpe-normal text-dpe-ink-500">
+                        <span className="text-[11px] font-le-normal text-le-ink-500">
                           · {cost}cr
                         </span>
                       ) : null}
                     </span>
-                    <span className="text-[11px] leading-4 text-dpe-ink-500">
+                    <span className="text-[11px] leading-4 text-le-ink-500">
                       {meta.quality}
                     </span>
                   </div>
@@ -589,7 +589,7 @@ export function AiGeneratePanel({
             })}
           </SelectContent>
         </Select>
-        <p className="mt-1.5 text-[11px] leading-4 text-dpe-ink-500">
+        <p className="mt-1.5 text-[11px] leading-4 text-le-ink-500">
           {IMAGE_TIER_META[activeTier].description}
         </p>
       </div>
@@ -601,10 +601,10 @@ export function AiGeneratePanel({
           - 좌측 자유 생성: GIF는 참조 필수(image→video), 이미지는 선택 업로드. */}
       {hasImplicitReference && implicitReferenceSrc ? (
         <div>
-          <p className="mb-2 text-xs font-dpe-medium text-dpe-ink-500">
+          <p className="mb-2 text-xs font-le-medium text-le-ink-500">
             {t("detailPage.aiGenerate.currentImageLabel")}
           </p>
-          <div className="relative overflow-hidden rounded-dpe-lg border border-dpe-ink-200 bg-dpe-ink-50">
+          <div className="relative overflow-hidden rounded-le-lg border border-le-ink-200 bg-le-ink-50">
             {/* crossOrigin: S3 이미지를 Origin 없이 그리면 ACAO 없는 응답이 캐시돼
                 캔버스 crossOrigin 로드를 오염시킨다. 미리보기도 Origin을 실어 로드한다. */}
             {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -615,7 +615,7 @@ export function AiGeneratePanel({
               className="h-36 w-full object-contain"
             />
           </div>
-          <p className="mt-1.5 text-[11px] leading-4 text-dpe-ink-500">
+          <p className="mt-1.5 text-[11px] leading-4 text-le-ink-500">
             {isGif
               ? t("detailPage.aiGenerate.currentImageGifHint")
               : t("detailPage.aiGenerate.currentImageHint")}
@@ -627,7 +627,7 @@ export function AiGeneratePanel({
               type="button"
               onClick={() => void openAnnotate()}
               disabled={annotatePreparing || loading}
-              className="mt-2 inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-dpe-md border border-dpe-ink-200 text-xs font-dpe-medium text-dpe-ink-700 hover:bg-dpe-ink-50 disabled:cursor-not-allowed disabled:opacity-40"
+              className="mt-2 inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-le-md border border-le-ink-200 text-xs font-le-medium text-le-ink-700 hover:bg-le-ink-50 disabled:cursor-not-allowed disabled:opacity-40"
             >
               {annotatePreparing ? (
                 <Loader2 aria-hidden="true" className="animate-spin" size={14} />
@@ -640,29 +640,29 @@ export function AiGeneratePanel({
         </div>
       ) : (
       <div hidden={isGif && hasImplicitReference}>
-        <p className="mb-2 text-xs font-dpe-medium text-dpe-ink-500">
+        <p className="mb-2 text-xs font-le-medium text-le-ink-500">
           {t("detailPage.aiGenerate.referenceLabel")}{" "}
           {isGif ? (
-            <span className="text-dpe-danger-500">*</span>
+            <span className="text-le-danger-500">*</span>
           ) : (
             t("detailPage.aiGenerate.referenceOptional")
           )}
         </p>
         {refUrl ? (
-          <div className="relative overflow-hidden rounded-dpe-lg border border-dpe-ink-200">
+          <div className="relative overflow-hidden rounded-le-lg border border-le-ink-200">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img src={refUrl} crossOrigin="anonymous" alt={t("detailPage.aiGenerate.referenceAlt")} className="h-36 w-full object-cover" />
             <button
               type="button"
               onClick={() => setRefUrl(null)}
-              className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full bg-dpe-scrim/60 text-dpe-on-accent hover:bg-dpe-scrim/80"
+              className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full bg-le-scrim/60 text-le-on-accent hover:bg-le-scrim/80"
               aria-label={t("detailPage.aiGenerate.removeReference")}
             >
               <X aria-hidden="true" size={15} />
             </button>
           </div>
         ) : (
-          <label className="flex h-36 cursor-pointer flex-col items-center justify-center gap-2 rounded-dpe-lg border border-dashed border-dpe-ink-300 text-dpe-ink-400 hover:border-dpe-ink-400 hover:text-dpe-ink-500">
+          <label className="flex h-36 cursor-pointer flex-col items-center justify-center gap-2 rounded-le-lg border border-dashed border-le-ink-300 text-le-ink-400 hover:border-le-ink-400 hover:text-le-ink-500">
             {refUploading ? (
               <Loader2 aria-hidden="true" className="animate-spin" size={22} />
             ) : (
@@ -682,35 +682,35 @@ export function AiGeneratePanel({
 
       {/* 프롬프트 */}
       <div className="flex min-h-0 flex-1 flex-col">
-        <label className="mb-2 text-xs font-dpe-medium text-dpe-ink-500">
-          {t("detailPage.aiGenerate.prompt")} <span className="text-dpe-danger-500">*</span>
+        <label className="mb-2 text-xs font-le-medium text-le-ink-500">
+          {t("detailPage.aiGenerate.prompt")} <span className="text-le-danger-500">*</span>
         </label>
         <textarea
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
           placeholder={t("detailPage.aiGenerate.promptPlaceholder")}
-          className="min-h-[160px] flex-1 resize-none rounded-dpe-lg border border-dpe-ink-200 p-3 text-sm text-dpe-ink-800 outline-none placeholder:text-dpe-ink-400 focus:border-dpe-ink-400"
+          className="min-h-[160px] flex-1 resize-none rounded-le-lg border border-le-ink-200 p-3 text-sm text-le-ink-800 outline-none placeholder:text-le-ink-400 focus:border-le-ink-400"
         />
       </div>
 
       {error ? (
-        <p className="text-xs font-dpe-medium text-dpe-danger-600">{error}</p>
+        <p className="text-xs font-le-medium text-le-danger-600">{error}</p>
       ) : null}
 
       {/* 1.5× 안전 마진 미달(또는 생성 중 크레딧 부족) → 차단 안내 + 추가구매 CTA */}
       {activeCost > 0 && (blocked || insufficient) ? (
-        <div className="rounded-dpe-lg border border-dpe-warn-200 bg-dpe-warn-50 px-3 py-2.5 text-center">
-          <p className="text-[13px] font-dpe-medium text-dpe-warn-800">
+        <div className="rounded-le-lg border border-le-warn-200 bg-le-warn-50 px-3 py-2.5 text-center">
+          <p className="text-[13px] font-le-medium text-le-warn-800">
             {t("detailPage.aiGenerate.insufficientCreditsTitle")}
           </p>
-          <p className="mt-0.5 text-[11px] leading-4 text-dpe-warn-700">
+          <p className="mt-0.5 text-[11px] leading-4 text-le-warn-700">
             {t("detailPage.aiGenerate.insufficientCreditsHint", { required, balance: creditBalance })}
           </p>
           <button
             type="button"
             onClick={onBuyCredits}
             disabled={!onBuyCredits}
-            className="mt-2 inline-flex items-center gap-1.5 rounded-dpe-md bg-dpe-ink-900 px-3 py-1.5 text-xs font-dpe-medium text-dpe-on-accent disabled:opacity-40"
+            className="mt-2 inline-flex items-center gap-1.5 rounded-le-md bg-le-ink-900 px-3 py-1.5 text-xs font-le-medium text-le-on-accent disabled:opacity-40"
           >
             <Sparkles aria-hidden="true" size={13} />
             {t("detailPage.aiGenerate.buyCredits")}
@@ -719,7 +719,7 @@ export function AiGeneratePanel({
       ) : null}
 
       {gifMissingRef ? (
-        <p className="text-xs font-dpe-medium text-dpe-ink-500">
+        <p className="text-xs font-le-medium text-le-ink-500">
           {t("detailPage.aiGenerate.gifNeedsReference")}
         </p>
       ) : null}
@@ -729,7 +729,7 @@ export function AiGeneratePanel({
         onClick={handleGenerate}
         disabled={loading || !prompt.trim() || blocked || gifMissingRef}
         className={
-          "relative flex h-11 items-center justify-center gap-2 overflow-hidden rounded-dpe-lg bg-dpe-ink-900 text-sm font-dpe-semibold text-dpe-on-accent " +
+          "relative flex h-11 items-center justify-center gap-2 overflow-hidden rounded-le-lg bg-le-ink-900 text-sm font-le-semibold text-le-on-accent " +
           (loading
             ? "cursor-progress"
             : "disabled:cursor-not-allowed disabled:opacity-40")
@@ -755,7 +755,7 @@ export function AiGeneratePanel({
                 ? t("detailPage.aiGenerate.replaceImage")
                 : t("detailPage.aiGenerate.generate")}
           {activeCost > 0 && !loading ? (
-            <span className="text-xs font-dpe-normal opacity-80">· {activeCost}cr</span>
+            <span className="text-xs font-le-normal opacity-80">· {activeCost}cr</span>
           ) : null}
         </span>
       </button>

package/components/detail-page/annotation-canvas.tsx

@@ -677,7 +677,7 @@ export const AnnotationCanvas = forwardRef<
   return (
     <div
       ref={wrapRef}
-      className="relative h-full w-full overflow-hidden bg-dpe-ink-100"
+      className="relative h-full w-full overflow-hidden bg-le-ink-100"
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
@@ -792,7 +792,7 @@ export const AnnotationCanvas = forwardRef<
       ) : null}
 
       <div className="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center">
-        <div className="pointer-events-auto flex items-center gap-0.5 rounded-dpe-xl border border-dpe-ink-200 bg-dpe-surface/95 px-1.5 py-1 shadow-lg backdrop-blur-sm">
+        <div className="pointer-events-auto flex items-center gap-0.5 rounded-le-xl border border-le-ink-200 bg-le-surface/95 px-1.5 py-1 shadow-lg backdrop-blur-sm">
           {TOOLS.map(([id, label, icon]) => (
             <button
               key={id}
@@ -802,16 +802,16 @@ export const AnnotationCanvas = forwardRef<
               aria-pressed={tool === id}
               onClick={() => setTool(id)}
               className={[
-                "flex h-8 w-8 items-center justify-center rounded-dpe-lg transition-colors",
+                "flex h-8 w-8 items-center justify-center rounded-le-lg transition-colors",
                 tool === id
-                  ? "bg-dpe-ink-900 text-dpe-on-accent"
-                  : "text-dpe-ink-500 hover:bg-dpe-ink-100 hover:text-dpe-ink-900",
+                  ? "bg-le-ink-900 text-le-on-accent"
+                  : "text-le-ink-500 hover:bg-le-ink-100 hover:text-le-ink-900",
               ].join(" ")}
             >
               {icon}
             </button>
           ))}
-          <span className="mx-1 h-5 w-px bg-dpe-ink-200" />
+          <span className="mx-1 h-5 w-px bg-le-ink-200" />
           {COLORS.map((c) => (
             <button
               key={c}
@@ -831,14 +831,14 @@ export const AnnotationCanvas = forwardRef<
               />
             </button>
           ))}
-          <span className="mx-1 h-5 w-px bg-dpe-ink-200" />
+          <span className="mx-1 h-5 w-px bg-le-ink-200" />
           <button
             type="button"
             title={labels?.undo ?? "실행 취소"}
             aria-label={labels?.undo ?? "실행 취소"}
             disabled={!history.past.length}
             onClick={undo}
-            className="flex h-8 w-8 items-center justify-center rounded-dpe-lg text-dpe-ink-500 transition-colors hover:bg-dpe-ink-100 hover:text-dpe-ink-900 disabled:cursor-not-allowed disabled:opacity-30"
+            className="flex h-8 w-8 items-center justify-center rounded-le-lg text-le-ink-500 transition-colors hover:bg-le-ink-100 hover:text-le-ink-900 disabled:cursor-not-allowed disabled:opacity-30"
           >
             <Undo2 size={16} />
           </button>
@@ -848,7 +848,7 @@ export const AnnotationCanvas = forwardRef<
             aria-label={labels?.redo ?? "다시 실행"}
             disabled={!history.future.length}
             onClick={redo}
-            className="flex h-8 w-8 items-center justify-center rounded-dpe-lg text-dpe-ink-500 transition-colors hover:bg-dpe-ink-100 hover:text-dpe-ink-900 disabled:cursor-not-allowed disabled:opacity-30"
+            className="flex h-8 w-8 items-center justify-center rounded-le-lg text-le-ink-500 transition-colors hover:bg-le-ink-100 hover:text-le-ink-900 disabled:cursor-not-allowed disabled:opacity-30"
           >
             <Redo2 size={16} />
           </button>

package/components/detail-page/annotation-dialog.tsx

@@ -210,18 +210,18 @@ export function AnnotationDialog({
   const canSubmit = !busy && (hasMarks || instruction.trim().length > 0);
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-dpe-ink-900/60 p-4">
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-le-ink-900/60 p-4">
       <div
         role="dialog"
         aria-modal="true"
         aria-label={title}
-        className="flex h-full max-h-[92vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl bg-dpe-surface shadow-2xl"
+        className="flex h-full max-h-[92vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl bg-le-surface shadow-2xl"
       >
-        <div className="flex items-start justify-between gap-4 border-b border-dpe-ink-200 px-5 py-3">
+        <div className="flex items-start justify-between gap-4 border-b border-le-ink-200 px-5 py-3">
           <div className="min-w-0">
-            <h2 className="text-sm font-dpe-semibold text-dpe-ink-900">{title}</h2>
+            <h2 className="text-sm font-le-semibold text-le-ink-900">{title}</h2>
             {description ? (
-              <p className="mt-0.5 text-xs text-dpe-ink-500">{description}</p>
+              <p className="mt-0.5 text-xs text-le-ink-500">{description}</p>
             ) : null}
           </div>
           <button
@@ -229,7 +229,7 @@ export function AnnotationDialog({
             aria-label={t("detailPage.annotate.close", { defaultValue: "닫기" })}
             onClick={onClose}
             disabled={busy}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-dpe-lg text-dpe-ink-400 transition-colors hover:bg-dpe-ink-100 hover:text-dpe-ink-900 disabled:opacity-40"
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-le-lg text-le-ink-400 transition-colors hover:bg-le-ink-100 hover:text-le-ink-900 disabled:opacity-40"
           >
             <X size={16} />
           </button>
@@ -255,7 +255,7 @@ export function AnnotationDialog({
           />
         </div>
 
-        <div className="border-t border-dpe-ink-200 px-5 py-3">
+        <div className="border-t border-le-ink-200 px-5 py-3">
           <textarea
             value={instruction}
             onChange={(e) => setInstruction(e.target.value)}
@@ -268,16 +268,16 @@ export function AnnotationDialog({
                   "표시한 곳을 어떻게 바꿀지 적어주세요. 그림 위에 손글씨로 적어도 돼요.",
               })
             }
-            className="w-full resize-none rounded-dpe-lg border border-dpe-ink-200 px-3 py-2 text-sm text-dpe-ink-900 outline-none placeholder:text-dpe-ink-400 focus:border-dpe-ink-400 disabled:bg-dpe-ink-50"
+            className="w-full resize-none rounded-le-lg border border-le-ink-200 px-3 py-2 text-sm text-le-ink-900 outline-none placeholder:text-le-ink-400 focus:border-le-ink-400 disabled:bg-le-ink-50"
           />
           {maxReferences > 0 ? (
             <div className="mt-2 flex flex-wrap items-start gap-2">
               {references.map((ref, index) => (
                 <div
                   key={ref.id}
-                  className="flex items-start gap-2 rounded-dpe-lg border border-dpe-ink-200 p-1.5"
+                  className="flex items-start gap-2 rounded-le-lg border border-le-ink-200 p-1.5"
                 >
-                  <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-dpe-md bg-dpe-ink-100">
+                  <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-le-md bg-le-ink-100">
                     {/* 붙인 사진은 data URI라 next/image 로 최적화할 것이 없다. */}
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img
@@ -289,7 +289,7 @@ export function AnnotationDialog({
                     />
                     {/* 번호는 프롬프트에 쓰는 이름이다 — 화면에 없으면 "2번 이미지"라고
                         적을 근거가 없다. */}
-                    <span className="absolute left-0.5 top-0.5 rounded bg-dpe-ink-900/75 px-1 text-[10px] font-dpe-semibold leading-4 text-dpe-on-accent">
+                    <span className="absolute left-0.5 top-0.5 rounded bg-le-ink-900/75 px-1 text-[10px] font-le-semibold leading-4 text-le-on-accent">
                       {referenceOrdinal(index)}
                     </span>
                     <button
@@ -301,7 +301,7 @@ export function AnnotationDialog({
                       aria-label={t("detailPage.reauthor.referenceRemove", {
                         defaultValue: "참고 사진 빼기",
                       })}
-                      className="absolute right-0.5 top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-dpe-ink-900/70 text-dpe-on-accent disabled:opacity-40"
+                      className="absolute right-0.5 top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-le-ink-900/70 text-le-on-accent disabled:opacity-40"
                     >
                       <X size={10} />
                     </button>
@@ -320,8 +320,8 @@ export function AnnotationDialog({
                           onClick={() => toggleAspect(ref.id, aspect.key)}
                           className={`rounded-full border px-2 py-0.5 text-[11px] transition-colors disabled:opacity-40 ${
                             on
-                              ? "border-dpe-ink-900 bg-dpe-ink-900 text-dpe-on-accent"
-                              : "border-dpe-ink-200 text-dpe-ink-500 hover:border-dpe-ink-400 hover:text-dpe-ink-700"
+                              ? "border-le-ink-900 bg-le-ink-900 text-le-on-accent"
+                              : "border-le-ink-200 text-le-ink-500 hover:border-le-ink-400 hover:text-le-ink-700"
                           }`}
                         >
                           {aspect.label}
@@ -336,7 +336,7 @@ export function AnnotationDialog({
                   type="button"
                   disabled={busy}
                   onClick={() => fileRef.current?.click()}
-                  className="flex h-[4.75rem] items-center gap-1.5 rounded-dpe-lg border border-dashed border-dpe-ink-300 px-3 text-xs text-dpe-ink-500 transition-colors hover:border-dpe-ink-400 hover:text-dpe-ink-700 disabled:opacity-40"
+                  className="flex h-[4.75rem] items-center gap-1.5 rounded-le-lg border border-dashed border-le-ink-300 px-3 text-xs text-le-ink-500 transition-colors hover:border-le-ink-400 hover:text-le-ink-700 disabled:opacity-40"
                 >
                   <ImagePlus size={14} />
                   {t("detailPage.reauthor.referenceAdd", {
@@ -353,7 +353,7 @@ export function AnnotationDialog({
                 onChange={(e) => void attach(e.target.files)}
               />
               {references.length ? (
-                <p className="w-full text-[11px] text-dpe-ink-400">
+                <p className="w-full text-[11px] text-le-ink-400">
                   {t("detailPage.reauthor.referenceHint", {
                     defaultValue:
                       "축을 고르면 그 장에서는 고른 것만 따라가요(안 고르면 배치와 구성만). " +
@@ -365,12 +365,12 @@ export function AnnotationDialog({
             </div>
           ) : null}
           {error || flattenError || attachError ? (
-            <p className="mt-2 text-xs text-dpe-danger-600">
+            <p className="mt-2 text-xs text-le-danger-600">
               {error ?? flattenError ?? attachError}
             </p>
           ) : null}
           <div className="mt-3 flex items-center justify-between gap-3">
-            <p className="text-xs text-dpe-ink-400">
+            <p className="text-xs text-le-ink-400">
               {hasMarks
                 ? t("detailPage.annotate.marked", {
                     defaultValue: "표시한 자리를 기준으로 고쳐요.",

package/components/detail-page/canvas-context-menu.tsx

@@ -201,10 +201,10 @@ export const CanvasContextMenu = observer(function CanvasContextMenu({
         role="menu"
         data-dp-canvas-menu
         // 포털이 body 로 나가 편집기 뿌리 밖에 놓인다 — 딱지를 다시 달아야 소비자 앱이
-        // `[data-dpe-root]` 로 좁혀 둔 색·모서리 토큰이 이 메뉴에도 먹는다.
-        data-dpe-root=""
+        // `[data-le-root]` 로 좁혀 둔 색·모서리 토큰이 이 메뉴에도 먹는다.
+        data-le-root=""
         style={{ left, top, width: MENU_WIDTH }}
-        className="fixed z-[71] rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface py-1 shadow-lg"
+        className="fixed z-[71] rounded-le-lg border border-le-ink-200 bg-le-surface py-1 shadow-lg"
       >
         {items.map((item) => {
           const Icon = CANVAS_MENU_ICONS[item.action];
@@ -212,7 +212,7 @@ export const CanvasContextMenu = observer(function CanvasContextMenu({
           return (
             <div key={item.action}>
               {item.separated ? (
-                <div className="my-1 border-t border-dpe-ink-100" />
+                <div className="my-1 border-t border-le-ink-100" />
               ) : null}
               <button
                 type="button"
@@ -223,9 +223,9 @@ export const CanvasContextMenu = observer(function CanvasContextMenu({
                   runCanvasMenuAction(s, item.action);
                   close();
                 }}
-                className="flex h-[30px] w-full items-center gap-2.5 px-3 text-left text-[13px] text-dpe-ink-700 transition-colors hover:bg-dpe-ink-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
+                className="flex h-[30px] w-full items-center gap-2.5 px-3 text-left text-[13px] text-le-ink-700 transition-colors hover:bg-le-ink-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
               >
-                <Icon size={14} className="shrink-0 text-dpe-ink-500" />
+                <Icon size={14} className="shrink-0 text-le-ink-500" />
                 {label}
               </button>
             </div>