Update app.py

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 
-# MBTI 질문 데이터 (각 차원당 5개씩 총 20개)
+# MBTI 질문 데이터
 questions = [
     # E vs I (외향 vs 내향)
     {"text": "새로운 사람들을 만나는 것이 즐겁고 에너지가 충전된다.", "dimension": "EI", "direction": "E"},
@@ -34,118 +34,512 @@ questions = [
 # MBTI 유형별 설명
 mbti_descriptions = {
     "INTJ": {
-        "title": "전략가 (Architect)",
+        "title": "전략가",
+        "subtitle": "Architect",
+        "emoji": "🏛️",
         "description": "상상력이 풍부하고 전략적인 사고를 가진 완벽주의자입니다.",
-        "strengths": "논리적, 독립적, 결단력 있음, 창의적 문제 해결",
-        "weaknesses": "지나치게 비판적, 감정 표현 어려움, 고집스러움"
+        "strengths": ["논리적 사고", "독립적 성향", "결단력", "창의적 문제 해결"],
+        "weaknesses": ["지나친 비판", "감정 표현 어려움", "고집스러움"],
+        "color": "#6B46C1"
     },
     "INTP": {
-        "title": "논리술사 (Logician)",
+        "title": "논리술사",
+        "subtitle": "Logician",
+        "emoji": "🔬",
         "description": "혁신적인 발명가로 끊임없는 지식의 갈증을 가지고 있습니다.",
-        "strengths": "분석적, 객관적, 창의적, 열린 마음",
-        "weaknesses": "실용성 부족, 감정 둔감, 우유부단함"
+        "strengths": ["분석적 사고", "객관적 판단", "창의성", "열린 마음"],
+        "weaknesses": ["실용성 부족", "감정 둔감", "우유부단함"],
+        "color": "#805AD5"
     },
     "ENTJ": {
-        "title": "통솔자 (Commander)",
+        "title": "통솔자",
+        "subtitle": "Commander",
+        "emoji": "⚔️",
         "description": "대담하고 상상력이 풍부한 강력한 지도자입니다.",
-        "strengths": "리더십, 효율적, 자신감, 전략적 사고",
-        "weaknesses": "참을성 부족, 오만함, 감정 무시"
+        "strengths": ["타고난 리더십", "효율성", "자신감", "전략적 사고"],
+        "weaknesses": ["참을성 부족", "오만함", "감정 무시"],
+        "color": "#D97706"
     },
     "ENTP": {
-        "title": "변론가 (Debater)",
+        "title": "변론가",
+        "subtitle": "Debater",
+        "emoji": "💡",
         "description": "똑똑하고 호기심 많은 사색가로 지적 도전을 즐깁니다.",
-        "strengths": "창의적, 카리스마, 에너지 넘침, 논쟁 능력",
-        "weaknesses": "논쟁적, 무감각, 집중력 부족"
+        "strengths": ["창의적 사고", "카리스마", "에너지", "뛰어난 논쟁력"],
+        "weaknesses": ["논쟁적 성향", "무감각함", "집중력 부족"],
+        "color": "#F59E0B"
     },
     "INFJ": {
-        "title": "옹호자 (Advocate)",
+        "title": "옹호자",
+        "subtitle": "Advocate",
+        "emoji": "🌟",
         "description": "조용하고 신비로우며 사람들에게 영감을 주는 이상주의자입니다.",
-        "strengths": "통찰력, 결단력, 이타적, 창의적",
-        "weaknesses": "민감함, 완벽주의, 소진되기 쉬움"
+        "strengths": ["통찰력", "결단력", "이타심", "창의성"],
+        "weaknesses": ["과도한 민감함", "완벽주의", "쉽게 소진됨"],
+        "color": "#059669"
     },
     "INFP": {
-        "title": "중재자 (Mediator)",
+        "title": "중재자",
+        "subtitle": "Mediator",
+        "emoji": "🌈",
         "description": "항상 선을 행할 준비가 되어 있는 이타적이고 부드러운 사람입니다.",
-        "strengths": "공감 능력, 창의적, 열정적, 헌신적",
-        "weaknesses": "비현실적, 자기비판적, 감정적"
+        "strengths": ["뛰어난 공감 능력", "창의성", "열정", "헌신"],
+        "weaknesses": ["비현실적", "자기비판", "감정적"],
+        "color": "#10B981"
     },
     "ENFJ": {
-        "title": "선도자 (Protagonist)",
+        "title": "선도자",
+        "subtitle": "Protagonist",
+        "emoji": "✨",
         "description": "카리스마 있고 영감을 주는 지도자로 청중을 사로잡습니다.",
-        "strengths": "카리스마, 이타적, 영감을 줌, 자연스러운 리더",
-        "weaknesses": "지나치게 이상적, 자기희생적, 민감함"
+        "strengths": ["카리스마", "이타심", "영감 제공", "자연스러운 리더십"],
+        "weaknesses": ["지나친 이상주의", "자기희생", "민감함"],
+        "color": "#3B82F6"
     },
     "ENFP": {
-        "title": "활동가 (Campaigner)",
+        "title": "활동가",
+        "subtitle": "Campaigner",
+        "emoji": "🎨",
         "description": "열정적이고 창의적이며 긍정적인 자유로운 영혼입니다.",
-        "strengths": "열정적, 창의적, 사교적, 낙관적",
-        "weaknesses": "산만함, 스트레스 취약, 지나친 감정 이입"
+        "strengths": ["열정", "창의성", "사교성", "낙관주의"],
+        "weaknesses": ["산만함", "스트레스 취약", "과도한 감정이입"],
+        "color": "#06B6D4"
     },
     "ISTJ": {
-        "title": "현실주의자 (Logistician)",
+        "title": "현실주의자",
+        "subtitle": "Logistician",
+        "emoji": "📊",
         "description": "실용적이고 사실에 기반한 믿음직한 사람입니다.",
-        "strengths": "책임감, 정직함, 실용적, 차분함",
-        "weaknesses": "고집스러움, 둔감함, 규칙 고수"
+        "strengths": ["책임감", "정직함", "실용성", "차분함"],
+        "weaknesses": ["고집", "둔감함", "규칙 고수"],
+        "color": "#475569"
     },
     "ISFJ": {
-        "title": "수호자 (Defender)",
+        "title": "수호자",
+        "subtitle": "Defender",
+        "emoji": "🛡️",
         "description": "헌신적이고 따뜻한 수호자로 소중한 사람들을 지킵니다.",
-        "strengths": "지지적, 신뢰할 수 있음, 인내심, 실용적",
-        "weaknesses": "겸손함, 변화 회피, 과부하"
+        "strengths": ["지지적", "신뢰성", "인내심", "실용성"],
+        "weaknesses": ["과도한 겸손", "변화 회피", "과부하"],
+        "color": "#64748B"
     },
     "ESTJ": {
-        "title": "경영자 (Executive)",
+        "title": "경영자",
+        "subtitle": "Executive",
+        "emoji": "💼",
         "description": "뛰어난 관리자로 사람들이나 일을 관리하는 데 타고났습니다.",
-        "strengths": "조직력, 정직함, 헌신적, 결단력",
-        "weaknesses": "완고함, 감정 무시, 비판적"
+        "strengths": ["조직력", "정직함", "헌신", "결단력"],
+        "weaknesses": ["완고함", "감정 무시", "비판적"],
+        "color": "#DC2626"
     },
     "ESFJ": {
-        "title": "집정관 (Consul)",
+        "title": "집정관",
+        "subtitle": "Consul",
+        "emoji": "🤝",
         "description": "배려심이 많고 사교적이며 인기가 많은 사람입니다.",
-        "strengths": "지지적, 책임감, 충성스러움, 민감함",
-        "weaknesses": "걱정 많음, 비판에 취약, 자기주장 어려움"
+        "strengths": ["지지적", "책임감", "충성심", "민감함"],
+        "weaknesses": ["걱정 과다", "비판에 취약", "자기주장 어려움"],
+        "color": "#EF4444"
     },
     "ISTP": {
-        "title": "장인 (Virtuoso)",
+        "title": "장인",
+        "subtitle": "Virtuoso",
+        "emoji": "🔧",
         "description": "대담하고 실용적인 실험가로 모든 도구를 다룹니다.",
-        "strengths": "낙관적, 창의적, 실용적, 자발적",
-        "weaknesses": "완고함, 둔감함, 쉽게 지루함"
+        "strengths": ["낙관적", "창의적", "실용적", "자발적"],
+        "weaknesses": ["완고함", "둔감함", "쉽게 지루함"],
+        "color": "#78716C"
     },
     "ISFP": {
-        "title": "모험가 (Adventurer)",
+        "title": "모험가",
+        "subtitle": "Adventurer",
+        "emoji": "🎭",
         "description": "유연하고 매력적인 예술가로 새로운 것을 탐험할 준비가 되어 있습니다.",
-        "strengths": "매력적, 민감함, 상상력, 호기심",
-        "weaknesses": "섬세함, 독립적 과함, 예측 불가능"
+        "strengths": ["매력적", "민감함", "상상력", "호기심"],
+        "weaknesses": ["섬세함", "과도한 독립성", "예측 불가"],
+        "color": "#A78BFA"
     },
     "ESTP": {
-        "title": "사업가 (Entrepreneur)",
+        "title": "사업가",
+        "subtitle": "Entrepreneur",
+        "emoji": "🚀",
         "description": "영리하고 에너지 넘치며 매우 지각적인 사람입니다.",
-        "strengths": "대담함, 실용적, 직관적, 사교적",
-        "weaknesses": "무감각함, 참을성 없음, 위험 감수"
+        "strengths": ["대담함", "실용성", "직관력", "사교성"],
+        "weaknesses": ["무감각", "참을성 부족", "위험 감수"],
+        "color": "#F97316"
     },
     "ESFP": {
-        "title": "연예인 (Entertainer)",
+        "title": "연예인",
+        "subtitle": "Entertainer",
+        "emoji": "🎪",
         "description": "자발적이고 에너지 넘치며 열정적인 엔터테이너입니다.",
-        "strengths": "대담함, 독창적, 실용적, 관찰력",
-        "weaknesses": "민감함, 갈등 회피, 쉽게 지루함"
+        "strengths": ["대담함", "독창성", "실용성", "관찰력"],
+        "weaknesses": ["민감함", "갈등 회피", "쉽게 지루함"],
+        "color": "#EC4899"
     }
 }
 
+# 커스텀 CSS
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
+
+* {
+    font-family: 'Noto Sans KR', sans-serif !important;
+}
+
+body {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+.gradio-container {
+    max-width: 900px !important;
+    margin: 0 auto !important;
+    background: transparent !important;
+}
+
+#main-container {
+    background: white;
+    border-radius: 24px;
+    padding: 48px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
+    margin: 40px 0;
+}
+
+.header-section {
+    text-align: center;
+    margin-bottom: 48px;
+    padding-bottom: 32px;
+    border-bottom: 2px solid #f0f0f0;
+}
+
+.main-title {
+    font-size: 48px;
+    font-weight: 900;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 16px;
+    letter-spacing: -1px;
+}
+
+.subtitle {
+    font-size: 18px;
+    color: #64748b;
+    font-weight: 400;
+    line-height: 1.6;
+}
+
+.progress-container {
+    background: #f8fafc;
+    border-radius: 16px;
+    padding: 24px;
+    margin-bottom: 32px;
+    border: 1px solid #e2e8f0;
+}
+
+.progress-text {
+    font-size: 14px;
+    color: #64748b;
+    margin-bottom: 12px;
+    font-weight: 500;
+}
+
+.progress-bar-container {
+    width: 100%;
+    height: 8px;
+    background: #e2e8f0;
+    border-radius: 999px;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 999px;
+    transition: width 0.3s ease;
+}
+
+.question-card {
+    background: white;
+    border: 2px solid #e2e8f0;
+    border-radius: 16px;
+    padding: 28px;
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+}
+
+.question-card:hover {
+    border-color: #667eea;
+    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
+    transform: translateY(-2px);
+}
+
+.question-number {
+    display: inline-block;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    font-weight: 700;
+    padding: 6px 14px;
+    border-radius: 20px;
+    font-size: 13px;
+    margin-bottom: 12px;
+}
+
+.question-text {
+    font-size: 17px;
+    font-weight: 500;
+    color: #1e293b;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.radio-group {
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.radio-option {
+    flex: 1;
+    min-width: 80px;
+}
+
+.radio-option input[type="radio"] {
+    display: none;
+}
+
+.radio-option label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 16px 8px;
+    background: #f8fafc;
+    border: 2px solid #e2e8f0;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: center;
+}
+
+.radio-option input[type="radio"]:checked + label {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-color: #667eea;
+    color: white;
+}
+
+.radio-option label:hover {
+    border-color: #667eea;
+    transform: translateY(-2px);
+}
+
+.option-number {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 4px;
+}
+
+.option-text {
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.submit-button {
+    width: 100%;
+    padding: 20px;
+    font-size: 18px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 16px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 32px;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+}
+
+.submit-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
+}
+
+.submit-button:active {
+    transform: translateY(0);
+}
+
+.result-container {
+    background: white;
+    border-radius: 24px;
+    padding: 48px;
+    margin-top: 32px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
+}
+
+.result-header {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.result-emoji {
+    font-size: 80px;
+    margin-bottom: 20px;
+}
+
+.result-mbti {
+    font-size: 56px;
+    font-weight: 900;
+    margin-bottom: 12px;
+    letter-spacing: 8px;
+}
+
+.result-title {
+    font-size: 32px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: #1e293b;
+}
+
+.result-subtitle {
+    font-size: 18px;
+    color: #64748b;
+    font-weight: 400;
+}
+
+.result-description {
+    font-size: 18px;
+    line-height: 1.8;
+    color: #475569;
+    text-align: center;
+    margin: 32px 0;
+    padding: 28px;
+    background: #f8fafc;
+    border-radius: 16px;
+}
+
+.result-section {
+    margin-top: 32px;
+}
+
+.section-title {
+    font-size: 20px;
+    font-weight: 700;
+    color: #1e293b;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.badge-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 10px 18px;
+    background: #f1f5f9;
+    border-radius: 999px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #334155;
+}
+
+.badge.strength {
+    background: #dcfce7;
+    color: #166534;
+}
+
+.badge.weakness {
+    background: #fee2e2;
+    color: #991b1b;
+}
+
+.dimension-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    margin-top: 32px;
+}
+
+.dimension-card {
+    background: #f8fafc;
+    border-radius: 16px;
+    padding: 20px;
+    border: 2px solid #e2e8f0;
+}
+
+.dimension-header {
+    font-size: 14px;
+    color: #64748b;
+    margin-bottom: 12px;
+    font-weight: 600;
+}
+
+.dimension-result {
+    font-size: 32px;
+    font-weight: 900;
+    margin-bottom: 8px;
+}
+
+.dimension-bar {
+    width: 100%;
+    height: 8px;
+    background: #e2e8f0;
+    border-radius: 999px;
+    overflow: hidden;
+    margin-bottom: 8px;
+}
+
+.dimension-fill {
+    height: 100%;
+    border-radius: 999px;
+    transition: width 0.5s ease;
+}
+
+.dimension-scores {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #64748b;
+}
+
+@media (max-width: 768px) {
+    #main-container {
+        padding: 24px;
+    }
+    
+    .main-title {
+        font-size: 36px;
+    }
+    
+    .dimension-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .result-mbti {
+        font-size: 42px;
+        letter-spacing: 4px;
+    }
+}
+"""
+
 def calculate_mbti(answers):
     """답변을 바탕으로 MBTI 유형 계산"""
     scores = {"E": 0, "I": 0, "S": 0, "N": 0, "T": 0, "F": 0, "J": 0, "P": 0}
     
     for i, answer in enumerate(answers):
-        if answer is None:
+        if answer is None or answer == 0:
             continue
         question = questions[i]
         dimension = question["dimension"]
         direction = question["direction"]
-        
-        # 5점 척도: 1(전혀 아니다) ~ 5(매우 그렇다)
         scores[direction] += answer
     
-    # MBTI 유형 결정
     mbti_type = ""
     mbti_type += "E" if scores["E"] > scores["I"] else "I"
     mbti_type += "S" if scores["S"] > scores["N"] else "N"
@@ -154,86 +548,168 @@ def calculate_mbti(answers):
     
     return mbti_type, scores
 
-def format_result(mbti_type, scores):
-    """결과를 포맷팅"""
+def create_result_html(mbti_type, scores):
+    """결과를 HTML로 생성"""
     info = mbti_descriptions[mbti_type]
+    color = info['color']
     
-    result = f"""
-# 🎯 당신의 MBTI 유형: {mbti_type}
-
-## {info['title']}
-
-### 📝 설명
-{info['description']}
-
-### ✨ 강점
-{info['strengths']}
-
-### ⚠️ 약점
-{info['weaknesses']}
+    # 각 차원별 퍼센티지 계산
+    ei_total = scores['E'] + scores['I']
+    sn_total = scores['S'] + scores['N']
+    tf_total = scores['T'] + scores['F']
+    jp_total = scores['J'] + scores['P']
+    
+    ei_pct = (scores['E'] / ei_total * 100) if ei_total > 0 else 50
+    sn_pct = (scores['S'] / sn_total * 100) if sn_total > 0 else 50
+    tf_pct = (scores['T'] / tf_total * 100) if tf_total > 0 else 50
+    jp_pct = (scores['J'] / jp_total * 100) if jp_total > 0 else 50
+    
+    result_html = f"""
+    <div class="result-container">
+        <div class="result-header">
+            <div class="result-emoji">{info['emoji']}</div>
+            <div class="result-mbti" style="color: {color};">{mbti_type}</div>
+            <div class="result-title">{info['title']}</div>
+            <div class="result-subtitle">{info['subtitle']}</div>
+        </div>
+        
+        <div class="result-description">
+            {info['description']}
+        </div>
+        
+        <div class="result-section">
+            <div class="section-title">
+                ✨ 주요 강점
+            </div>
+            <div class="badge-container">
+                {''.join([f'<span class="badge strength">{s}</span>' for s in info['strengths']])}
+            </div>
+        </div>
+        
+        <div class="result-section">
+            <div class="section-title">
+                ⚠️ 개선 포인트
+            </div>
+            <div class="badge-container">
+                {''.join([f'<span class="badge weakness">{w}</span>' for w in info['weaknesses']])}
+            </div>
+        </div>
+        
+        <div class="dimension-grid">
+            <div class="dimension-card">
+                <div class="dimension-header">외향 vs 내향</div>
+                <div class="dimension-result" style="color: {color};">{'E' if scores['E'] > scores['I'] else 'I'}</div>
+                <div class="dimension-bar">
+                    <div class="dimension-fill" style="width: {ei_pct}%; background: {color};"></div>
+                </div>
+                <div class="dimension-scores">
+                    <span>E: {scores['E']}</span>
+                    <span>I: {scores['I']}</span>
+                </div>
+            </div>
+            
+            <div class="dimension-card">
+                <div class="dimension-header">감각 vs 직관</div>
+                <div class="dimension-result" style="color: {color};">{'S' if scores['S'] > scores['N'] else 'N'}</div>
+                <div class="dimension-bar">
+                    <div class="dimension-fill" style="width: {sn_pct}%; background: {color};"></div>
+                </div>
+                <div class="dimension-scores">
+                    <span>S: {scores['S']}</span>
+                    <span>N: {scores['N']}</span>
+                </div>
+            </div>
+            
+            <div class="dimension-card">
+                <div class="dimension-header">사고 vs 감정</div>
+                <div class="dimension-result" style="color: {color};">{'T' if scores['T'] > scores['F'] else 'F'}</div>
+                <div class="dimension-bar">
+                    <div class="dimension-fill" style="width: {tf_pct}%; background: {color};"></div>
+                </div>
+                <div class="dimension-scores">
+                    <span>T: {scores['T']}</span>
+                    <span>F: {scores['F']}</span>
+                </div>
+            </div>
+            
+            <div class="dimension-card">
+                <div class="dimension-header">판단 vs 인식</div>
+                <div class="dimension-result" style="color: {color};">{'J' if scores['J'] > scores['P'] else 'P'}</div>
+                <div class="dimension-bar">
+                    <div class="dimension-fill" style="width: {jp_pct}%; background: {color};"></div>
+                </div>
+                <div class="dimension-scores">
+                    <span>J: {scores['J']}</span>
+                    <span>P: {scores['P']}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    """
+    
+    return result_html
 
-### 📊 세부 점수
-- **외향(E) vs 내향(I)**: E={scores['E']}, I={scores['I']} → **{'E' if scores['E'] > scores['I'] else 'I'}**
-- **감각(S) vs 직관(N)**: S={scores['S']}, N={scores['N']} → **{'S' if scores['S'] > scores['N'] else 'N'}**
-- **사고(T) vs 감정(F)**: T={scores['T']}, F={scores['F']} → **{'T' if scores['T'] > scores['F'] else 'F'}**
-- **판단(J) vs 인식(P)**: J={scores['J']}, P={scores['P']} → **{'J' if scores['J'] > scores['P'] else 'P'}**
-"""
-    return result
+def create_question_html(index, question_text):
+    """질문 카드 HTML 생성"""
+    return f"""
+    <div class="question-card">
+        <div class="question-number">질문 {index + 1}</div>
+        <div class="question-text">{question_text}</div>
+    </div>
+    """
 
 def submit_test(*answers):
-    """테스트 제출 및 결과 계산"""
-    if None in answers:
-        return "⚠️ 모든 질문에 답변해주세요!"
+    """테스트 제출"""
+    if 0 in answers or None in answers:
+        return "<div style='text-align: center; padding: 40px; color: #dc2626; font-size: 18px; font-weight: 600;'>⚠️ 모든 질문에 답변해주세요!</div>"
     
     mbti_type, scores = calculate_mbti(answers)
-    return format_result(mbti_type, scores)
+    return create_result_html(mbti_type, scores)
 
-# Gradio 인터페이스 구성
-with gr.Blocks(title="MBTI 성격 유형 테스트", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("""
-    # 🧠 MBTI 성격 유형 테스트
-    
-    각 질문에 대해 자신의 성향을 솔직하게 평가해주세요.
-    
-    **평가 기준:**
-    - 1 = 전혀 아니다
-    - 2 = 아니다
-    - 3 = 보통이다
-    - 4 = 그렇다
-    - 5 = 매우 그렇다
-    """)
-    
-    # 질문 슬라이더 생성
-    sliders = []
-    for i, q in enumerate(questions):
-        with gr.Row():
-            slider = gr.Slider(
-                minimum=1,
-                maximum=5,
-                step=1,
-                value=3,
-                label=f"질문 {i+1}: {q['text']}",
-                info="1=전혀 아니다, 5=매우 그렇다"
+# Gradio 인터페이스
+with gr.Blocks(css=custom_css, title="MBTI 성격 유형 테스트") as demo:
+    with gr.Column(elem_id="main-container"):
+        # 헤더
+        gr.HTML("""
+        <div class="header-section">
+            <div class="main-title">MBTI 성격 유형 테스트</div>
+            <div class="subtitle">
+                20개의 질문을 통해 당신의 성격 유형을 발견하세요<br>
+                각 질문에 솔직하게 답변하시면 더 정확한 결과를 얻을 수 있습니다
+            </div>
+        </div>
+        """)
+        
+        # 질문들
+        radios = []
+        for i, q in enumerate(questions):
+            gr.HTML(create_question_html(i, q['text']))
+            radio = gr.Radio(
+                choices=[
+                    ("1️⃣ 전혀 아니다", 1),
+                    ("2️⃣ 아니다", 2),
+                    ("3️⃣ 보통이다", 3),
+                    ("4️⃣ 그렇다", 4),
+                    ("5️⃣ 매우 그렇다", 5)
+                ],
+                value=None,
+                show_label=False,
+                container=False
             )
-            sliders.append(slider)
-    
-    # 제출 버튼
-    submit_btn = gr.Button("🎯 결과 확인", variant="primary", size="lg")
-    
-    # 결과 표시
-    result_output = gr.Markdown(label="테스트 결과")
-    
-    # 버튼 클릭 이벤트
-    submit_btn.click(
-        fn=submit_test,
-        inputs=sliders,
-        outputs=result_output
-    )
-    
-    gr.Markdown("""
-    ---
-    💡 **참고**: 이 테스트는 간단한 MBTI 성향 파악을 위한 것이며, 공식 MBTI 검사를 대체하지 않습니다.
-    """)
+            radios.append(radio)
+        
+        # 제출 버튼
+        submit_btn = gr.Button("🎯 결과 확인하기", elem_classes="submit-button")
+        
+        # 결과 영역
+        result_html = gr.HTML()
+        
+        # 이벤트 핸들러
+        submit_btn.click(
+            fn=submit_test,
+            inputs=radios,
+            outputs=result_html
+        )
 
 if __name__ == "__main__":
     demo.launch(share=True)