{% extends "base.jinja" %}
{% block title %}
 인공지능 -
{% endblock title %}
{% block head %}
 {{ super() }}
 <link rel="stylesheet"
       href="{{ url_for('static', filename='css/index.css') }}" />
 <script>
document.addEventListener("DOMContentLoaded", () => {
  const prices = [...document.querySelectorAll('[data-hs-toggle-count-custom]')];
  const yearly = document.getElementById('toggle-count-with-yearly');
  const update = () => prices.forEach(p => p.textContent = (JSON.parse(p.dataset.hsToggleCountCustom)[yearly.checked ? 'yearly' : 'monthly']).toLocaleString());
  document.querySelectorAll('input[name="hs-pro-toggle-count"]').forEach(r => r.addEventListener('change', update));
  update();
});
 </script>
 <!-- Announcement Banner -->
 <div id="ab-full-width-with-dismiss-button-on-blue-bg"
      class="hs-removing:-translate-y-full bg-blue-600">
  <div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
   <div class="flex">
    <p class="text-white">큐브 AI는 2026년 출시 예정이에요</p>
    <div class="ps-3 ms-auto">
     <button type="button"
             class="inline-flex rounded-lg p-1.5 text-white/80 hover:bg-white/10 focus:outline-hidden focus:bg-white/10"
             data-hs-remove-element="#ab-full-width-with-dismiss-button-on-blue-bg">
      <span class="sr-only">Dismiss</span>
      <svg class="shrink-0 size-4"
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round">
       <path d="M18 6 6 18" />
       <path d="m6 6 12 12" />
      </svg>
     </button>
    </div>
   </div>
  </div>
 </div>
 <!-- End Announcement Banner -->
{% endblock head %}
{% block content %}
 <div class="max-w-2xl mx-auto text-center pt-20 pb-6 lg:pb-16 px-4 sm:px-6 lg:px-8">
  <h2 class="text-2xl font-bold sm:text-3xl md:text-4xl">
   <svg class="size-20 mx-auto"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
    <path d="M21.2058 15.9119C20.9921 15.9989 20.7565 16.1 20.4946 16.2127L20.4845 16.217C19.9982 16.4262 19.44 16.6663 18.8314 16.8912C17.6046 17.3446 16.1383 17.7502 14.5091 17.7502C12.6959 17.7502 11.3063 17.2655 10.1918 16.731C9.76157 16.5247 9.36342 16.3062 9.01252 16.1136C8.91833 16.0619 8.82723 16.0119 8.74015 15.9647C8.31075 15.7319 7.97599 15.5652 7.67788 15.4714C6.34018 15.0505 5.04861 14.8691 4.08751 14.7938C3.6084 14.7563 3.21511 14.7454 2.94401 14.7439C2.80855 14.7431 2.70386 14.7446 2.63452 14.7463C2.59986 14.7471 2.57406 14.748 2.55768 14.7486L2.54028 14.7493L2.53747 14.7494L2.38477 14.7571C3.58171 18.9391 7.43333 22 11.9999 22C16.1345 22 19.6831 19.4907 21.2058 15.9119Z" fill="#155dfc" />
    <path d="M3.23676 7.17868L3.53394 7.48144L3.53709 7.48459L3.55582 7.50294C3.57379 7.52036 3.60263 7.54786 3.64202 7.58403C3.72083 7.6564 3.84159 7.76321 4.0016 7.89306C4.32207 8.15313 4.79725 8.50343 5.40559 8.85435C6.62489 9.55771 8.35499 10.2501 10.4369 10.2501C11.8105 10.2501 12.8621 9.85611 13.7542 9.38998C14.1093 9.20444 14.429 9.01331 14.7466 8.82347C14.8383 8.76869 14.9298 8.71401 15.0219 8.6596C15.4141 8.42789 15.8325 8.1918 16.2565 8.04645C17.6126 7.58156 18.7967 7.38416 19.6473 7.30323C20.0728 7.26273 20.4159 7.25129 20.6566 7.25025C20.7104 7.25002 20.759 7.25031 20.8024 7.2509C19.1119 4.12408 15.8039 2 11.9999 2C8.22517 2 4.93895 4.09141 3.23676 7.17868Z" fill="#155dfc" />
    <path opacity="0.5" d="M21.7753 14.1179C21.9225 13.4352 22 12.7267 22 12.0001C22 10.8787 21.8154 9.80039 21.475 8.79394L20.9481 8.75617L20.947 8.75609L20.9374 8.75555C20.9272 8.755 20.91 8.75416 20.886 8.75332C20.838 8.75162 20.7629 8.74988 20.6632 8.75032C20.4637 8.75118 20.1661 8.76073 19.7895 8.79656C19.0358 8.86828 17.9699 9.04491 16.7431 9.46547C16.4799 9.55569 16.1798 9.71791 15.785 9.95116C15.7058 9.99794 15.623 10.0474 15.537 10.0989C15.2148 10.2916 14.8462 10.512 14.449 10.7195C13.419 11.2577 12.1263 11.7502 10.437 11.7502C8.01897 11.7502 6.03049 10.9465 4.65621 10.1537C3.96776 9.75661 3.4274 9.35884 3.05652 9.05786C2.87086 8.90719 2.727 8.78023 2.62761 8.68896C2.60946 8.67229 2.59278 8.65681 2.5776 8.64258C2.20363 9.692 2 10.8223 2 12.0001C2 12.4305 2.02719 12.8545 2.07994 13.2706L2.46407 13.2513L2.46666 13.2512L2.47465 13.2508L2.50174 13.2497C2.52466 13.2489 2.55722 13.2478 2.59884 13.2468C2.68207 13.2448 2.80162 13.2431 2.95282 13.244C3.25506 13.2457 3.68485 13.2578 4.20473 13.2985C5.24158 13.3796 6.65156 13.576 8.1282 14.0406C8.57883 14.1824 9.02704 14.414 9.45523 14.6461C9.5548 14.7001 9.65396 14.7545 9.75352 14.8091C10.0999 14.9991 10.4512 15.1918 10.8405 15.3786C11.8204 15.8484 12.9851 16.2503 14.5092 16.2503C15.8918 16.2503 17.1709 15.9059 18.3115 15.4843C18.8824 15.2734 19.4099 15.0465 19.9021 14.8348L19.9204 14.8269C20.3949 14.6228 20.8566 14.4242 21.2628 14.2888L21.7753 14.1179Z" fill="#155dfc" />
   </svg>
   <br>
   더 적은 비용에 더 많은 GPU
  </h2>
  <p class="mt-4 md:text-lg text-gray-600">
   유연한 요금제와 즉시 사용 가능한 GPU로 AI, 머신러닝, 딥러닝, 렌더링 작업을 손쉽게 시작해 보세요. 필요할 때 언제든 바로 확장할 수 있어요.
  </p>
 </div>
 <div class="max-w-[60.5rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <!-- Pricing -->
  <div>
   <!-- Title -->
   <div class="text-center mb-12">
    <h1 class="text-2xl font-semibold text-gray-800">요금</h1>
   </div>
   <!-- End Title -->
   <!-- Table Section -->
   <div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300">
    <div class="min-w-full inline-block align-middle">
     <!-- Table -->
     <table class="min-w-full divide-y divide-gray-200">
      <thead>
       <tr>
        <th scope="col" class="w-3/4">
         <div class="pe-4 py-3 text-start flex items-center gap-x-1 text-sm font-medium text-gray-800">GPU 이름</div>
        </th>
        <th scope="col" class="w-1/4">
         <div class="px-4 py-3 text-start flex items-center gap-x-1 text-sm font-medium text-gray-800">시간당 가격 (하위 25%)</div>
        </th>
        <th scope="col"></th>
       </tr>
      </thead>
      <tbody class="divide-y divide-gray-200">
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 4090</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 420원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 5090</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 522원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">H200</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 3,176원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">H100 SXM</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 2,262원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX PRO 6000 S</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 1,780원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 3090</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 189원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">A100 SXM4</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 943원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX PRO 6000 WS</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 1,175원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">B200</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 4,829원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">H200 NVL</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 2,364원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">L40S</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 682원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">H100 NVL</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 2,509원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX A6000</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 537원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 3060</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 72원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">A100 PCIE</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 769원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX A5000</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 247원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 6000 ADA</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 682원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 5060 Ti</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 116원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">Tesla V100</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 189원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">A40</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 406원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 4060 Ti</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 130원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 5080</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 174원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 3080</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 102원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX A4000</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 116원</span>
        </td>
       </tr>
       <tr>
        <td class="size-px whitespace-nowrap pe-4 py-3">
         <div class="w-full flex items-center gap-x-2">
          <div class="grow">
           <span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 5070 Ti</a></span>
          </div>
         </div>
        </td>
        <td class="size-px whitespace-nowrap px-4 py-3">
         <span class="text-sm text-gray-600">시간당 145원</span>
        </td>
       </tr>
      </tbody>
     </table>
     <!-- End Table -->
    </div>
   </div>
   <!-- End Table Section -->
  </div>
  <div class="relative z-20 flex justify-center gap-x-3 mt-12">
   <a class="rounded-lg shadow-md py-3 px-4 inline-flex justify-center items-center gap-x-1 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
      href="#">
    사용 가능한 모든 GPU 보기
    <svg class="shrink-0 size-4"
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round">
     <path d="m9 18 6-6-6-6"></path>
    </svg>
   </a>
  </div>
 </div>
{% endblock content %}