fix : correct color

components/commission/request-summary.tsx

@@ -2,15 +2,15 @@ import Image from "next/image";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { elementBackgroundColor } from "@/lib/catalog/element";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
 import type { CommissionRequest } from "@/lib/commission/request";
 import { cn } from "@/lib/utils";
 
 type Item = { key: string; name: string; imageUrl: string; rarity?: number | null; element?: string | null };
 type Catalog = { characters: Item[]; weapons: Item[]; artifacts: Item[] };
 
-function ItemImage({ item, size = "small" }: { item: Item; size?: "small" | "large" }) {
-  return <div title={item.name} className={cn("relative aspect-square min-w-0 overflow-hidden rounded-lg", rarityGradientClass(item.rarity))}>
+function ItemImage({ item, size = "small", character = false }: { item: Item; size?: "small" | "large"; character?: boolean }) {
+  return <div title={item.name} className={cn("relative aspect-square min-w-0 overflow-hidden rounded-lg", character ? characterRarityGradientClass(item.key, item.rarity) : rarityGradientClass(item.rarity))}>
     <Image src={item.imageUrl} alt={item.name} fill sizes={size === "large" ? "160px" : "64px"} className="object-contain" />
   </div>;
 }
@@ -30,7 +30,7 @@ function CommissionTeamCard({ team, index, catalog }: { team: CommissionRequest[
           const artifact = artifacts.get(member.artifactKey);
           return <div key={memberIndex} className="min-w-0 rounded-lg p-1 lg:p-1.5" style={{ backgroundColor: elementBackgroundColor(character?.element) }}>
             <div className="grid grid-cols-1 gap-1 lg:grid-cols-[2fr_1fr]">
-              {character ? <ItemImage item={character} size="large" /> : <div className="aspect-square rounded-lg bg-muted" />}
+              {character ? <ItemImage item={character} size="large" character /> : <div className="aspect-square rounded-lg bg-muted" />}
               <div className="grid min-w-0 grid-cols-2 gap-0.5 lg:grid-cols-1 lg:grid-rows-2 lg:gap-1">
                 {weapon ? <ItemImage item={weapon} /> : <div title={member.weaponKey} className="aspect-square rounded-lg bg-muted" />}
                 {artifact ? <ItemImage item={artifact} /> : <div title={member.artifactKey} className="aspect-square rounded-lg bg-muted" />}
@@ -77,7 +77,7 @@ export function CommissionRequestSummary({ request, catalog, amountBaht }: {
                 : <p key={key} className="w-16 wrap-break-word text-xs">{key}</p>;
             })}
           </div>
-          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
+          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" character /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
         </CardContent>
       </Card>;
     })}
@@ -89,7 +89,7 @@ export function CommissionRequestSummary({ request, catalog, amountBaht }: {
         </CardHeader>
         <CardContent className="grid grid-cols-[minmax(0,1fr)_64px] items-center gap-3">
           <div className="flex min-w-0 flex-wrap gap-2">{set.levels.map((level) => <Badge key={level} variant="outline">C{level}</Badge>)}</div>
-          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
+          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" character /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
         </CardContent>
       </Card>;
     })}