{% extends "base.jinja" %}
{% block title %}
 클라우드 -
{% endblock title %}
{% block head %}
 {{ super() }}
 <link rel="stylesheet"
       href="{{ url_for('static', filename='css/index.css') }}" />
{% endblock head %}
{% block content %}
 <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>
 <!-- Icon Blocks -->
 <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <!-- Grid -->
  <div class="grid md:grid-cols-2 gap-12">
   <div class="lg:w-3/4">
    <h2 class="text-3xl text-gray-800 font-bold lg:text-4xl dark:text-white">
     <svg class="size-20 mx-auto"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
      <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M22 14.3529C22 17.4717 19.4416 20 16.2857 20H10.4995C9.55792 18.7465 9 17.1884 9 15.5C9 11.3579 12.3579 8 16.5 8C17.009 8 17.5062 8.05071 17.9868 8.14736C18.0649 8.42841 18.1216 8.71822 18.1551 9.01498C20.393 9.78024 22 11.8811 22 14.3529Z" fill="#155dfc" />
      <path d="M12.4762 4C9.32028 4 6.7619 6.52827 6.7619 9.64706C6.7619 10.3369 6.88706 10.9978 7.11616 11.6089C6.8475 11.5567 6.56983 11.5294 6.28571 11.5294C3.91878 11.5294 2 13.4256 2 15.7647C2 18.1038 3.91878 20 6.28571 20H10.4995C9.55792 18.7465 9 17.1884 9 15.5C9 11.3579 12.3579 8 16.5 8C17.009 8 17.5062 8.05071 17.9868 8.14736C17.9721 8.09441 17.9566 8.04178 17.9403 7.98948C17.2237 5.67956 15.0484 4 12.4762 4Z" fill="#155dfc" />
     </svg>
     <br>
     빠르고, 간단한 대한민국 개발자의 클라우드
    </h2>
    <p class="mt-3 text-gray-800 dark:text-neutral-400">
     한국 개발자가 세상을 바꾸는 소프트웨어 개발에 더 집중할 수 있도록, 최저 8,900원으로 저비용 고사양의 클라우드를 제공하며 설정 없이 바로 개발을 시작할 수 있어요.
    </p>
    <p class="mt-5">
     <a class="inline-flex items-center gap-x-1 text-sm text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500"
        href="#">
      콘솔로 이동하기
      <svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"
           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" />
      </svg>
     </a>
    </p>
   </div>
   <!-- End Col -->
   <div class="space-y-6 lg:space-y-10">
    <!-- Icon Block -->
    <div class="flex gap-x-5 sm:gap-x-8">
     <!-- Icon -->
     <span class="shrink-0 inline-flex justify-center items-center size-11 rounded-full border border-gray-200 bg-white text-gray-800 shadow-2xs mx-auto dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
      <svg class="shrink-0 size-5"
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="0"
           stroke-linecap="round"
           stroke-linejoin="round">
       <path opacity="0.4" d="M19.9707 10V18C19.9707 21 18.9707 22 15.9707 22H7.9707C4.9707 22 3.9707 21 3.9707 18V10H19.9707Z" fill="#155dfc" />
       <path d="M21.5 7V8C21.5 9.1 20.97 10 19.5 10H4.5C2.97 10 2.5 9.1 2.5 8V7C2.5 5.9 2.97 5 4.5 5H19.5C20.97 5 21.5 5.9 21.5 7Z" fill="#155dfc" />
       <path opacity="0.4" d="M11.6408 4.99994H6.12076C5.78076 4.62994 5.79076 4.05994 6.15076 3.69994L7.57076 2.27994C7.94076 1.90994 8.55076 1.90994 8.92076 2.27994L11.6408 4.99994Z" fill="#155dfc" />
       <path opacity="0.4" d="M17.8696 4.99994H12.3496L15.0696 2.27994C15.4396 1.90994 16.0496 1.90994 16.4196 2.27994L17.8396 3.69994C18.1996 4.05994 18.2096 4.62994 17.8696 4.99994Z" fill="#155dfc" />
       <path opacity="0.6" d="M8.93945 10V15.14C8.93945 15.94 9.81945 16.41 10.4895 15.98L11.4295 15.36C11.7695 15.14 12.1995 15.14 12.5295 15.36L13.4195 15.96C14.0795 16.4 14.9695 15.93 14.9695 15.13V10H8.93945Z" fill="#155dfc" />
      </svg>
     </span>
     <div class="grow">
      <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">추가 금액 제로</h3>
      <p class="mt-1 text-gray-600 dark:text-neutral-400">
       무제한 트래픽부터 DDoS 방어, 공인 IP, 스냅샷까지 모두 포함된 가격이에요. 클라우드 사용 중 예상치 못한 추가 비용 걱정이 없어요.
      </p>
     </div>
    </div>
    <!-- End Icon Block -->
    <!-- Icon Block -->
    <div class="flex gap-x-5 sm:gap-x-8">
     <!-- Icon -->
     <span class="shrink-0 inline-flex justify-center items-center size-11 rounded-full border border-gray-200 bg-white text-gray-800 shadow-2xs mx-auto dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
      <svg class="shrink-0 size-5"
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="0"
           stroke-linecap="round"
           stroke-linejoin="round">
       <path opacity="0.5" d="M18.9771 14.7904C21.6743 12.0932 21.6743 7.72013 18.9771 5.02291C16.2799 2.3257 11.9068 2.3257 9.20961 5.02291C7.41866 6.81385 6.8169 9.34366 7.40432 11.6311C7.49906 12 7.41492 12.399 7.14558 12.6684L3.43349 16.3804C3.11558 16.6984 2.95941 17.1435 3.00906 17.5904L3.24113 19.679C3.26587 19.9017 3.36566 20.1093 3.52408 20.2677L3.73229 20.4759C3.89072 20.6343 4.09834 20.7341 4.32101 20.7589L6.4096 20.9909C6.85645 21.0406 7.30164 20.8844 7.61956 20.5665L8.32958 19.8565L9.39026 18.7958L11.3319 16.8541C11.6013 16.5848 12 16.5009 12.3689 16.5957C14.6563 17.1831 17.1861 16.5813 18.9771 14.7904Z" fill="#155dfc" />
       <path d="M15.4142 8.58579C14.6332 7.80474 13.3668 7.80474 12.5858 8.58579C11.8047 9.36683 11.8047 10.6332 12.5858 11.4142C13.3668 12.1953 14.6332 12.1953 15.4142 11.4142C16.1953 10.6332 16.1953 9.36683 15.4142 8.58579Z" fill="#155dfc" />
       <path d="M6.58295 18.1294L8.3291 19.8565L9.38977 18.7958L7.63776 17.063C7.34326 16.7717 6.86839 16.7743 6.57711 17.0688C6.28584 17.3633 6.28845 17.8382 6.58295 18.1294Z" fill="#155dfc" />
      </svg>
     </span>
     <div class="grow">
      <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">서버 보안 포함</h3>
      <p class="mt-1 text-gray-600 dark:text-neutral-400">
       비밀번호 없는 SSH 로그인, SSH 포트 변경, 루트 로그인 비활성화가 기본으로 포함된 클라우드로, 더 안전한 접속 환경을 제공해요.
      </p>
     </div>
    </div>
    <!-- End Icon Block -->
    <!-- Icon Block -->
    <div class="flex gap-x-5 sm:gap-x-8">
     <!-- Icon -->
     <span class="shrink-0 inline-flex justify-center items-center size-11 rounded-full border border-gray-200 bg-white text-gray-800 shadow-2xs mx-auto dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
      <svg class="shrink-0 size-5"
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="0"
           stroke-linecap="round"
           stroke-linejoin="round">
       <path d="M3 11.9914C3 17.6294 7.23896 20.3655 9.89856 21.5273C10.62 21.8424 10.9807 22 12 22V8L3 11V11.9914Z" fill="#155dfc" />
       <path opacity="0.5" d="M14.1014 21.5273C16.761 20.3655 21 17.6294 21 11.9914V11L12 8V22C13.0193 22 13.38 21.8424 14.1014 21.5273Z" fill="#155dfc" />
       <path opacity="0.5" d="M8.83772 2.80472L8.26491 3.00079C5.25832 4.02996 3.75503 4.54454 3.37752 5.08241C3 5.62028 3 7.21907 3 10.4167V11L12 8V2C11.1886 2 10.405 2.26824 8.83772 2.80472Z" fill="#155dfc" />
       <path d="M15.7351 3.00079L15.1623 2.80472C13.595 2.26824 12.8114 2 12 2V8L21 11V10.4167C21 7.21907 21 5.62028 20.6225 5.08241C20.245 4.54454 18.7417 4.02996 15.7351 3.00079Z" fill="#155dfc" />
      </svg>
     </span>
     <div class="grow">
      <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">SSL 인증서 포함</h3>
      <p class="mt-1 text-gray-600 dark:text-neutral-400">
       클라우드에 기본으로 설치된 캐디(Caddy)를 이용하면, HTTPS가 자동으로 설정되어 별도의 인증서 관리가 필요 없어요.
      </p>
     </div>
    </div>
    <!-- End Icon Block -->
   </div>
   <!-- End Col -->
  </div>
  <!-- End Grid -->
 </div>
 <!-- End Icon Blocks -->
 <div class="max-w-[85rem] 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 -->
   <!-- Toggle -->
   <div class="flex justify-center mb-6">
    <div id="hs-pro-toggle-count"
         class="p-0.5 inline-block bg-gray-100 rounded-full">
     <label for="toggle-count-by-card"
            class="relative inline-block py-1.5 px-3.5">
      <input id="toggle-count-by-card"
             name="hs-pro-toggle-count"
             type="radio"
             class="peer absolute top-0 end-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-full focus:ring-offset-0 checked:before:bg-white checked:before:shadow-2xs checked:bg-none focus:ring-transparent">
      <span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-gray-800 cursor-pointer peer-disabled:cursor-default">
       월간
      </span>
     </label>
     <label for="toggle-count-with-yearly"
            class="relative inline-block py-1.5 px-3.5">
      <input id="toggle-count-with-yearly"
             name="hs-pro-toggle-count"
             type="radio"
             class="peer absolute top-0 end-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-full focus:ring-offset-0 checked:before:bg-white checked:before:shadow-2xs checked:bg-none focus:ring-transparent"
             checked>
      <span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-gray-800 cursor-pointer peer-disabled:cursor-default">
       연간
      </span>
      <span class="absolute -top-6 start-10">
       <span class="flex items-center -mt-5">
        <svg class="shrink-0 -mr-6 text-gray-400"
             xmlns="http://www.w3.org/2000/svg"
             x="0px"
             y="0px"
             viewBox="0 0 99.3 57"
             width="48">
         <path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42">
         </path>
         <path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50">
         </path>
        </svg>
        <span class="block mt-3">
         <span class="inline-flex items-center gap-1.5 py-1 px-2 whitespace-nowrap text-xs font-medium bg-blue-600 text-white rounded-full ">
          최대 10% 절약
         </span>
        </span>
       </span>
      </span>
     </label>
    </div>
   </div>
   <!-- End Toggle -->
   <!-- Pricing Cards Grid -->
   <div class="grid sm:grid-cols-2 2xl:grid-cols-4 2xl:gap-6 gap-4">
    <!-- Card -->
    <div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
     <div class="flex justify-between items-center gap-x-2 mb-3">
      <svg class="w-8.5 h-7.5"
           width="34"
           height="30"
           viewBox="0 0 34 30"
           fill="none"
           xmlns="http://www.w3.org/2000/svg">
       <rect y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-300" />
      </svg>
      <span class="inline-flex items-center gap-1.5 py-1.5 px-2 text-xs font-medium bg-blue-100 text-blue-800 rounded-md /10 ">
       인기
      </span>
     </div>
     <h3 class="text-xl font-semibold text-gray-800">C1</h3>
     <div class="mt-4 flex items-center gap-x-0.5">
      <p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 7900, "monthly": 7900 }'
         class="text-gray-800 font-semibold text-3xl">7,900</p>
      <span class="text-xl font-normal text-gray-800">원</span>
     </div>
     <p class="mt-1 text-xs text-gray-500">매달</p>
     <div class="mt-5">
      <button type="button"
              class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 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"
              data-hs-overlay="#hs-pro-dutprom">선택</button>
     </div>
     <ul class="mt-5 space-y-1">
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">4GB 메모리</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">vCPU 2개</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">40GB 디스크</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">무제한 트래픽</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">공인 IP</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            7
            316.17
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">DDoS 방어</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">스냅샷</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">Linux 운영체제</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
      </li>
     </ul>
    </div>
    <!-- End Card -->
    <!-- Card -->
    <div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
     <div class="flex justify-between items-center gap-x-2 mb-3">
      <svg class="w-8.5 h-7.5"
           width="34"
           height="30"
           viewBox="0 0 34 30"
           fill="none"
           xmlns="http://www.w3.org/2000/svg">
       <rect y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-300" /><rect x="14" y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-500" />
      </svg>
     </div>
     <h3 class="text-xl font-semibold text-gray-800">C2</h3>
     <div class="mt-4 flex items-center gap-x-0.5">
      <p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 16900, "monthly": 18900 }'
         class="text-gray-800 font-semibold text-3xl">16,900</p>
      <span class="text-xl font-normal text-gray-800">원</span>
     </div>
     <p class="mt-1 text-xs text-gray-500">매달</p>
     <div class="mt-5">
      <button type="button"
              class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 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"
              data-hs-overlay="#hs-pro-dutprom">선택</button>
     </div>
     <ul class="mt-5 space-y-1">
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">8GB 메모리</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">vCPU 4개</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">80GB 디스크</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">무제한 트래픽</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">공인 IP</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">DDoS 방어</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">스냅샷</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">Linux 운영체제</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
      </li>
     </ul>
    </div>
    <!-- End Card -->
    <!-- Card -->
    <div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
     <div class="flex justify-between items-center gap-x-2 mb-3">
      <svg class="w-8.5 h-7.5"
           width="34"
           height="30"
           viewBox="0 0 34 30"
           fill="none"
           xmlns="http://www.w3.org/2000/svg">
       <rect x="7" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-200" /><rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-300" /><rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-500" />
      </svg>
     </div>
     <h3 class="text-xl font-semibold text-gray-800">C3</h3>
     <div class="mt-4 flex items-center gap-x-0.5">
      <p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 30900, "monthly": 34900 }'
         class="text-gray-800 font-semibold text-3xl">30,900</p>
      <span class="text-xl font-normal text-gray-800">원</span>
     </div>
     <p class="mt-1 text-xs text-gray-500">매달</p>
     <div class="mt-5">
      <button type="button"
              class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 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"
              data-hs-overlay="#hs-pro-dutprom">선택</button>
     </div>
     <ul class="mt-5 space-y-1">
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">16GB 메모리</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">vCPU 8개</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">160GB 디스크</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">무제한 트래픽</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">공인 IP</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">DDoS 방어</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">스냅샷</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">Linux 운영체제</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
      </li>
     </ul>
    </div>
    <!-- End Card -->
    <!-- Card -->
    <div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
     <div class="flex justify-between items-center gap-x-2 mb-3">
      <svg class="w-8.5 h-7.5"
           width="34"
           height="30"
           viewBox="0 0 34 30"
           fill="none"
           xmlns="http://www.w3.org/2000/svg">
       <rect width="20" height="20" rx="10" fill="currentColor" class="fill-blue-200" /><rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-300" /><rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-400" /><rect x="14" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-600" />
      </svg>
     </div>
     <h3 class="text-xl font-semibold text-gray-800">C4</h3>
     <div class="mt-4 flex items-center gap-x-0.5">
      <p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 57900, "monthly": 65900 }'
         class="text-gray-800 font-semibold text-3xl">57,900</p>
      <span class="text-xl font-normal text-gray-800">원</span>
     </div>
     <p class="mt-1 text-xs text-gray-500">매달</p>
     <div class="mt-5">
      <button type="button"
              class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 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"
              data-hs-overlay="#hs-pro-dutprom">선택</button>
     </div>
     <ul class="mt-5 space-y-1">
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">32GB 메모리</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">vCPU 16개</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">320GB 디스크</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">무제한 트래픽</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">공인 IP</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">DDoS 방어</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">스냅샷</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">Linux 운영체제</span>
      </li>
      <li class="flex gap-x-2">
       <svg class="shrink-0 mt-0.5 size-4 text-gray-500"
            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">
        <polyline points="20 6 9 17 4 12" />
       </svg>
       <span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
      </li>
     </ul>
    </div>
    <!-- End Card -->
   </div>
  </div>
  <!-- End Pricing -->
  <!-- FAQ -->
  <div class="space-y-5">
   <div class="pt-16 text-center">
    <h2 class="text-xl font-semibold text-gray-800">자주하는 질문</h2>
   </div>
   <!-- Grid -->
   <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-y-6 sm:gap-8 lg:gap-y-5 lg:gap-x-12">
    <div>
     <h3 class="font-medium text-gray-800">월 요금은 언제 결제되나요?</h3>
     <p class="mt-2 text-gray-500">서비스를 사용하기 시작한 날을 기준으로 매월 같은 날짜에 자동 결제돼요.</p>
    </div>
    <!-- End Col -->
    <div>
     <h3 class="font-medium text-gray-800">운영체제(OS)를 바꿀 수 있나요?</h3>
     <p class="mt-2 text-gray-500">네, 우분투, 데비안, 페도라, CentOS, 로키 리눅스 중에 선택하여 설치할 수 있어요. Windows 운영체제는 지원하지 않아요.</p>
    </div>
    <!-- End Col -->
    <div>
     <h3 class="font-medium text-gray-800">공인 IP를 제공하나요?</h3>
     <p class="mt-2 text-gray-500">네, 클라우드 서버 1대당 IPv4와 IPv6 주소가 각각 제공돼요.</p>
    </div>
    <!-- End Col -->
    <div>
     <h3 class="font-medium text-gray-800">중간에 클라우드를 업그레이드하거나 다운그레이드하면 어떻게 되나요?</h3>
     <p class="mt-2 text-gray-500">
      업그레이드를 할 경우, 바로 새로운 요금제의 기능을 이용할 수 있어요. 다운그레이드를 할 경우, 변경 사항이 다음 결제일부터 적용되어, 한 달 동안은 기존 요금제의 기능을 그대로 이용할 수 있어요.
     </p>
    </div>
    <!-- End Col -->
    <div>
     <h3 class="font-medium text-gray-800">스냅샷이란 무엇이며, 제공되나요?</h3>
     <p class="mt-2 text-gray-500">
      스냅샷은 특정 시점의 서버 상태를 그대로 저장하는 기능이에요. 이를 통해 서버를 똑같이 복제하거나, 백업할 수 있어요. 서버 1대당 최대 2개까지 무료로 저장할 수 있으며, 기존 스냅샷을 삭제하고 새로 생성할 수 있어요.
     </p>
    </div>
    <!-- End Col -->
    <div>
     <h3 class="font-medium text-gray-800">클라우드 서버를 정지하면 요금은 어떻게 되나요?</h3>
     <p class="mt-2 text-gray-500">
      서버를 일시 중지하더라도 서버 리소스(CPU, 메모리, 디스크)는 계속 유지되며, 다음 달에도 요금이 계속 청구돼요. 요금 청구를 원치 않는 경우, 서버를 삭제해 주세요.
     </p>
    </div>
    <!-- End Col -->
    <div>
     <h3 class="font-medium text-gray-800">트래픽은 무료인가요?</h3>
     <p class="mt-2 text-gray-500">
      모든 클라우드 요금제는 무제한 인바운드 트래픽과 아웃바운드 트래픽을 제공해요. 공정 사용 정책에 따라 모든 사용자가 안정적으로 서비스를 이용할 수 있도록, 비정상적으로 과도한 사용 시 서비스가 일시적으로 제한될 수 있어요.
     </p>
    </div>
    <!-- End Col -->
    <div>
     <h3 class="font-medium text-gray-800">환불은 어떻게 받을 수 있나요?</h3>
     <p class="mt-2 text-gray-500">
      서비스 사용 시작일로부터 30일 이내에 해지하면, 별도의 사유 없이 전액 환불이 가능해요. 30일 이후에는 이미 결제된 기간에 대한 환불은 제공되지 않으며, 다음 결제일부터는 요금이 청구되지 않아요.
     </p>
    </div>
    <!-- End Col -->
   </div>
   <!-- End Grid -->
   <div class="pt-3 flex justify-center items-center gap-x-3">
    <p class="text-sm text-gray-500">아직 궁금한 점이 있나요?</p>
    <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50"
       href="#">물어보기</a>
   </div>
  </div>
  <!-- End FAQ -->
 </div>
{% endblock content %}