@leviosa-ai/detail-page-editor 0.2.2 → 0.3.0

package/components/cardnews/color-input.tsx

@@ -278,7 +278,7 @@ export function ColorInput({
       <button
         type="button"
         onClick={() => open ? setOpen(false) : openPopover()}
-        className={`${swatchPx} rounded-lg border-2 border-[var(--color-border)] cursor-pointer shrink-0 transition-all hover:border-[var(--color-primary)] hover:shadow-md hover:scale-105 active:scale-95`}
+        className={`${swatchPx} rounded-dpe-lg border-2 border-[var(--color-border)] cursor-pointer shrink-0 transition-all hover:border-[var(--color-primary)] hover:shadow-md hover:scale-105 active:scale-95`}
         style={{
           backgroundColor: isTransparentValue ? undefined : safeColor,
           backgroundImage: isTransparentValue ? CHECKER_BG : undefined,
@@ -293,7 +293,7 @@ export function ColorInput({
         <div
           ref={popoverRef}
           data-layer-panel
-          className={`fixed z-[200] w-56 bg-[var(--color-background)] border border-[var(--color-border)] rounded-xl shadow-lg p-3 space-y-2.5 transition-opacity duration-75 ${measured ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+          className={`fixed z-[200] w-56 bg-[var(--color-background)] border border-[var(--color-border)] rounded-dpe-xl shadow-lg p-3 space-y-2.5 transition-opacity duration-75 ${measured ? "opacity-100" : "opacity-0 pointer-events-none"}`}
           style={{ top: popoverPos.top, left: popoverPos.left }}
         >
           {/* Transparent + Preset palette */}
@@ -302,7 +302,7 @@ export function ColorInput({
               <button
                 type="button"
                 onClick={() => selectColor("transparent")}
-                className={`w-7 h-7 rounded-md border transition-transform hover:scale-110 active:scale-95 relative overflow-hidden ${
+                className={`w-7 h-7 rounded-dpe-md border transition-transform hover:scale-110 active:scale-95 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" }}
@@ -310,7 +310,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-red-500 rotate-45" />
+                  <span className="block w-[130%] h-px bg-dpe-danger-500 rotate-45" />
                 </span>
               </button>
             )}
@@ -319,7 +319,7 @@ export function ColorInput({
                 key={color}
                 type="button"
                 onClick={() => selectColor(color)}
-                className={`w-7 h-7 rounded-md border transition-transform hover:scale-110 active:scale-95 ${
+                className={`w-7 h-7 rounded-dpe-md border transition-transform hover:scale-110 active:scale-95 ${
                   !isTransparentValue && safeColor.toUpperCase() === color ? "border-[var(--color-primary)] ring-1 ring-[var(--color-primary)]" : "border-[var(--color-border)]"
                 }`}
                 style={{ backgroundColor: color }}
@@ -338,13 +338,13 @@ export function ColorInput({
                     key={color}
                     type="button"
                     onClick={() => selectColor(color)}
-                    className={`size-5 rounded-md border transition-transform hover:scale-110 active:scale-95 ${
+                    className={`size-5 rounded-dpe-md border transition-transform hover:scale-110 active:scale-95 ${
                       !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-md border border-transparent" />
+                  <span key={idx} className="size-5 rounded-dpe-md border border-transparent" />
                 );
               })}
             </div>
@@ -356,7 +356,7 @@ export function ColorInput({
               <button
                 type="button"
                 onClick={openEyeDropper}
-                className="flex shrink-0 items-center gap-1 rounded-lg 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-dpe-lg 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" />
@@ -369,7 +369,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-lg border border-[var(--color-border)] px-2 py-1.5 text-xs font-mono focus:outline-none focus:border-[var(--color-primary)]"
+              className="min-w-0 flex-1 rounded-dpe-lg border border-[var(--color-border)] px-2 py-1.5 text-xs font-mono focus:outline-none focus:border-[var(--color-primary)]"
             />
           </div>
         </div>,

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

@@ -470,8 +470,8 @@ export function AiGeneratePanel({
             onClick={() => setMode("image")}
             className={
               mode === "image"
-                ? "flex h-10 items-center justify-center gap-2 rounded-md bg-neutral-900 text-sm font-semibold text-white"
-                : "flex h-10 items-center justify-center gap-2 rounded-md border border-neutral-200 text-sm font-medium text-neutral-600 hover:bg-neutral-50"
+                ? "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"
             }
           >
             <Sparkles aria-hidden="true" size={15} />
@@ -482,8 +482,8 @@ export function AiGeneratePanel({
             onClick={() => setMode("gif")}
             className={
               isGif
-                ? "flex h-10 items-center justify-center gap-2 rounded-md bg-neutral-900 text-sm font-semibold text-white"
-                : "flex h-10 items-center justify-center gap-2 rounded-md border border-neutral-200 text-sm font-medium text-neutral-600 hover:bg-neutral-50"
+                ? "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"
             }
           >
             <Sparkles aria-hidden="true" size={15} />
@@ -494,12 +494,12 @@ export function AiGeneratePanel({
 
       {/* GIF 모드: 배경 투명 토글(기본 ON). 상세페이지 움짤은 대체로 배경 투명. */}
       {isGif ? (
-        <label className="flex cursor-pointer items-center justify-between rounded-md border border-neutral-200 px-3 py-2.5">
+        <label className="flex cursor-pointer items-center justify-between rounded-dpe-md border border-dpe-ink-200 px-3 py-2.5">
           <span className="flex flex-col">
-            <span className="text-sm font-medium text-neutral-800">
+            <span className="text-sm font-dpe-medium text-dpe-ink-800">
               {t("detailPage.aiGenerate.transparentBg")}
             </span>
-            <span className="text-[11px] leading-4 text-neutral-500">
+            <span className="text-[11px] leading-4 text-dpe-ink-500">
               {t("detailPage.aiGenerate.transparentBgHint")}
             </span>
           </span>
@@ -507,7 +507,7 @@ export function AiGeneratePanel({
             type="checkbox"
             checked={transparent}
             onChange={(e) => setTransparent(e.target.checked)}
-            className="h-4 w-4 accent-neutral-900"
+            className="h-4 w-4 accent-dpe-ink-900"
           />
         </label>
       ) : null}
@@ -515,23 +515,23 @@ export function AiGeneratePanel({
       {/* 이미지 모델(티어) 선택 — GIF 모드는 단일 모델이라 숨긴다. */}
       <div hidden={isGif}>
         <div className="mb-2 flex items-center gap-1">
-          <p className="text-xs font-medium text-neutral-500">{t("detailPage.aiGenerate.imageModel")}</p>
+          <p className="text-xs font-dpe-medium text-dpe-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-neutral-400 hover:text-neutral-600"
+                className="flex h-4 w-4 items-center justify-center rounded-full text-dpe-ink-400 hover:text-dpe-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-semibold">{t("detailPage.aiGenerate.modelTooltipTitle")}</p>
+              <p className="mb-1 font-dpe-semibold">{t("detailPage.aiGenerate.modelTooltipTitle")}</p>
               <ul className="space-y-1">
                 {IMAGE_TIERS.map((tk) => (
                   <li key={tk}>
-                    <span className="font-medium">{IMAGE_TIER_META[tk].label}</span>
+                    <span className="font-dpe-medium">{IMAGE_TIER_META[tk].label}</span>
                     <span className="opacity-80"> · {IMAGE_TIER_META[tk].quality}</span>
                   </li>
                 ))}
@@ -550,20 +550,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-medium text-neutral-900">
+                    <span className="flex items-center gap-1.5 text-sm font-dpe-medium text-dpe-ink-900">
                       {meta.label}
                       {meta.badge ? (
-                        <span className="rounded-full bg-neutral-900 px-1.5 py-px text-[10px] font-semibold text-white">
+                        <span className="rounded-full bg-dpe-ink-900 px-1.5 py-px text-[10px] font-dpe-semibold text-dpe-on-accent">
                           {meta.badge}
                         </span>
                       ) : null}
                       {typeof cost === "number" && cost > 0 ? (
-                        <span className="text-[11px] font-normal text-neutral-500">
+                        <span className="text-[11px] font-dpe-normal text-dpe-ink-500">
                           · {cost}cr
                         </span>
                       ) : null}
                     </span>
-                    <span className="text-[11px] leading-4 text-neutral-500">
+                    <span className="text-[11px] leading-4 text-dpe-ink-500">
                       {meta.quality}
                     </span>
                   </div>
@@ -572,7 +572,7 @@ export function AiGeneratePanel({
             })}
           </SelectContent>
         </Select>
-        <p className="mt-1.5 text-[11px] leading-4 text-neutral-500">
+        <p className="mt-1.5 text-[11px] leading-4 text-dpe-ink-500">
           {IMAGE_TIER_META[tier].description}
         </p>
       </div>
@@ -584,10 +584,10 @@ export function AiGeneratePanel({
           - 좌측 자유 생성: GIF는 참조 필수(image→video), 이미지는 선택 업로드. */}
       {hasImplicitReference && implicitReferenceSrc ? (
         <div>
-          <p className="mb-2 text-xs font-medium text-neutral-500">
+          <p className="mb-2 text-xs font-dpe-medium text-dpe-ink-500">
             {t("detailPage.aiGenerate.currentImageLabel")}
           </p>
-          <div className="relative overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50">
+          <div className="relative overflow-hidden rounded-dpe-lg border border-dpe-ink-200 bg-dpe-ink-50">
             {/* crossOrigin: S3 이미지를 Origin 없이 그리면 ACAO 없는 응답이 캐시돼
                 캔버스 crossOrigin 로드를 오염시킨다. 미리보기도 Origin을 실어 로드한다. */}
             {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -598,7 +598,7 @@ export function AiGeneratePanel({
               className="h-36 w-full object-contain"
             />
           </div>
-          <p className="mt-1.5 text-[11px] leading-4 text-neutral-500">
+          <p className="mt-1.5 text-[11px] leading-4 text-dpe-ink-500">
             {isGif
               ? t("detailPage.aiGenerate.currentImageGifHint")
               : t("detailPage.aiGenerate.currentImageHint")}
@@ -610,7 +610,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-md border border-neutral-200 text-xs font-medium text-neutral-700 hover:bg-neutral-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-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"
             >
               {annotatePreparing ? (
                 <Loader2 aria-hidden="true" className="animate-spin" size={14} />
@@ -623,29 +623,29 @@ export function AiGeneratePanel({
         </div>
       ) : (
       <div hidden={isGif && hasImplicitReference}>
-        <p className="mb-2 text-xs font-medium text-neutral-500">
+        <p className="mb-2 text-xs font-dpe-medium text-dpe-ink-500">
           {t("detailPage.aiGenerate.referenceLabel")}{" "}
           {isGif ? (
-            <span className="text-red-500">*</span>
+            <span className="text-dpe-danger-500">*</span>
           ) : (
             t("detailPage.aiGenerate.referenceOptional")
           )}
         </p>
         {refUrl ? (
-          <div className="relative overflow-hidden rounded-lg border border-neutral-200">
+          <div className="relative overflow-hidden rounded-dpe-lg border border-dpe-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-black/60 text-white hover:bg-black/80"
+              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"
               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-lg border border-dashed border-neutral-300 text-neutral-400 hover:border-neutral-400 hover:text-neutral-500">
+          <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">
             {refUploading ? (
               <Loader2 aria-hidden="true" className="animate-spin" size={22} />
             ) : (
@@ -665,35 +665,35 @@ export function AiGeneratePanel({
 
       {/* 프롬프트 */}
       <div className="flex min-h-0 flex-1 flex-col">
-        <label className="mb-2 text-xs font-medium text-neutral-500">
-          {t("detailPage.aiGenerate.prompt")} <span className="text-red-500">*</span>
+        <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>
         <textarea
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
           placeholder={t("detailPage.aiGenerate.promptPlaceholder")}
-          className="min-h-[160px] flex-1 resize-none rounded-lg border border-neutral-200 p-3 text-sm text-neutral-800 outline-none placeholder:text-neutral-400 focus:border-neutral-400"
+          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"
         />
       </div>
 
       {error ? (
-        <p className="text-xs font-medium text-red-600">{error}</p>
+        <p className="text-xs font-dpe-medium text-dpe-danger-600">{error}</p>
       ) : null}
 
       {/* 1.5× 안전 마진 미달(또는 생성 중 크레딧 부족) → 차단 안내 + 추가구매 CTA */}
       {activeCost > 0 && (blocked || insufficient) ? (
-        <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2.5 text-center">
-          <p className="text-[13px] font-medium text-amber-800">
+        <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">
             {t("detailPage.aiGenerate.insufficientCreditsTitle")}
           </p>
-          <p className="mt-0.5 text-[11px] leading-4 text-amber-700">
+          <p className="mt-0.5 text-[11px] leading-4 text-dpe-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-md bg-neutral-900 px-3 py-1.5 text-xs font-medium text-white disabled:opacity-40"
+            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"
           >
             <Sparkles aria-hidden="true" size={13} />
             {t("detailPage.aiGenerate.buyCredits")}
@@ -702,7 +702,7 @@ export function AiGeneratePanel({
       ) : null}
 
       {gifMissingRef ? (
-        <p className="text-xs font-medium text-neutral-500">
+        <p className="text-xs font-dpe-medium text-dpe-ink-500">
           {t("detailPage.aiGenerate.gifNeedsReference")}
         </p>
       ) : null}
@@ -712,7 +712,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-lg bg-neutral-900 text-sm font-semibold text-white " +
+          "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 " +
           (loading
             ? "cursor-progress"
             : "disabled:cursor-not-allowed disabled:opacity-40")
@@ -738,7 +738,7 @@ export function AiGeneratePanel({
                 ? t("detailPage.aiGenerate.replaceImage")
                 : t("detailPage.aiGenerate.generate")}
           {activeCost > 0 && !loading ? (
-            <span className="text-xs font-normal opacity-80">· {activeCost}cr</span>
+            <span className="text-xs font-dpe-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-neutral-100"
+      className="relative h-full w-full overflow-hidden bg-dpe-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-xl border border-neutral-200 bg-white/95 px-1.5 py-1 shadow-lg backdrop-blur-sm">
+        <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">
           {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-lg transition-colors",
+                "flex h-8 w-8 items-center justify-center rounded-dpe-lg transition-colors",
                 tool === id
-                  ? "bg-neutral-900 text-white"
-                  : "text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900",
+                  ? "bg-dpe-ink-900 text-dpe-on-accent"
+                  : "text-dpe-ink-500 hover:bg-dpe-ink-100 hover:text-dpe-ink-900",
               ].join(" ")}
             >
               {icon}
             </button>
           ))}
-          <span className="mx-1 h-5 w-px bg-neutral-200" />
+          <span className="mx-1 h-5 w-px bg-dpe-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-neutral-200" />
+          <span className="mx-1 h-5 w-px bg-dpe-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-lg text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900 disabled:cursor-not-allowed disabled:opacity-30"
+            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"
           >
             <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-lg text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900 disabled:cursor-not-allowed disabled:opacity-30"
+            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"
           >
             <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-neutral-900/60 p-4">
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-dpe-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-white shadow-2xl"
+        className="flex h-full max-h-[92vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl bg-dpe-surface shadow-2xl"
       >
-        <div className="flex items-start justify-between gap-4 border-b border-neutral-200 px-5 py-3">
+        <div className="flex items-start justify-between gap-4 border-b border-dpe-ink-200 px-5 py-3">
           <div className="min-w-0">
-            <h2 className="text-sm font-semibold text-neutral-900">{title}</h2>
+            <h2 className="text-sm font-dpe-semibold text-dpe-ink-900">{title}</h2>
             {description ? (
-              <p className="mt-0.5 text-xs text-neutral-500">{description}</p>
+              <p className="mt-0.5 text-xs text-dpe-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-lg text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-900 disabled:opacity-40"
+            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"
           >
             <X size={16} />
           </button>
@@ -255,7 +255,7 @@ export function AnnotationDialog({
           />
         </div>
 
-        <div className="border-t border-neutral-200 px-5 py-3">
+        <div className="border-t border-dpe-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-lg border border-neutral-200 px-3 py-2 text-sm text-neutral-900 outline-none placeholder:text-neutral-400 focus:border-neutral-400 disabled:bg-neutral-50"
+            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"
           />
           {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-lg border border-neutral-200 p-1.5"
+                  className="flex items-start gap-2 rounded-dpe-lg border border-dpe-ink-200 p-1.5"
                 >
-                  <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-md bg-neutral-100">
+                  <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-dpe-md bg-dpe-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-neutral-900/75 px-1 text-[10px] font-semibold leading-4 text-white">
+                    <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">
                       {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-neutral-900/70 text-white disabled:opacity-40"
+                      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"
                     >
                       <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-neutral-900 bg-neutral-900 text-white"
-                              : "border-neutral-200 text-neutral-500 hover:border-neutral-400 hover:text-neutral-700"
+                              ? "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"
                           }`}
                         >
                           {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-lg border border-dashed border-neutral-300 px-3 text-xs text-neutral-500 transition-colors hover:border-neutral-400 hover:text-neutral-700 disabled:opacity-40"
+                  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"
                 >
                   <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-neutral-400">
+                <p className="w-full text-[11px] text-dpe-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-red-600">
+            <p className="mt-2 text-xs text-dpe-danger-600">
               {error ?? flattenError ?? attachError}
             </p>
           ) : null}
           <div className="mt-3 flex items-center justify-between gap-3">
-            <p className="text-xs text-neutral-400">
+            <p className="text-xs text-dpe-ink-400">
               {hasMarks
                 ? t("detailPage.annotate.marked", {
                     defaultValue: "표시한 자리를 기준으로 고쳐요.",

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

@@ -200,7 +200,7 @@ export const CanvasContextMenu = observer(function CanvasContextMenu({
         role="menu"
         data-dp-canvas-menu
         style={{ left, top, width: MENU_WIDTH }}
-        className="fixed z-[71] rounded-lg border border-neutral-200 bg-white py-1 shadow-lg"
+        className="fixed z-[71] rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface py-1 shadow-lg"
       >
         {items.map((item) => {
           const Icon = ICONS[item.action];
@@ -208,7 +208,7 @@ export const CanvasContextMenu = observer(function CanvasContextMenu({
           return (
             <div key={item.action}>
               {item.separated ? (
-                <div className="my-1 border-t border-neutral-100" />
+                <div className="my-1 border-t border-dpe-ink-100" />
               ) : null}
               <button
                 type="button"
@@ -219,9 +219,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-neutral-700 transition-colors hover:bg-neutral-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-dpe-ink-700 transition-colors hover:bg-dpe-ink-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
               >
-                <Icon size={14} className="shrink-0 text-neutral-500" />
+                <Icon size={14} className="shrink-0 text-dpe-ink-500" />
                 {label}
               </button>
             </div>