frontend: 가독성 개선 — Pretendard 웹폰트 실제 로드 + 저대비 텍스트 상향

- index.html: Pretendard Variable(dynamic-subset) CDN 로드 추가.
  지금까지 font-family 에 이름만 있고 로드가 없어 Windows 에서
  맑은 고딕 폴백으로 렌더링 → 글씨가 가늘고 흐릿하게 보였음
- globals.css: 폰트 스택에 "Pretendard Variable" 추가
- ScheduleBoard: 메타/보조 텍스트 대비·크기 상향
  (11px→12px, white/35~55 → white/50~85, 상태 배지·순위 배지·칩 포함)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/index.html

@@ -5,6 +5,14 @@
     <link rel="icon" href="/icons/profile.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#14171C" />
+
+    <!-- Pretendard 웹폰트 — globals.css 의 font-family 가 참조. 미로드 시 Windows 는
+         맑은 고딕 폴백으로 떨어져 글씨가 가늘고 흐릿해진다. dynamic-subset: 쓰인 글자만 로드 -->
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+    />
     <title>TriplePick 2026 | AI 2026 글로벌 축구 축전 승부예측 — GPT vs Claude vs Gemini</title>
     <meta
       name="description"

frontend/src/components/ScheduleBoard.tsx

@@ -18,11 +18,11 @@ function shortDate(iso: string, lang: Lang): string {
 
 const PHASE_CLS: Record<MatchPhase, string> = {
   open: "border-[#94FBE0] text-[#94FBE0]",
-  scheduled: "border-[var(--line-d)] text-[var(--ink-muted)]",
-  locked: "border-[var(--line-d)] text-white/45",
+  scheduled: "border-white/20 text-white/60",
+  locked: "border-white/20 text-white/60",
   live: "border-[#FF5B5B] text-[#FF5B5B]",
-  finished: "border-white/15 text-white/55",
-  cancelled: "border-white/10 text-white/35",
+  finished: "border-white/25 text-white/70",
+  cancelled: "border-white/10 text-white/40",
 };
 
 // 토너먼트 탭 라운드 칩 정렬(대진 순서)
@@ -201,7 +201,7 @@ export default function ScheduleBoard({
     <section className="mt-6">
       <div className="mb-3 flex items-baseline gap-2.5">
         <h2 className="shrink-0 text-[22px] font-extrabold">{t.schedTitle}</h2>
-        <span className="whitespace-nowrap text-[12px] text-white/55">{t.schedGuide}</span>
+        <span className="whitespace-nowrap text-[12px] text-white/65">{t.schedGuide}</span>
       </div>
 
       {/* 탭: 축구 = 날짜별/조별리그/토너먼트 · 야구 = 날짜별/팀별 */}
@@ -213,7 +213,7 @@ export default function ScheduleBoard({
             className={`-mb-px border-b-2 pb-2 text-[15px] font-bold transition ${
               effTab === k
                 ? "border-[var(--green)] text-white"
-                : "border-transparent text-white/45"
+                : "border-transparent text-white/60"
             }`}
           >
             {tabLabel(k)}
@@ -271,7 +271,7 @@ export default function ScheduleBoard({
       {effTab !== "rank" && (
       <div className="flex flex-col gap-2.5">
         {shown.length === 0 && (
-          <p className="py-6 text-center text-[13px] text-white/45">
+          <p className="py-6 text-center text-[13px] text-white/60">
             {effTab === "tournament"
               ? lang === "en"
                 ? "Bracket is set after the group stage."
@@ -394,7 +394,7 @@ function Chip({
       className={`shrink-0 whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[13px] font-bold transition ${
         active
           ? "border-[#94FBE0] text-[#94FBE0]"
-          : "border-[var(--line-d)] text-white/55"
+          : "border-white/20 text-white/70"
       }`}
     >
       {children}
@@ -404,7 +404,7 @@ function Chip({
 
 // MLS 최근 5경기 폼 — "WWLDW" 를 W/D/L 색으로 표시
 export function FormBadges({ form }: { form?: string | null }) {
-  if (!form) return <span className="text-white/35">?</span>;
+  if (!form) return <span className="text-white/50">?</span>;
   return (
     <span className="inline-flex gap-px font-mono font-extrabold tracking-tight">
       {form.split("").map((c, i) => (
@@ -415,7 +415,7 @@ export function FormBadges({ form }: { form?: string | null }) {
               ? "text-[#94FBE0]"
               : c === "L"
                 ? "text-[#FF5B5B]/80"
-                : "text-white/45"
+                : "text-white/60"
           }
         >
           {c}
@@ -429,7 +429,7 @@ export function FormBadges({ form }: { form?: string | null }) {
 function RankBadge({ rank, lang = "ko" }: { rank?: number | null; lang?: Lang }) {
   if (!rank) return null;
   return (
-    <span className="shrink-0 rounded border border-white/15 px-1 py-px text-[10px] font-bold text-white/45">
+    <span className="shrink-0 rounded border border-white/25 px-1 py-px text-[11px] font-bold text-white/60">
       {lang === "en" ? `#${rank}` : `${rank}위`}
     </span>
   );
@@ -493,21 +493,21 @@ function MatchCard({
   // 비투표(타 조)는 클릭 비활성, 투표 가능 조(A)는 상세로 이동
   const inner = (
     <>
-      <div className="flex items-center justify-between text-[11px]">
-        <span className="font-mono font-bold text-white/70">
+      <div className="flex items-center justify-between text-[12px]">
+        <span className="font-mono font-bold text-white/85">
           {showDate && (
-            <span className="text-white/55">{shortDate(dateKey(match.kickoffKst), lang)} </span>
+            <span className="text-white/65">{shortDate(dateKey(match.kickoffKst), lang)} </span>
           )}
-          {timeOnly(match.kickoffKst)} <span className="text-white/40">KST</span>
+          {timeOnly(match.kickoffKst)} <span className="text-white/55">KST</span>
           {isClub && match.venue ? (
-            <span className="text-white/40"> · {match.venue}</span>
+            <span className="text-white/55"> · {match.venue}</span>
           ) : match.group && match.roundLabel ? (
             <> · {tRound(match.roundLabel, lang)}</>
           ) : null}
         </span>
         <span className="flex items-center gap-1.5">
           {!isClub && (
-            <span className="text-[11px] font-bold text-white/45">
+            <span className="text-[11px] font-bold text-white/60">
               {match.group
                 ? lang === "en"
                   ? `Group ${match.group}`
@@ -560,29 +560,29 @@ function MatchCard({
 
       {/* 야구: 선발 매치업 (프리뷰 캐시 있을 때만) */}
       {isBaseball && !match.result && (match.extras?.starterA || match.extras?.starterB) && (
-        <div className="mt-2 text-center text-[11px] font-semibold text-white/50">
-          <span className="text-white/35">{lang === "en" ? "SP" : "선발"}</span>{" "}
+        <div className="mt-2 text-center text-[12px] font-semibold text-white/65">
+          <span className="text-white/50">{lang === "en" ? "SP" : "선발"}</span>{" "}
           {match.extras?.starterA?.name ?? "?"}
-          <span className="px-1 text-white/30">vs</span>
+          <span className="px-1 text-white/45">vs</span>
           {match.extras?.starterB?.name ?? "?"}
         </div>
       )}
 
       {/* MLS: 최근 5경기 폼 (프리뷰 캐시 있을 때만) — 홈(왼쪽) 먼저 */}
       {isMls && !match.result && (match.extras?.formA || match.extras?.formB) && (
-        <div className="mt-2 text-center text-[11px] font-semibold text-white/50">
-          <span className="text-white/35">{lang === "en" ? "Last 5" : "최근 5경기"}</span>{" "}
+        <div className="mt-2 text-center text-[12px] font-semibold text-white/65">
+          <span className="text-white/50">{lang === "en" ? "Last 5" : "최근 5경기"}</span>{" "}
           <FormBadges form={match.extras?.formB} />
-          <span className="px-1 text-white/30">vs</span>
+          <span className="px-1 text-white/45">vs</span>
           <FormBadges form={match.extras?.formA} />
         </div>
       )}
 
       {/* 투표 가능 조만: AI 픽 갈림 + 참여수 + 이동 화살표 (취소 경기는 숨김) */}
       {match.votable && phase !== "cancelled" && (
-        <div className="mt-3 flex items-center justify-between text-[11px] font-bold text-[#F4F3FE]">
+        <div className="mt-3 flex items-center justify-between text-[12px] font-bold text-[#F4F3FE]">
           <span>
-            <span className="font-semibold text-white/55">{t.aiPicks}</span>{" "}
+            <span className="font-semibold text-white/65">{t.aiPicks}</span>{" "}
             {aiSplit(match, lang).join(" · ")}
           </span>
           <span className="flex items-center gap-2">

frontend/src/globals.css

@@ -42,8 +42,8 @@ body {
 
 body {
   font-family:
-    "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
-    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
+    "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
+    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
   margin: 0;
 }