fix: Production Workflow 카드 크기·위치 균일화

- Flexbox + items-center → CSS Grid 전환 (모든 컬럼 동일 너비)
- 카드 h-full + flex flex-col 로 높이 균등 (description 길이 무관)
- description flex-1 + 태그 mt-auto 로 하단 칩 정렬 통일
- 화살표 absolute -right-3 분리 (카드 너비에 영향 없음)
- step 수 4·5·6·7·8 모두 grid-cols 명시 (Tailwind purge 안전)

7개 데모 (view/banobagi/grand/wonjin/ts/irum/o2o) 모두 적용
- step 4: irum  / step 5: view  / step 6: 나머지 5개

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/plan/ContentStrategy.tsx

@@ -144,25 +144,36 @@ export default function ContentStrategy({ data }: ContentStrategyProps) {
       )}
 
       {/* Tab 3: Production Workflow */}
-      {activeTab === 'workflow' && (
+      {activeTab === 'workflow' && (() => {
+        // step 수에 따라 동일 너비 grid 컬럼 매핑 (Tailwind purge 안전)
+        const cols = data.workflow.length;
+        const gridColsClass =
+          cols <= 3 ? 'md:grid-cols-3'
+          : cols === 4 ? 'md:grid-cols-4'
+          : cols === 5 ? 'md:grid-cols-5'
+          : cols === 6 ? 'md:grid-cols-6'
+          : cols === 7 ? 'md:grid-cols-7'
+          : 'md:grid-cols-8';
+
+        return (
           <motion.div
-          className="flex md:flex-row flex-col gap-4 items-stretch"
+            className={`grid grid-cols-1 ${gridColsClass} gap-4`}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.4 }}
           >
             {data.workflow.map((step, i) => (
-            <div key={step.step} className="flex md:flex-row flex-col items-center gap-4 flex-1">
+              <div key={step.step} className="relative">
                 <motion.div
-                className="flex-1 w-full rounded-2xl border border-slate-100 bg-white shadow-sm p-5"
+                  className="h-full w-full rounded-2xl border border-slate-100 bg-white shadow-sm p-5 flex flex-col"
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.4, delay: i * 0.1 }}
                 >
-                <div className="w-10 h-10 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white font-bold flex items-center justify-center mb-3">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white font-bold flex items-center justify-center mb-3 shrink-0">
                     {step.step}
                   </div>
                   <h4 className="font-semibold text-[#0A1128] mb-1">{step.name}</h4>
-                <p className="text-sm text-slate-600 mb-3">{step.description}</p>
+                  <p className="text-sm text-slate-600 mb-3 flex-1">{step.description}</p>
-                <div className="flex flex-wrap gap-2">
+                  <div className="flex flex-wrap gap-2 mt-auto">
                     <span className="rounded-full bg-[#F3F0FF] text-[#4A3A7C] px-2 py-1 text-xs">
                       {step.owner}
                     </span>
@@ -174,13 +185,14 @@ export default function ContentStrategy({ data }: ContentStrategyProps) {
                 {i < data.workflow.length - 1 && (
                   <ArrowRight
                     size={20}
-                  className="text-slate-300 shrink-0 hidden md:block"
+                    className="text-slate-300 absolute -right-3 top-1/2 -translate-y-1/2 hidden md:block z-10"
                   />
                 )}
               </div>
             ))}
           </motion.div>
-      )}
+        );
+      })()}
 
       {/* Tab 4: Repurposing */}
       {activeTab === 'repurposing' && (