diff --git a/src/components/plan/ContentStrategy.tsx b/src/components/plan/ContentStrategy.tsx
index 0ec04c5..f15f7fe 100644
--- a/src/components/plan/ContentStrategy.tsx
+++ b/src/components/plan/ContentStrategy.tsx
@@ -144,43 +144,55 @@ export default function ContentStrategy({ data }: ContentStrategyProps) {
       )}
 
       {/* Tab 3: Production Workflow */}
-      {activeTab === 'workflow' && (
-        <motion.div
-          className="flex md:flex-row flex-col gap-4 items-stretch"
-          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">
-              <motion.div
-                className="flex-1 w-full rounded-2xl border border-slate-100 bg-white shadow-sm p-5"
-                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">
-                  {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>
-                <div className="flex flex-wrap gap-2">
-                  <span className="rounded-full bg-[#F3F0FF] text-[#4A3A7C] px-2 py-1 text-xs">
-                    {step.owner}
-                  </span>
-                  <span className="rounded-full bg-slate-100 text-slate-600 px-2 py-1 text-xs">
-                    {step.duration}
-                  </span>
-                </div>
-              </motion.div>
-              {i < data.workflow.length - 1 && (
-                <ArrowRight
-                  size={20}
-                  className="text-slate-300 shrink-0 hidden md:block"
-                />
-              )}
-            </div>
-          ))}
-        </motion.div>
-      )}
+      {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={`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="relative">
+                <motion.div
+                  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 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 flex-1">{step.description}</p>
+                  <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>
+                    <span className="rounded-full bg-slate-100 text-slate-600 px-2 py-1 text-xs">
+                      {step.duration}
+                    </span>
+                  </div>
+                </motion.div>
+                {i < data.workflow.length - 1 && (
+                  <ArrowRight
+                    size={20}
+                    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' && (