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

<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 style="color: #ffffff; text-shadow: 1px 1px 2px black;">⚔️ 킹샷 영웅 스탯 정밀 비교기</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"></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"></select>
      <img id="hero2Image" src="" alt="Compare Hero" class="hero-image">
    </div>
  </div>

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