fix(poster) : show fifth base stat

components/public/material-poster.tsx

@@ -83,7 +83,9 @@ export function MaterialPoster({
   bleeding?: Array<{ id: string; imageUrl: string | null; amount: number; blendMode: PosterBlendMode }>;
 }) {
   const dragStart = useRef<{ pointerId: number; x: number; y: number; offsetX: number; offsetY: number } | null>(null);
-  const stats = character.baseStats.slice(0, 4);
+  const stats = character.baseStats.slice(0, 5);
+  const statBoxCount = Math.max(4, stats.length);
+  const hasFiveStats = statBoxCount === 5;
   const materials = mergePosterMaterials(
     [...character.ascension, ...character.leveling].flatMap((group) => group.items),
   );
@@ -191,7 +193,7 @@ export function MaterialPoster({
       <div className="absolute inset-x-[4%] top-[5%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic" }}>
         <h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>BASE STATS</h2>
         <div className="mt-[4%] flex w-[53%] flex-col gap-[1.2cqw]">
-          {Array.from({ length: 4 }, (_, index) => {
+          {Array.from({ length: statBoxCount }, (_, index) => {
             const stat = stats[index];
             const iconName = stat ? statIconName(stat.key) : null;
             return (
@@ -216,7 +218,7 @@ export function MaterialPoster({
         </div>
       </div>
 
-      <div className="absolute inset-x-[4%] top-[49%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic" }}>
+      <div className={cn("absolute inset-x-[4%]", hasFiveStats ? "top-[57%]" : "top-[49%]")} style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic" }}>
         <h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>MATERIALS</h2>
         <p className="mt-[1%] text-[4.5cqw] leading-none">LV.90</p>
         <div className="mt-[5%] grid grid-cols-8 gap-[1.2%]">