kubeload/templates/products/storage.jinja

{% 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>
 <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="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
    <path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
    <path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />
   </svg>
   <br>
   백업에 최적화된 넉넉한 저장소
  </h2>
  <p class="mt-4 md:text-lg text-gray-600">
   안전하고 믿을 수 있는 저장 공간으로, 개인과 기업이 파일을 마음껏 보관할 수 있어요. 무제한 트래픽으로 원하는 만큼 업로드와 다운로드하세요.
  </p>
  <p class="mt-5 text-center">
   <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"></path>
    </svg>
   </a>
  </p>
  <!-- End Grid -->
 </div>
 <!-- Icon Blocks -->
 <div class="py-10 w-full max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
  <!-- Grid -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-y-10 gap-x-4">
   <!-- Icon Block -->
   <div class="max-w-xs lg:max-w-full mx-auto text-center lg:px-4 xl:px-10">
    <svg class="shrink-0 size-7 mx-auto text-blue-600"
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
         stroke-width="0.5"
         stroke-linecap="round"
         stroke-linejoin="round">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M1.28869 2.76279C1.41968 2.36983 1.84442 2.15746 2.23737 2.28845L2.50229 2.37675C2.51549 2.38115 2.52864 2.38554 2.54176 2.38991C3.16813 2.59867 3.69746 2.7751 4.11369 2.96873C4.55613 3.17456 4.94002 3.42965 5.23112 3.83352C5.52221 4.2374 5.64282 4.68226 5.69817 5.16708C5.75025 5.62318 5.75023 6.18114 5.7502 6.84139L5.7502 9.49996C5.7502 10.9354 5.7518 11.9365 5.85335 12.6918C5.952 13.4256 6.13245 13.8142 6.40921 14.091C6.68598 14.3677 7.07455 14.5482 7.80832 14.6468C8.56367 14.7484 9.56479 14.75 11.0002 14.75H18.0002C18.4144 14.75 18.7502 15.0857 18.7502 15.5C18.7502 15.9142 18.4144 16.25 18.0002 16.25H10.9453C9.57774 16.25 8.47542 16.25 7.60845 16.1334C6.70834 16.0124 5.95047 15.7535 5.34855 15.1516C4.74664 14.5497 4.48774 13.7918 4.36673 12.8917C4.25017 12.0247 4.25018 10.9224 4.2502 9.55484L4.2502 6.883C4.2502 6.17 4.24907 5.69823 4.20785 5.33722C4.16883 4.99538 4.10068 4.83049 4.01426 4.71059C3.92784 4.59069 3.79296 4.47389 3.481 4.32877C3.15155 4.17551 2.70435 4.02524 2.02794 3.79978L1.76303 3.71147C1.37008 3.58049 1.15771 3.15575 1.28869 2.76279Z" fill="#155dfc" />
     <path opacity="0.5" d="M5.74512 6C5.75008 6.25912 5.75008 6.53957 5.75007 6.8414L5.75006 9.5C5.75006 10.9354 5.75166 11.9365 5.85321 12.6919C5.86803 12.8021 5.8847 12.9046 5.90326 13H16.0221C16.9815 13 17.4612 13 17.8369 12.7523C18.2126 12.5045 18.4016 12.0636 18.7795 11.1818L19.2081 10.1818C20.0176 8.29294 20.4223 7.34853 19.9777 6.67426C19.5331 6 18.5056 6 16.4507 6H5.74512Z" fill="#155dfc" />
     <path d="M7.5 18C8.32843 18 9 18.6716 9 19.5C9 20.3284 8.32843 21 7.5 21C6.67157 21 6 20.3284 6 19.5C6 18.6716 6.67157 18 7.5 18Z" fill="#155dfc" />
     <path d="M18 19.5001C18 18.6716 17.3284 18.0001 16.5 18.0001C15.6716 18.0001 15 18.6716 15 19.5001C15 20.3285 15.6716 21.0001 16.5 21.0001C17.3284 21.0001 18 20.3285 18 19.5001Z" fill="#155dfc" />
    </svg>
    <p class="mt-3 font-medium text-gray-800">간단하고 투명한 비용</p>
    <p class="mt-2 text-sm text-gray-500">무제한 트래픽으로 비용 걱정 없이, 합리적인 월 요금으로 백업 비용을 절감해요.</p>
   </div>
   <!-- End Icon Block -->
   <!-- Icon Block -->
   <div class="max-w-xs lg:max-w-full mx-auto text-center lg:px-4 xl:px-10">
    <svg class="shrink-0 size-7 mx-auto text-blue-600"
         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.29289 9.29289C3 9.58579 3 10.0572 3 11V17C3 17.9428 3 18.4142 3.29289 18.7071C3.58579 19 4.05719 19 5 19C5.94281 19 6.41421 19 6.70711 18.7071C7 18.4142 7 17.9428 7 17V11C7 10.0572 7 9.58579 6.70711 9.29289C6.41421 9 5.94281 9 5 9C4.05719 9 3.58579 9 3.29289 9.29289Z" fill="#155dfc" />
     <path opacity="0.4" d="M17.2929 2.29289C17 2.58579 17 3.05719 17 4V17C17 17.9428 17 18.4142 17.2929 18.7071C17.5858 19 18.0572 19 19 19C19.9428 19 20.4142 19 20.7071 18.7071C21 18.4142 21 17.9428 21 17V4C21 3.05719 21 2.58579 20.7071 2.29289C20.4142 2 19.9428 2 19 2C18.0572 2 17.5858 2 17.2929 2.29289Z" fill="#155dfc" />
     <path opacity="0.7" d="M10 7C10 6.05719 10 5.58579 10.2929 5.29289C10.5858 5 11.0572 5 12 5C12.9428 5 13.4142 5 13.7071 5.29289C14 5.58579 14 6.05719 14 7V17C14 17.9428 14 18.4142 13.7071 18.7071C13.4142 19 12.9428 19 12 19C11.0572 19 10.5858 19 10.2929 18.7071C10 18.4142 10 17.9428 10 17V7Z" fill="#155dfc" />
     <path d="M3 21.25C2.58579 21.25 2.25 21.5858 2.25 22C2.25 22.4142 2.58579 22.75 3 22.75H21C21.4142 22.75 21.75 22.4142 21.75 22C21.75 21.5858 21.4142 21.25 21 21.25H3Z" fill="#155dfc" />
    </svg>
    <p class="mt-3 font-medium text-gray-800">쉬운 확장성</p>
    <p class="mt-2 text-sm text-gray-500">용량이 부족할 때, 클릭 몇 번으로 간편하게 용량을 늘릴 수 있어요.</p>
   </div>
   <!-- End Icon Block -->
   <!-- Icon Block -->
   <div class="max-w-xs lg:max-w-full mx-auto text-center lg:px-4 xl:px-10">
    <svg class="shrink-0 size-7 mx-auto text-blue-600"
         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="M3.84453 3.84453C2.71849 4.97056 2.71849 6.79623 3.84453 7.92226L5.43227 9.51C5.44419 9.49622 5.98691 10.013 6 9.99989L10 5.99989C10.0131 5.98683 9.49625 5.44415 9.50999 5.43226L7.92226 3.84453C6.79623 2.71849 4.97056 2.71849 3.84453 3.84453Z" fill="#155dfc" />
     <path opacity="0.5" d="M5.1332 15.3072C5.29414 14.8976 5.87167 14.8976 6.03261 15.3072L6.18953 15.7065C6.23867 15.8316 6.33729 15.9306 6.46188 15.9799L6.85975 16.1374C7.26783 16.2989 7.26783 16.8786 6.85975 17.0401L6.46188 17.1976C6.33729 17.2469 6.23867 17.3459 6.18953 17.471L6.03261 17.8703C5.87167 18.2799 5.29414 18.2799 5.1332 17.8703L4.97628 17.471C4.92714 17.3459 4.82852 17.2469 4.70393 17.1976L4.30606 17.0401C3.89798 16.8786 3.89798 16.2989 4.30606 16.1374L4.70393 15.9799C4.82852 15.9306 4.92714 15.8316 4.97628 15.7065L5.1332 15.3072Z" fill="#155dfc" />
     <path opacity="0.2" d="M19.9672 9.12945C20.1281 8.71987 20.7057 8.71987 20.8666 9.12945L21.0235 9.5288C21.0727 9.65385 21.1713 9.75284 21.2959 9.80215L21.6937 9.95965C22.1018 10.1212 22.1018 10.7009 21.6937 10.8624L21.2959 11.0199C21.1713 11.0692 21.0727 11.1682 21.0235 11.2932L20.8666 11.6926C20.7057 12.1022 20.1281 12.1022 19.9672 11.6926L19.8103 11.2932C19.7611 11.1682 19.6625 11.0692 19.5379 11.0199L19.14 10.8624C18.732 10.7009 18.732 10.1212 19.14 9.95965L19.5379 9.80215C19.6625 9.75284 19.7611 9.65385 19.8103 9.5288L19.9672 9.12945Z" fill="#155dfc" />
     <path opacity="0.7" d="M16.1 2.30719C16.261 1.8976 16.8385 1.8976 16.9994 2.30719L17.4298 3.40247C17.479 3.52752 17.5776 3.62651 17.7022 3.67583L18.7934 4.1078C19.2015 4.26934 19.2015 4.849 18.7934 5.01054L17.7022 5.44252C17.5776 5.49184 17.479 5.59082 17.4298 5.71587L16.9995 6.81115C16.8385 7.22074 16.261 7.22074 16.1 6.81116L15.6697 5.71587C15.6205 5.59082 15.5219 5.49184 15.3973 5.44252L14.3061 5.01054C13.898 4.849 13.898 4.26934 14.3061 4.1078L15.3973 3.67583C15.5219 3.62651 15.6205 3.52752 15.6697 3.40247L16.1 2.30719Z" fill="#155dfc" />
     <path d="M10.5681 6.48999C10.5562 6.50373 10.0133 5.9867 10.0002 5.99975L6.00024 9.99975C5.98715 10.0128 6.50414 10.5558 6.49036 10.5677L16.078 20.1553C17.204 21.2814 19.0297 21.2814 20.1557 20.1553C21.2818 19.0293 21.2818 17.2036 20.1557 16.0776L10.5681 6.48999Z" fill="#155dfc" />
    </svg>
    <p class="mt-3 font-medium text-gray-800">다양한 활용</p>
    <p class="mt-2 text-sm text-gray-500">SFTP를 통한 파일 업로드나 넥스트클라우드(Nextcloud)를 활용한 개인 클라우드 구축이 가능해요.</p>
   </div>
   <!-- End Icon Block -->
  </div>
 </div>
 <!-- End Icon Section -->
 <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">
    <!-- 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 xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
           class="size-9 h-9">
       <path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
       <path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
       <path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />
      </svg>
     </div>
     <h3 class="text-xl font-semibold text-gray-800">S1</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": 8900 }'
         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">1TB 용량</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">SFTP, HTTPS, rsync, Rclone, WebDAV, Samba (CIFS) 지원</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">여러 개 추가, 업그레이드/다운그레이드 가능</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 xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
           class="size-9 h-9">
       <path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
       <path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
       <path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />
      </svg>
     </div>
     <h3 class="text-xl font-semibold text-gray-800">S5</h3>
     <div class="mt-4 flex items-center gap-x-0.5">
      <p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 24900, "monthly": 27900 }'
         class="text-gray-800 font-semibold text-3xl">24,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">5TB 용량</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">SFTP, HTTPS, rsync, Rclone, WebDAV, Samba (CIFS) 지원</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">여러 개 추가, 업그레이드/다운그레이드 가능</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 xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
           class="size-9 h-9">
       <path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
       <path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
       <path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />
      </svg>
     </div>
     <h3 class="text-xl font-semibold text-gray-800">S10</h3>
     <div class="mt-4 flex items-center gap-x-0.5">
      <p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 46900, "monthly": 51900 }'
         class="text-gray-800 font-semibold text-3xl">46,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">10TB 용량</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">SFTP, HTTPS, rsync, Rclone, WebDAV, Samba (CIFS) 지원</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">여러 개 추가, 업그레이드/다운그레이드 가능</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 xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
           class="size-9 h-9">
       <path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
       <path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
       <path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />
      </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">S20</h3>
     <div class="mt-4 flex items-center gap-x-0.5">
      <p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 89900, "monthly": 99900 }'
         class="text-gray-800 font-semibold text-3xl">89,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">20TB 용량</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">SFTP, HTTPS, rsync, Rclone, WebDAV, Samba (CIFS) 지원</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">여러 개 추가, 업그레이드/다운그레이드 가능</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">중간에 저장소를 업그레이드하거나 다운그레이드하면 어떻게 되나요?</h3>
     <p class="mt-2 text-gray-500">
      업그레이드를 할 경우, 바로 새로운 요금제의 기능을 이용할 수 있어요. 다운그레이드를 할 경우, 변경 사항이 다음 결제일부터 적용되어, 한 달 동안은 기존 요금제의 기능을 그대로 이용할 수 있어요.
     </p>
    </div>
    <!-- End Col -->
    <!-- End Col -->
    <!-- End Col -->
    <div>
     <h3 class="font-medium text-gray-800">환불은 어떻게 받을 수 있나요?</h3>
     <p class="mt-2 text-gray-500">
      서비스 사용 시작일로부터 30일 이내에 해지하면, 별도의 사유 없이 전액 환불이 가능해요. 30일 이후에는 이미 결제된 기간에 대한 환불은 제공되지 않으며, 다음 결제일부터는 요금이 청구되지 않아요.
     </p>
    </div>
    <div>
     <h3 class="font-medium text-gray-800">트래픽은 무료인가요?</h3>
     <p class="mt-2 text-gray-500">
      모든 저장소 요금제는 무제한 인바운드 트래픽과 아웃바운드 트래픽을 제공해요. 공정 사용 정책에 따라 모든 사용자가 안정적으로 서비스를 이용할 수 있도록, 비정상적으로 과도한 사용 시 서비스가 일시적으로 제한될 수 있어요.
     </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 %}