영웅 통계 비교 계산기 편집하기

<html>
<style>
  #HeroBox { max-width: 600px; margin: 30px auto; padding: 20px; background: #1a1a1d; border-radius: 10px; border: 2px solid #FF8C00; box-shadow: 0 10px 30px rgba(0,0,0,0.5); font-family: 'Segoe UI', sans-serif; font-size: 14px; box-sizing: border-box; color: #d1d5db; }
  #HeroBox h3 { text-align: center; margin-bottom: 20px; font-size: 20px; color: #FF8C00; font-weight: 900; }
  .level-selection-container { display: flex; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
  .level-selection-container .form-group { flex: 0 1 auto; width: auto; }
  .hero-selection-container { display: flex; justify-content: space-around; margin-bottom: 20px; flex-wrap: wrap; background: #121215; padding: 15px; border-radius: 8px; border: 1px solid #333; }
  .form-group { margin-bottom: 15px; text-align: center; }
  .form-group label { display: block; font-weight: bold; margin-bottom: 8px; color: #ccc; }
  .form-group select { width: 100%; padding: 8px; font-size: 14px; border-radius: 4px; border: 1px solid #555; background: #222; color: #fff; text-align: center; }
  .hero-selection-container .hero-display { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 150px; max-width: 45%; box-sizing: border-box; padding: 0 10px; }
  .hero-image { width: 80px; height: 80px; margin-top: 10px; border-radius: 8px; object-fit: cover; border: 2px solid #555; background: #000; }
  .calc-btn { width: 100%; padding: 12px; font-size: 16px; background: #FF8C00; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; }
  .calc-btn:hover { background: #ffaa00; box-shadow: 0 0 15px rgba(255,140,0,0.4); }
  #message { text-align: center; margin-top: 10px; font-size: 13px; color: #999; }
  #results { margin-top: 20px; font-size: 16px; font-weight: bold; color: #fff; text-align: center; padding: 15px; border: 1px dashed #FF8C00; border-radius: 5px; background-color: rgba(255, 140, 0, 0.1); display: none; }
</style>

<div id="HeroBox">
  <h3>⚔️ 킹샷 영웅 스탯 정밀 비교기</h3>
  
  <div class="level-selection-container">
    <div class="form-group">
      <label for="levelSelect">⭐ 비교할 기준 성급/티어 선택:</label>
      <select id="levelSelect"></select>
    </div>
  </div>

  <div class="hero-selection-container">
    <div class="form-group hero-display">
      <label for="hero1Select">🛡️ 현재 사용 중인 영웅:</label>
      <select id="hero1Select" onchange="updateHero1Selection()"></select>
      <img id="hero1Image" src="" alt="Your Hero" class="hero-image">
    </div>

    <div class="form-group hero-display">
      <label for="hero2Select">⚔️ 교체 후보 영웅:</label>
      <select id="hero2Select" onchange="updateHeroImage('hero2')"></select>
      <img id="hero2Image" src="" alt="Compare Hero" class="hero-image">
    </div>
  </div>

  <button class="calc-btn" onclick="compareHeroes()">영웅 교체 효율 분석하기</button>
  <p id="message">위 스탯은 영웅의 기본 스탯을 기준으로 하며, 위젯이나 전용 장비 수치는 포함되지 않습니다.</p>
  <div id="results"></div>
</div>

<script>
// 1. 추출하신 레벨(티어) 데이터
const levelNames = [
    "0-Star (T0)", "0-Star (T1)", "0-Star (T2)", "0-Star (T3)", "0-Star (T4)", "0-Star (T5)",
    "1-Star (T0)", "1-Star (T1)", "1-Star (T2)", "1-Star (T3)", "1-Star (T4)", "1-Star (T5)",
    "2-Star (T0)", "2-Star (T1)", "2-Star (T2)", "2-Star (T3)", "2-Star (T4)", "2-Star (T5)",
    "3-Star (T0)", "3-Star (T1)", "3-Star (T2)", "3-Star (T3)", "3-Star (T4)", "3-Star (T5)",
    "4-Star (T0)", "4-Star (T1)", "4-Star (T2)", "4-Star (T3)", "4-Star (T4)", "4-Star (T5)",
    "Max"
];

// 2. 추출하신 킹샷 전체 영웅 데이터
const heroes = [
    {
        "name": "Olive",
        "type": "Archer",
        "stats": [11.36, 12.42, 13.47, 14.53, 15.59, 16.65, 18.55, 20.03, 21.51, 22.99, 24.47, 25.95, 28.62, 30.69, 32.76, 34.83, 36.9, 38.98, 42.71, 45.61, 48.51, 51.41, 54.31, 57.22, 62.44, 66.5, 70.56, 74.63, 78.69, 82.75, 90.07],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/olive-avatar.webp"
    },
    {
        "name": "Forrest",
        "type": "Infantry",
        "stats": [11.36, 12.42, 13.47, 14.53, 15.59, 16.65, 18.55, 20.03, 21.51, 22.99, 24.47, 25.95, 28.62, 30.69, 32.76, 34.83, 36.9, 38.98, 42.71, 45.61, 48.51, 51.41, 54.31, 57.22, 62.44, 66.5, 70.56, 74.63, 78.69, 82.75, 90.07],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/forrest-avatar.webp"
    },
    {
        "name": "Edwin",
        "type": "Cavalry",
        "stats": [11.36, 12.42, 13.47, 14.53, 15.59, 16.65, 18.55, 20.03, 21.51, 22.99, 24.47, 25.95, 28.62, 30.69, 32.76, 34.83, 36.9, 38.98, 42.71, 45.61, 48.51, 51.41, 54.31, 57.22, 62.44, 66.5, 70.56, 74.63, 78.69, 82.75, 90.07],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/edwin-avatar.webp"
    },
    {
        "name": "Seth",
        "type": "Infantry",
        "stats": [11.36, 12.42, 13.47, 14.53, 15.59, 16.65, 18.55, 20.03, 21.51, 22.99, 24.47, 25.95, 28.62, 30.69, 32.76, 34.83, 36.9, 38.98, 42.71, 45.61, 48.51, 51.41, 54.31, 57.22, 62.44, 66.5, 70.56, 74.63, 78.69, 82.75, 90.07],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/seth-avatar.webp"
    },
    {
        "name": "Diana",
        "type": "Archer",
        "stats": [13.88, 15.18, 16.47, 17.76, 19.05, 20.35, 22.67, 24.48, 26.29, 28.1, 29.91, 31.72, 34.98, 37.51, 40.04, 42.58, 45.11, 47.64, 52.5, 55.75, 59.29, 62.84, 66.39, 69.93, 76.32, 81.28, 86.25, 91.21, 96.18, 101.15, 110.08],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/diana-avatar-icon.webp"
    },
    {
        "name": "Quinn",
        "type": "Archer",
        "stats": [17.76, 19.32, 20.96, 22.61, 24.25, 25.9, 28.86, 31.16, 33.46, 35.77, 38.07, 40.37, 44.52, 47.74, 50.96, 54.19, 57.41, 60.64, 66.44, 70.95, 75.46, 79.98, 84.49, 89.01, 97.13, 103.45, 109.77, 116.09, 122.41, 128.73, 140.11],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/quinn-avatar.webp"
    },
    {
        "name": "Chenko",
        "type": "Cavalry",
        "stats": [17.76, 19.32, 20.96, 22.61, 24.25, 25.9, 28.86, 31.16, 33.46, 35.77, 38.07, 40.37, 44.52, 47.74, 50.96, 54.19, 57.41, 60.64, 66.44, 70.95, 75.46, 79.98, 84.49, 89.01, 97.13, 103.45, 109.77, 116.09, 122.41, 128.73, 140.11],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/chenko-avatar.webp"
    },
    {
        "name": "Howard",
        "type": "Infantry",
        "stats": [17.76, 19.32, 20.96, 22.61, 24.25, 25.9, 28.86, 31.16, 33.46, 35.77, 38.07, 40.37, 44.52, 47.74, 50.96, 54.19, 57.41, 60.64, 66.44, 70.95, 75.46, 79.98, 84.49, 89.01, 97.13, 103.45, 109.77, 116.09, 122.41, 128.73, 140.11],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/howard-avatar.webp"
    },
    {
        "name": "Gordon",
        "type": "Cavalry",
        "stats": [17.76, 19.32, 20.96, 22.61, 24.25, 25.9, 28.86, 31.16, 33.46, 35.77, 38.07, 40.37, 44.52, 47.74, 50.96, 54.19, 57.41, 60.64, 66.44, 70.95, 75.46, 79.98, 84.49, 89.01, 97.13, 103.45, 109.77, 116.09, 122.41, 128.73, 140.11],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/gordon-avatar.webp"
    },
    {
        "name": "Fahd",
        "type": "Cavalry",
        "stats": [17.76, 19.32, 20.96, 22.61, 24.25, 25.9, 28.86, 31.16, 33.46, 35.77, 38.07, 40.37, 44.52, 47.74, 50.96, 54.19, 57.41, 60.64, 66.44, 70.95, 75.46, 79.98, 84.49, 89.01, 97.13, 103.45, 109.77, 116.09, 122.41, 128.73, 140.11],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/fahd-avatar.webp"
    },
    {
        "name": "Amane",
        "type": "Archer",
        "stats": [17.76, 19.32, 20.96, 22.61, 24.25, 25.9, 28.86, 31.16, 33.46, 35.77, 38.07, 40.37, 44.52, 47.74, 50.96, 54.19, 57.41, 60.64, 66.44, 70.95, 75.46, 79.98, 84.49, 89.01, 97.13, 103.45, 109.77, 116.09, 122.41, 128.73, 140.11],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/amane-avatar.webp"
    },
    {
        "name": "Yeonwoo",
        "type": "Archer",
        "stats": [17.76, 19.32, 20.96, 22.61, 24.25, 25.9, 28.86, 31.16, 33.46, 35.77, 38.07, 40.37, 44.52, 47.74, 50.96, 54.19, 57.41, 60.64, 66.44, 70.95, 75.46, 79.98, 84.49, 89.01, 97.13, 103.45, 109.77, 116.09, 122.41, 128.73, 140.11],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/yeonwoo-avatar.webp"
    },
    {
        "name": "Jabel",
        "type": "Cavalry",
        "stats": [25.25, 27.6, 29.95, 32.3, 34.65, 37, 41.23, 44.52, 47.81, 51.1, 54.39, 57.68, 63.6, 68.2, 72.81, 77.42, 82.02, 86.63, 94.92, 101.37, 107.81, 114.26, 120.71, 127.16, 138.77, 147.79, 156.82, 165.85, 174.88, 183.91, 200.16],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/jabel.webp"
    },
    {
        "name": "Saul",
        "type": "Archer",
        "stats": [25.25, 27.6, 29.95, 32.3, 34.65, 37, 41.23, 44.52, 47.81, 51.1, 54.39, 57.68, 63.6, 68.2, 72.81, 77.42, 82.02, 86.63, 94.92, 101.37, 107.81, 114.26, 120.71, 127.16, 138.77, 147.79, 156.82, 165.85, 174.88, 183.91, 200.16],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/saul-kingshot.webp"
    },
    {
        "name": "Helga",
        "type": "Infantry",
        "stats": [25.25, 27.6, 29.95, 32.3, 34.65, 37, 41.23, 44.52, 47.81, 51.1, 54.39, 57.68, 63.6, 68.2, 72.81, 77.42, 82.02, 86.63, 94.92, 101.37, 107.81, 114.26, 120.71, 127.16, 138.77, 147.79, 156.82, 165.85, 174.88, 183.91, 200.16],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/helga-kingshot.webp"
    },
    {
        "name": "Amadeus",
        "type": "Infantry",
        "stats": [32.82, 35.88, 38.93, 41.99, 45.04, 48.1, 53.59, 57.87, 62.15, 66.43, 70.7, 74.98, 82.68, 88.66, 94.65, 100.64, 106.62, 112.61, 123.39, 131.78, 140.15, 148.53, 156.92, 165.3, 180.4, 192.12, 203.86, 215.6, 227.34, 239.08, 260.2],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/amadeus.webp"
    },
    {
        "name": "Zoe",
        "type": "Infantry",
        "stats": [30.3, 33.12, 35.94, 38.76, 41.58, 44.4, 49.47, 53.42, 57.37, 61.32, 65.26, 69.21, 76.32, 81.84, 87.37, 92.9, 98.42, 103.95, 113.9, 121.64, 129.37, 137.11, 144.85, 152.59, 166.52, 177.34, 188.18, 192.02, 209.85, 220.69, 240.1],
        "image": "https://kingshotcalculator.com/wp-content/uploads/2025/07/zoe-gen2-kingshot.webp"
    },
    {
        "name": "Hilde",
        "type": "Cavalry",
        "stats": [30.3, 33.12, 35.94, 38