# 완벽한 테스트: 아프리카 트윈을 위한 탑 12 타이어

타이어 테스트

---

import ArticleScript from '@/components/ArticleScript';

{/* Hero Section */}
<div className="text-center mb-12 relative">
  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl h-64 bg-blue-500/10 rounded-full blur-[100px] pointer-events-none"></div>
  
  <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-900/50 to-blue-500/20 text-blue-400 border border-blue-500/50 rounded-full text-sm font-bold uppercase tracking-widest mb-6 shadow-[0_0_15px_rgba(59,130,246,0.3)]">
    <span>🏆</span> 독점 비교
  </div>
  
  <h1 className="text-4xl md:text-6xl font-black mb-6 leading-tight text-white drop-shadow-lg">
    완벽한 테스트: <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">탑 12 타이어</span>
  </h1>
  
  <p className="text-xl text-slate-300 font-medium mb-10 max-w-2xl mx-auto">
    <strong className="text-blue-500">5 000 km</strong> 실제 테스트의.
  </p>
  
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div className="bg-slate-900 border border-slate-700/50 p-6 rounded-2xl backdrop-blur-md hover:border-blue-500/50 transition-colors shadow-xl">
      <div className="text-4xl mb-3">🔬</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">거리</div>
      <div className="text-xl font-black text-white">5,237 km</div>
    </div>
    <div className="bg-slate-900 border border-blue-900/50 p-6 rounded-2xl backdrop-blur-md hover:border-blue-500/50 transition-colors shadow-xl relative overflow-hidden">
      <div className="absolute top-0 right-0 w-20 h-20 bg-blue-500/10 rounded-full blur-xl pointer-events-none"></div>
      <div className="text-4xl mb-3 font-black italic text-blue-500">12</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">타이어</div>
      <div className="text-xl font-black text-blue-400">테스트됨</div>
    </div>
    <div className="bg-slate-900 border border-slate-700/50 p-6 rounded-2xl backdrop-blur-md hover:border-cyan-500/50 transition-colors shadow-xl">
      <div className="text-4xl mb-3">📊</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">분석</div>
      <div className="text-xl font-black text-cyan-400">완전한</div>
    </div>
  </div>
</div>

<div className="flex justify-center my-10">
  <AdSense slot="4357278838" format="auto" />
</div>

<div className="bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-12 shadow-2xl relative overflow-hidden">
    <h2 className="text-2xl font-black text-white mb-6 border-b border-slate-800 pb-4">🔍 방법론</h2>
    <p className="text-slate-300 mb-6">엄격한 프로토콜:</p>
    <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-slate-300">
        <li className="flex items-center gap-3"><span className="text-blue-500">✅</span> 210 kg</li>
        <li className="flex items-center gap-3"><span className="text-blue-500">✅</span> 믹스</li>
        <li className="flex items-center gap-3"><span className="text-blue-500">✅</span> 모든 계절</li>
        <li className="flex items-center gap-3"><span className="text-blue-500">✅</span> 압력</li>
    </ul>
</div>

<h2 className="text-3xl font-black text-white mb-12 text-center relative">
  <span className="relative z-10">🏆 순위</span>
  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-12 bg-blue-500/20 rounded-full blur-xl pointer-events-none"></div>
</h2>

{/* Tire 1 */}
<TireScoreCard
  rank="1"
  name="Michelin Anakee Adventure"
  type="80% 도로 / 20% 트레일"
  lifespan="12 500 km"
  price="320€"
  overallScore="9.4"
  gripRoad="9.5"
  gripOffroad="6.5"
  durability="8.5"
  buyLink="https://www.anrdoezrs.net/click-101188448-15707730?url=https%3A%2F%2Fwww.dafy-moto.com%2Fpneu-anakee-adventure-michelin.html"
>
  <div>대부분의 아프리카 트윈 소유자를 위한 완벽한 타협점. 도로 위(심지어 폭우 속에서도)에서 결함 없는 핸들링과 흙길에서 꽤 괜찮은 트랙션을 제공합니다. 코너링은 안심할 수 있습니다.</div>
  <ProsAndCons 
    pros="비오는 날 탁월한 로드 핸들링 | 안전한 코너링 | 훌륭한 수명 | 낮은 주행 노이즈"
    cons="깊은 진흙에서는 한계에 일찍 도달 | 높은 구매 가격 | 경쟁 제품보다 덜 공격적인 외관"
  />
</TireScoreCard>

{/* Tire 2 */}
<TireScoreCard
  rank="2"
  name="Metzeler Tourance Next 2"
  type="90% 도로 / 10% 트레일"
  lifespan="15 000 km+"
  price="290€"
  overallScore="9.1"
  gripRoad="9.8"
  gripOffroad="4.0"
  durability="9.5"
  buyLink="https://www.anrdoezrs.net/click-101188448-15707730?url=https%3A%2F%2Fwww.dafy-moto.com%2Fpneu-tourance-next-2-metzeler.html"
>
  <div>아스팔트의 확실한 제왕. 도로를 거의 벗어나지 않는다면 이 타이어를 선택하세요. 앞바퀴의 외과적 수준의 정밀함과 탠덤 상태에서도 끄떡없이 마일리지를 소화합니다.</div>
  <ProsAndCons 
    pros="제왕적 고속 안정성 | 비교 군 내 최고의 수명 | 마모될 때까지 일정한 성능 | 젖은 노면에서 우수한 제동력"
    cons="100% 로드 프로파일 (오프로드 거의 불가) | 수명 말기에 약간의 떨림 가능 | 긴 예열 시간"
  />
</TireScoreCard>

{/* Tire 3 */}
<TireScoreCard
  rank="3"
  name="Bridgestone Battlax AX41"
  type="50% 도로 / 50% 트레일"
  lifespan="8 000 km"
  price="280€"
  overallScore="8.9"
  gripRoad="7.0"
  gripOffroad="9.5"
  durability="6.0"
>
  <div>모험가의 타이어! 큰 노브가 아프리카 트윈의 성능을 모래, 진흙, 바위에서 변화시킵니다. 건조한 도로에서도 극단적인 프로필에 비해 놀라운 기울기를 허용합니다.</div>
  <ProsAndCons 
    pros="오프로드에서의 경이로운 트랙션 | 강렬한 다카르 랠리 룩 | 건조한 아스팔트에서 놀라운 민첩성 | 최적의 진흙 배출 능력"
    cons="리어 타이어의 매우 빠른 마모 | 90km/h 이상에서 큰 주행 노이즈 | 젖은 아스팔트에서 주의 필요"
  />
</TireScoreCard>

{/* Tire 4 */}
<TireScoreCard
  rank="4"
  name="Continental TKC 70 Rocks"
  type="60% 도로 / 40% 트레일"
  lifespan="9 500 km"
  price="340€"
  overallScore="8.7"
  gripRoad="8.5"
  gripOffroad="7.5"
  durability="7.5"
>
  <div>유명한 TKC 70의 완벽한 진화형. 표준 프론트 타이어와 중앙 띠가 없는 'Rocks' 리어를 조합하여 오프로드 트랙션을 높이면서 고속 흔들림을 제거했습니다.</div>
  <ProsAndCons 
    pros="도로와 흙길에서의 놀라운 다재다능함 | 고속에서 흔들림 없음 | 우수한 예열 속도 | 노브 타이어치고 좋은 수명"
    cons="프리미엄 가격 | 프론트 타이어가 약간 시끄러움 | 리어 트레드가 평평하게 마모됨"
  />
</TireScoreCard>

{/* Tire 5 */}
<TireScoreCard
  rank="5"
  name="Pirelli Scorpion Trail II"
  type="90% 도로 / 10% 트레일"
  lifespan="13 000 km"
  price="310€"
  overallScore="8.6"
  gripRoad="9.6"
  gripOffroad="4.5"
  durability="8.0"
>
  <div>라이더를 위한 타이어. 굽은 도로에서 날개를 달아주는 아주 스포티한 프로파일. 피렐리의 DNA는 첫 코너부터 스릴 넘치는 민첩성으로 느껴집니다.</div>
  <ProsAndCons 
    pros="초스포티한 로드 주행 | 코너에서 인상적인 민첩성 | 기울일 때 최대 그림력 | 매우 아름다운 트레드 패턴"
    cons="프론트에서 편마모 잦음 | 포장도로를 벗어나면 무용지물 | 수명 말기에 성능 저하"
  />
</TireScoreCard>

{/* Tire 6 */}
<TireScoreCard
  rank="6"
  name="Dunlop Trailmax Mission"
  type="70% 도로 / 30% 트레일"
  lifespan="11 000 km"
  price="300€"
  overallScore="8.5"
  gripRoad="8.0"
  gripOffroad="7.0"
  durability="8.5"
>
  <div>미국식 어드벤처 타이어. 매우 튼튼하고 무거운 하중을 견디며 강화된 측면 덕분에 펑크 방지력이 뛰어납니다. 절대적인 신뢰성이 요구되는 혼합 탐험에 이상적입니다.</div>
  <ProsAndCons 
    pros="펑크 방지 강화 사이드월 | 훌륭한 온/오프로드 타협점 | 파워풀하고 공격적인 룩 | 스케일링 마모 저항력"
    cons="저속 민첩성에 영향을 주는 무거운 타이어 | 딱딱한 카카스로 승차감이 약간 떨어짐 | 타이어 교체가 매우 힘듦"
  />
</TireScoreCard>

{/* Tire 7 */}
<TireScoreCard
  rank="7"
  name="Mitas E-07+ Dakar"
  type="50% 도로 / 50% 트레일"
  lifespan="10 000 km"
  price="260€"
  overallScore="8.3"
  gripRoad="6.0"
  gripOffroad="8.5"
  durability="9.0"
>
  <div>통제된 예산으로 내구성을 찾는 모험가의 기준입니다. 다카르 버전은 노란색 스트라이프가 특징이며 가장 혹독한 지형을 견디는 4플라이 카카스를 갖추고 있습니다.</div>
  <ProsAndCons 
    pros="마모와 찢어짐에 대한 극도의 내구성 | 어마어마한 오프로드 트랙션 | 50/50 타이어 치고 훌륭한 수명 | 매우 경쟁력 있는 가격"
    cons="젖고 차가운 아스팔트에서 미끄러움 | 저속에서 불편함 | 연속 코너에서 다루기 상당히 무거움"
  />
</TireScoreCard>

{/* Tire 8 */}
<TireScoreCard
  rank="8"
  name="Heidenau K60 Ranger"
  type="40% 도로 / 60% 트레일"
  lifespan="14 000 km"
  price="270€"
  overallScore="8.1"
  gripRoad="6.5"
  gripOffroad="8.5"
  durability="9.5"
>
  <div>세계 여행자의 절대적 선택. 부서지지 않는 이 타이어는 문제 없이 대륙을 건널 수 있게 해줍니다. 레인저 버전은 중앙 밴드를 제거해 오프로드 단점을 수정했습니다.</div>
  <ProsAndCons 
    pros="뛰어난 마일리지 수명 | 바위에 강한 장갑 수준 카카스 | 자갈밭에서의 우수한 트랙션 | 가격 대비 수명 최고"
    cons="젖은 도로에서 불리한 그립력 | 고속도로에서 매우 시끄러움 | 추운 날씨에 예열되기 어려움"
  />
</TireScoreCard>

{/* Tire 9 */}
<TireScoreCard
  rank="9"
  name="Shinko 804/805"
  type="40% 도로 / 60% 트레일"
  lifespan="6 500 km"
  price="190€"
  overallScore="7.9"
  gripRoad="5.5"
  gripOffroad="8.0"
  durability="5.5"
>
  <div>흙길을 달리기 위한 저비용 솔루션. TKC 80 프로파일에서 강한 영감을 얻었지만 가격은 훨씬 낮습니다. 주말 오프로드 여행을 위해 저렴하게 장비하기 좋습니다.</div>
  <ProsAndCons 
    pros="따라올 수 없는 구매 가격 | 크고 강렬한 블록 패턴 | 눈과 진흙에서 괜찮은 트랙션 | 빠르게 예열됨"
    cons="아스팔트에서는 수명이 아주 짧음 | 젖은 도로에서의 위험한 제동 성능 | 프로가 빠르게 사각형으로 변함"
  />
</TireScoreCard>

{/* Tire 10 */}
<TireScoreCard
  rank="10"
  name="Kenda K761"
  type="70% 도로 / 30% 트레일"
  lifespan="7 000 km"
  price="210€"
  overallScore="7.7"
  gripRoad="7.0"
  gripOffroad="6.0"
  durability="6.5"
>
  <div>일상적인 사용과 가벼운 오프로드 주행에 적합한 성능을 제공하는 다용도 엔트리급 타이어. 예산이 적은 라이더에게 이상적입니다.</div>
  <ProsAndCons 
    pros="매우 저렴한 가격 | 가벼운 트레일 주행에 좋은 타협점 | 쾌적한 디자인"
    cons="폭우 시 불안정한 그립력 | 다소 짧은 수명 | 고속에서 프론트 제어의 정밀도 부족"
  />
</TireScoreCard>

{/* Tire 11 */}
<TireScoreCard
  rank="11"
  name="Pirelli Scorpion Rally STR"
  type="30% 도로 / 70% 트레일"
  lifespan="5 500 km"
  price="330€"
  overallScore="7.5"
  gripRoad="6.0"
  gripOffroad="9.0"
  durability="4.5"
>
  <div>강력한 오프로드 퍼포먼스. 장거리 여행보다는 최악의 조건에서 즐기기 위한 타이어입니다. 깊은 진흙과 부드러운 모래에서 훌륭한 성능을 발휘합니다.</div>
  <ProsAndCons 
    pros="무른 흙에서의 환상적인 그립력 | 모험가에게 완벽한 거친 스타일 | 포장 도로를 벗어나자마자 신뢰감 부여"
    cons="아스팔트 비중이 높으면 매우 빠르게 마모됨 | 80km/h 이상에서 소음이 큼 | 킬로미터당 비용이 높음"
  />
</TireScoreCard>

{/* Tire 12 */}
<TireScoreCard
  rank="12"
  name="Motoz Tractionator GPS"
  type="40% 도로 / 60% 트레일"
  lifespan="8 500 km"
  price="290€"
  overallScore="7.2"
  gripRoad="5.0"
  gripOffroad="8.0"
  durability="8.0"
>
  <div>오스트레일리아의 호기심 덩어리! 오지의 거친 길을 견디도록 설계된 양방향 타이어. 바위처럼 단단하지만 주행에 어느 정도 적응이 필요합니다.</div>
  <ProsAndCons 
    pros="양방향 장착 (50-50 또는 대부분 오프로드) | 펑크 걱정이 거의 없는 사이드월 | 중앙 프로필로 높은 마일리지 확보"
    cons="처음에는 매우 낯선 프런트 핸들링 느낌 | 빗길에서 위험할 수준의 그립 | 노면 상태에 따른 불쾌한 공명음"
  />
</TireScoreCard>


<div className="flex justify-center my-10">
  <AdSense slot="4357278838" format="auto" />
</div>

<div className="bg-slate-900 border border-blue-900/50 rounded-3xl p-8 mb-16 shadow-[0_0_30px_rgba(59,130,246,0.1)] relative overflow-hidden">
    <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-2xl pointer-events-none"></div>
    <h2 className="text-2xl font-black text-white mb-8 relative z-10 flex items-center gap-3">
        <span>🛠️</span> 팁
    </h2>
    
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10">
        <div className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700/50 hover:border-blue-500/50 transition-colors">
            <h4 className="text-lg font-bold text-white mb-4">🔧 압력</h4>
            <ul className="text-slate-400 space-y-2 text-sm">
                <li>• 도로</li>
                <li>• 오프로드</li>
            </ul>
        </div>
        
        <div className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700/50 hover:border-blue-500/50 transition-colors">
            <h4 className="text-lg font-bold text-white mb-4">🔄 회전</h4>
            <ul className="text-slate-400 space-y-2 text-sm">
                <li>• 5000 km</li>
                <li>• -</li>
            </ul>
        </div>
        
        <div className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700/50 hover:border-blue-500/50 transition-colors">
            <h4 className="text-lg font-bold text-white mb-4">🧼 검사</h4>
            <ul className="text-slate-400 space-y-2 text-sm">
                <li>• 패턴</li>
                <li>• 청소</li>
            </ul>
        </div>
    </div>
</div>



{/* Quiz Section */}
<div className="mt-16 pt-10 border-t border-slate-800 relative z-10">
    <div className="text-center mb-10" id="start-container-pneus">
        <h2 className="text-3xl md:text-4xl font-black mb-4 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">
            🔍 타이어 찾기
        </h2>
        <p className="text-xl text-slate-300 font-medium mb-10">5 개의 질문</p>
        <button id="start-quiz-pneus" className="bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white border-none px-10 py-5 rounded-full text-xl font-black cursor-pointer shadow-[0_10px_30px_rgba(59,130,246,0.3)] uppercase tracking-wider transition-transform hover:scale-105">
            시작
        </button>
    </div>

    {/* Progress Bar */}
    <div id="quiz-progress-container-pneus" className="sticky top-0 z-50 bg-slate-950/90 backdrop-blur-md p-4 border-b border-slate-800 hidden">
        <div className="max-w-3xl mx-auto">
            <div className="flex justify-between mb-2">
                <span className="text-sm font-bold text-blue-400" id="quiz-progress-text-pneus">질문 1/5</span>
            </div>
            <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
                <div id="quiz-progress-bar-pneus" className="h-full w-[20%] bg-gradient-to-r from-blue-500 to-cyan-400 transition-all duration-300 rounded-full"></div>
            </div>
        </div>
    </div>

    <form id="quiz-form-pneus" className="max-w-3xl mx-auto my-10 hidden">
        
        {/* Q1 */}
        <div className="quiz-page-pneus active bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden" id="pneus-page-1">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">1</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">오프로드 %?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-pneus">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q1" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">&lt;20%</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q1" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">20-40%</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q1" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">40-60%</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q1" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">>60%</span>
                </label>
            </div>
            <div className="text-right mt-8">
                <button type="button" className="next-btn-pneus bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">다음</button>
            </div>
        </div>

        {/* Q2 */}
        <div className="quiz-page-pneus bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="pneus-page-2">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">2</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">지형?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-pneus">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q2" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">도로</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q2" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">자갈</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q2" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">하드</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-pneus bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">이전</button>
                <button type="button" className="next-btn-pneus bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">다음</button>
            </div>
        </div>

        {/* Q3 */}
        <div className="quiz-page-pneus bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="pneus-page-3">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">3</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">우선 순위?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-pneus">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q3" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">수명</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q3" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">그립</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q3" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">편안함</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q3" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">가격</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-pneus bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">이전</button>
                <button type="button" className="next-btn-pneus bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">다음</button>
            </div>
        </div>

        {/* Q4 */}
        <div className="quiz-page-pneus bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="pneus-page-4">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">4</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">연간 Km?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-pneus">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q4" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">&lt;5k</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q4" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">5k-10k</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q4" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">10k-20k</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q4" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">>20k</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-pneus bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">이전</button>
                <button type="button" className="next-btn-pneus bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">다음</button>
            </div>
        </div>

        {/* Q5 */}
        <div className="quiz-page-pneus bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="pneus-page-5">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">5</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">예산?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-pneus">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q5" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">&lt;50€</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q5" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">250-350€</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="pneus_q5" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">>350€</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-pneus bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">이전</button>
                <button type="button" className="submit-btn-pneus bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-black shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50 tracking-wider disabled:cursor-not-allowed">🏁 종료</button>
            </div>
        </div>
    </form>

    {/* Localized string injections for JS Result Logic */}
    <div className="hidden" id="pneus-str-progress">질문</div>
    <div className="hidden" id="pneus-str-score">점수:</div>
    <div className="hidden" id="pneus-str-life">수명:</div>
    <div className="hidden" id="pneus-str-price">가격:</div>
    <div className="hidden" id="pneus-str-alt">대안:</div>
    <div className="hidden" id="pneus-str-vous">당신을 위해:</div>

    {/* Results Panel */}
    <div id="quiz-result-pneus" className="hidden max-w-4xl mx-auto my-16">
        <div className="bg-slate-900 border border-blue-500/30 rounded-[2.5rem] p-10 md:p-12 text-center shadow-[0_0_50px_rgba(59,130,246,0.1)] relative overflow-hidden">
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-blue-500/5 blur-3xl pointer-events-none"></div>
            
            <div className="text-6xl mb-6 relative z-10 drop-shadow-lg">🎯</div>
            <h2 className="text-3xl md:text-5xl font-black text-white mb-4 relative z-10">결과</h2>
            <p className="text-xl text-slate-300 mb-10 relative z-10">당신의 타이어:</p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10 text-left mb-10" id="pneus-result-cards">
                {/* Dynamically populated by JS */}
            </div>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mt-10 relative z-10">
                <button type="button" className="restart-btn-pneus w-full sm:w-auto bg-slate-800 hover:bg-slate-700 text-white border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all gap-2 flex items-center justify-center">
                    🔄 재시도
                </button>
                <a href="/dashboard" className="w-full sm:w-auto bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-8 py-4 rounded-xl text-lg font-bold transition-all border-none shadow-[0_5px_20px_rgba(59,130,246,0.3)] gap-2 flex items-center justify-center">
                    👤 프로필
                </a>
            </div>
        </div>
    </div>
</div>

<ArticleStyle content={`
/* Force styles on dynamically injected results */
.options-pneus label input[type="radio"]:checked + span {
    color: #38bdf8; /* sky-400 */
    font-weight: 700;
}
`} />

<ArticleScript src="/scripts/quizzes/pneus-adventure-v2.js" />