From a81c7f564419d939879cbbc7986ebd61e840dab9 Mon Sep 17 00:00:00 2001
From: jwkim <jwkim@o2o.kr>
Date: Wed, 24 Jun 2026 15:18:18 +0900
Subject: [PATCH] =?UTF-8?q?=ED=88=AC=ED=91=9C=20=EC=A0=9C=EC=B6=9C?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Arena.tsx | 143 +++++++++++++++---------------
 1 file changed, 73 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/Arena.tsx b/frontend/src/components/Arena.tsx
index 63237e7..d4ade6e 100644
--- a/frontend/src/components/Arena.tsx
+++ b/frontend/src/components/Arena.tsx
@@ -289,9 +289,12 @@ export default function Arena({
             );
           })}
         </div>
+      </section>
 
+      {/* ===== 내 예측 카드 (당신의 선택 + 스코어 + 제출) — AI 예측과 분리 ===== */}
+      <section className="mt-5 rounded-2xl border-2 border-[var(--green)]/60 bg-[var(--bg2)] p-5 shadow-[0_0_24px_rgba(74,255,160,0.08)]">
         {/* 당신의 선택 */}
-        <div className="mt-5 flex items-center justify-between">
+        <div className="flex items-center justify-between">
           <span className="text-[13px] font-bold text-[var(--ink-muted)]">
             {t.yourPickLabel}
           </span>
@@ -342,6 +345,74 @@ export default function Arena({
             </>
           )}
         </div>
+
+        {/* 투표 제출 (이메일 + CTA) — '당신의 선택' 카드 안으로 통합 */}
+        {!finished && !disabled && step === "form" && (
+          <div className="mt-4 border-t border-[var(--line-d)] pt-4">
+            <div className="mb-2.5 text-center text-[15px] font-extrabold text-[var(--green)]">
+              {t.emailGate}
+            </div>
+            <input
+              type="email"
+              inputMode="email"
+              list="tp-email-suggestions"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder={t.emailPh}
+              className="w-full rounded-2xl border border-[var(--share)] bg-[#0f1217] px-4 py-3 text-[16px] text-white shadow-[0_0_0_2px_rgba(166,94,255,0.12)] outline-none focus:shadow-[0_0_0_2px_rgba(166,94,255,0.3)]"
+            />
+            {recentEmails.length > 0 && (
+              <datalist id="tp-email-suggestions">
+                {recentEmails.map((e) => (
+                  <option key={e} value={e} />
+                ))}
+              </datalist>
+            )}
+            <label className="mt-2.5 flex items-start gap-2 text-[13px] leading-snug text-[var(--ink-muted)]">
+              <input
+                type="checkbox"
+                checked={notify}
+                onChange={(e) => setNotify(e.target.checked)}
+                className="mt-0.5 accent-[var(--share)]"
+              />
+              {t.notify}
+            </label>
+            {error && (
+              <p className="mt-2 text-[13px] font-bold text-[#ff6b6b]">{error}</p>
+            )}
+            {/* 투표하기 버튼 — 한국-남아공전에서만 양옆에 한국·일본 캐릭터(자동 말풍선) */}
+            <div className="mt-3.5 flex items-end justify-center gap-1">
+              {isKorRsa && (
+                <TalkingMascot
+                  src="/assets/mascots/dog_point.webp"
+                  lines={DOG_LINES}
+                  className="h-16 w-auto select-none sm:h-20"
+                  auto
+                  autoDelayMs={1200}
+                  autoIntervalMs={6000}
+                />
+              )}
+              <button
+                onClick={confirmSubmit}
+                disabled={!emailValid || submitting}
+                className="btn-share flex flex-1 items-center justify-center gap-1.5 rounded-2xl py-3 text-[15px] font-extrabold transition active:scale-[0.99] disabled:opacity-[0.72]"
+              >
+                {submitting ? "…" : <>{t.submit} <span aria-hidden>→</span></>}
+              </button>
+              {isKorRsa && (
+                <TalkingMascot
+                  src="/assets/mascots/tiger_point.webp"
+                  lines={TIGER_LINES}
+                  className="h-16 w-auto select-none sm:h-20"
+                  auto
+                  autoDelayMs={4200}
+                  autoIntervalMs={6000}
+                />
+              )}
+            </div>
+          </div>
+        )}
       </section>
 
       {/* ===== 종료된 경기: 결과 보기 ===== */}
@@ -387,74 +458,6 @@ export default function Arena({
         </button>
       )}
 
-      {/* ===== 투표 제출 (D5): 이메일 + 단일 CTA를 한 카드로 통합 ===== */}
-      {!finished && !disabled && step === "form" && (
-        <div className="mt-5 rounded-2xl border-2 border-[var(--green)]/60 bg-[var(--bg2)] p-4 shadow-[0_0_24px_rgba(74,255,160,0.08)]">
-          <div className="mb-2.5 text-center text-[15px] font-extrabold text-[var(--green)]">
-            {t.emailGate}
-          </div>
-          <input
-            type="email"
-            inputMode="email"
-            list="tp-email-suggestions"
-            autoComplete="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder={t.emailPh}
-            className="w-full rounded-2xl border border-[var(--share)] bg-[#0f1217] px-4 py-3 text-[16px] text-white shadow-[0_0_0_2px_rgba(166,94,255,0.12)] outline-none focus:shadow-[0_0_0_2px_rgba(166,94,255,0.3)]"
-          />
-          {recentEmails.length > 0 && (
-            <datalist id="tp-email-suggestions">
-              {recentEmails.map((e) => (
-                <option key={e} value={e} />
-              ))}
-            </datalist>
-          )}
-          <label className="mt-2.5 flex items-start gap-2 text-[13px] leading-snug text-[var(--ink-muted)]">
-            <input
-              type="checkbox"
-              checked={notify}
-              onChange={(e) => setNotify(e.target.checked)}
-              className="mt-0.5 accent-[var(--share)]"
-            />
-            {t.notify}
-          </label>
-          {error && (
-            <p className="mt-2 text-[13px] font-bold text-[#ff6b6b]">{error}</p>
-          )}
-          {/* 투표하기 버튼 — 한국-남아공전에서만 양옆에 한국·일본 캐릭터(탭 시 투표 말풍선) */}
-          <div className="mt-3.5 flex items-end justify-center gap-1">
-            {isKorRsa && (
-              <TalkingMascot
-                src="/assets/mascots/dog_point.webp"
-                lines={DOG_LINES}
-                className="h-16 w-auto select-none sm:h-20"
-                auto
-                autoDelayMs={1200}
-                autoIntervalMs={6000}
-              />
-            )}
-            <button
-              onClick={confirmSubmit}
-              disabled={!emailValid || submitting}
-              className="btn-share flex flex-1 items-center justify-center gap-1.5 rounded-2xl py-3 text-[15px] font-extrabold transition active:scale-[0.99] disabled:opacity-[0.72]"
-            >
-              {submitting ? "…" : <>{t.submit} <span aria-hidden>→</span></>}
-            </button>
-            {isKorRsa && (
-              <TalkingMascot
-                src="/assets/mascots/tiger_point.webp"
-                lines={TIGER_LINES}
-                className="h-16 w-auto select-none sm:h-20"
-                auto
-                autoDelayMs={4200}
-                autoIntervalMs={6000}
-              />
-            )}
-          </div>
-        </div>
-      )}
-
       {/* ===== 제출 완료: 같은 AI + 경기별 공유 (D8) ===== */}
       {!finished && step === "done" && outcome && (
         <div className="mt-5 rounded-2xl border border-[var(--green)]/50 bg-[var(--bg2)] p-5">
@@ -688,7 +691,7 @@ function Stepper({
         −
       </StepBtn>
       <div className="flex w-12 flex-col items-center">
-        <span className="font-mono text-[32px] font-extrabold leading-none tabular-nums">
+        <span className="font-mono text-[32px] font-extrabold leading-none tabular-nums text-[var(--ink)]">
           {value}
         </span>
         <span className="mt-1 text-[11px] text-[var(--ink-muted)]">{label}</span>