MapleStory 폰트 font-display: optional 로 override해 CLS 제거

개발자도구 Performance 분석 결과 CLS 0.17로 레이아웃 이동이 큼. JSDelivr
Maplestory.css의 font-display: swap이 폰트 도착 시 텍스트 너비를 swap
시켜서 카드 애니메이션 중에 레이아웃 튀어 버벅임 발생.

- JSDelivr CSS 링크 제거하고 @font-face를 index.html에 직접 선언하며
  font-display: optional 로 변경
- woff2만 참조 (fallback 포맷 제거)
- cdn.jsdelivr.net preconnect 추가해 첫 방문 시에도 빠르게 시도

첫 방문 시: fallback(Noto Sans KR)으로 즉시 렌더, Maplestory가 100ms
내 도착하지 못하면 그대로 유지. 이후 캐시된 재방문부터는 정상 적용.
레이아웃 이동 0, 애니메이션 부드럽게 진행.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/index.html

@@ -6,8 +6,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet" />
-    <link href="https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory.css" rel="stylesheet" />
+    <!-- MapleStory 폰트: font-display: optional 로 override. 첫 방문시 폰트가 100ms 내에
+         도착하지 않으면 fallback 유지, 이후 캐시되면 적용됨. 레이아웃 이동 제거 목적. -->
+    <style>
+      @font-face {
+        font-family: 'Maplestory';
+        font-weight: 300;
+        font-style: normal;
+        font-display: optional;
+        src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Light.woff2') format('woff2');
+      }
+      @font-face {
+        font-family: 'Maplestory';
+        font-weight: 700;
+        font-style: normal;
+        font-display: optional;
+        src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Bold.woff2') format('woff2');
+      }
+    </style>
     <script type="text/javascript" src="https://openapi.nexon.com/js/analytics.js?app_id=274844" async></script>
     <script>
       (function () {