Update app.py

app.py

@@ -47,52 +47,56 @@ def process_url_for_iframe(url):
         return f"https://huggingface.co/spaces/{owner}/{name}/embed", True, []
     return url, False, []
 
-# ───────────────────── 4. 카드 그리드 HTML ───────────────
-# ───────────────────── 6. HTML 그리드 ───────────────────
 # ───────────────────── 6. HTML 그리드 ───────────────────
 def html(cards, pg, total):
     if not cards:
         return "<div style='text-align:center;padding:70px;color:#555;'>표시할 배포가 없습니다.</div>"
+
     css = r"""
     <style>
-    body{margin:0;padding:0;font-family:Poppins,sans-serif;background:#f0f0f0;overflow-x:hidden;overflow-y:auto;}
+    /* 파스텔 그라디에이션 배경 */
+    body{
+        margin:0;padding:0;font-family:Poppins,sans-serif;
+        background:linear-gradient(135deg,#fdf4ff 0%,#f6fbff 50%,#fffaf4 100%);
+        background-attachment:fixed;
+        overflow-x:hidden;overflow-y:auto;
+    }
+
     .container{width:100%;padding:10px 10px 70px;box-sizing:border-box;}
     .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;}
     .card{
         background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,0.08);
         height:420px;display:flex;flex-direction:column;position:relative;
     }
+
+    /* 게임 화면 축소 */
     .frame{flex:1;position:relative;overflow:hidden;}
     .frame iframe{
-        position:absolute;top:0;left:0;width:166.667%;height:166.667%;
+        position:absolute;top:0;left:0;
+        width:166.667%;height:166.667%;
         transform:scale(0.6);transform-origin:top left;border:0;
     }
     .frame.huggingface iframe{width:100%!important;height:100%!important;transform:none!important;border:none!important;}
 
-    /* 하단 바로가기 바 */
-    .foot{
-        height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
-        background:#fafafa;border-top:1px solid #eee;
-    }
-    .foot a{
-        font-size:0.85rem;font-weight:600;color:#4a6dd8;text-decoration:none;
-    }
+    /* 하단 바로가기 */
+    .foot{height:34px;display:flex;align-items:center;justify-content:center;background:#fafafa;border-top:1px solid #eee;}
+    .foot a{font-size:0.85rem;font-weight:600;color:#4a6dd8;text-decoration:none;}
     .foot a:hover{text-decoration:underline;}
 
-    /* 반응형 카드 높이 */
+    /* 반응형 높이 */
     @media(min-width:1200px){.card{height:560px;}}
     @media(max-width:767px){
         .grid{grid-template-columns:1fr;}
         .card{height:480px;}
     }
     </style>"""
-    
+
     js = """
     <script>
-    /* (허깅페이스 iframe 로딩 오류 처리 스크립트 – 기존과 동일) */
+    /* 허깅페이스 iframe 로딩 오류 처리(생략 - 기존 스크립트 그대로) */
     </script>
     """
-    
+
     h = css + js + '<div class="container"><div class="grid">'
     for idx, url in enumerate(cards):
         iframe_url, is_huggingface, alt_urls = process_url_for_iframe(url)
@@ -113,7 +117,6 @@ def html(cards, pg, total):
     return h
 
 
-
 # ───────────────────── 5. Gradio UI ─────────────────────
 def build():
     _init_best()