:root {
    --surface-a:#070707;
    --surface-b:#111112;
    --surface-c:#1C1C1C;
    --surface-d:hsla(0,0%,100%,.12);
    --surface-e:#070707;
    --surface-f:#262626;
    --text-color:#FFFFFF;
    --text-color-secondary:#ECECEC;
    --primary-color:#9FA8DA;
    --primary-color-text:#111112;
    --font-family:Pretendard, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    --surface-0: #111112;
    --surface-50: #2a2a2a;
    --surface-100: #414141;
    --surface-200: #555555;
    --surface-300: #717171;
    --surface-400: #888888;
    --surface-500: #a0a0a0;
    --surface-600: #b8b8b8;
    --surface-700: #d0d0d0;
    --surface-800: #e7e7e7;
    --surface-900: #ffffff;
    --gray-50: #e7e7e7;
    --gray-100: #d0d0d0;
    --gray-200: #b8b8b8;
    --gray-300: #a0a0a0;
    --gray-400: #888888;
    --gray-500: #717171;
    --gray-600: #555555;
    --gray-700: #414141;
    --gray-800: #2a2a2a;
    --gray-900: #111112;
    --content-padding:1rem;
    --inline-spacing:0.5rem;
    --border-radius:4px;
    --surface-ground:#111112;
    --surface-section:#111112;
    --surface-card:#070707;
    --surface-overlay:#262626;
    --surface-border:hsla(0,0%,100%,.12);
    --surface-hover:#1C1C1C;
    --maskbg: rgba(0, 0, 0, 0.32);
    --focus-ring: none;
    color-scheme: dark;
  }
  
  /* Pretendard-Regular */
  @font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 400;
    src: local("Pretendard"), local("Pretendard-Regular"), url("./fonts/Pretendard-Regular.woff2") format("woff2"), url("./fonts/Pretendard-Regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* Pretendard-Medium */
  @font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 500;
    src: local("Pretendard Medium"), local("Pretendard-Medium"), url("./fonts/Pretendard-Medium.woff2") format("woff2"), url("./fonts/Pretendard-Medium.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* Pretendard-SemiBold */
  @font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 600;
    src: local("Pretendard SemiBold"), local("Pretendard-SemiBold"), url("./fonts/Pretendard-SemiBold.woff2") format("woff2"), url("./fonts/Pretendard-SemiBold.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* Pretendard-Bold */
  @font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 700;
    src: local("Pretendard Bold"), local("Pretendard-Bold"), url("./fonts/Pretendard-Bold.woff2") format("woff2"), url("./fonts/Pretendard-Bold.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* Pretendard-ExtraBold */
  @font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 800;
    src: local("Pretendard ExtraBold"), local("Pretendard-ExtraBold"), url("./fonts/Pretendard-ExtraBold.woff2") format("woff2"), url("./fonts/Pretendard-ExtraBold.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  * {
    box-sizing: border-box;
  }
  
  
  @keyframes p-component-overlay-enter-animation {
    from {
      background-color: transparent;
    }
    to {
      background-color: var(--maskbg);
    }
  }
  @keyframes p-component-overlay-leave-animation {
    from {
      background-color: var(--maskbg);
    }
    to {
      background-color: transparent;
    }
  }
  
  :root {
    --blue-50:#f4fafe;
    --blue-100:#cae6fc;
    --blue-200:#a0d2fa;
    --blue-300:#75bef8;
    --blue-400:#4baaf5;
    --blue-500:#2196f3;
    --blue-600:#1c80cf;
    --blue-700:#1769aa;
    --blue-800:#125386;
    --blue-900:#0d3c61;
    --green-50:#f7faf5;
    --green-100:#dbe8cf;
    --green-200:#bed6a9;
    --green-300:#a1c384;
    --green-400:#85b15e;
    --green-500:#689f38;
    --green-600:#588730;
    --green-700:#496f27;
    --green-800:#39571f;
    --green-900:#2a4016;
    --yellow-50:#fffcf5;
    --yellow-100:#fef0cd;
    --yellow-200:#fde4a5;
    --yellow-300:#fdd87d;
    --yellow-400:#fccc55;
    --yellow-500:#fbc02d;
    --yellow-600:#d5a326;
    --yellow-700:#b08620;
    --yellow-800:#8a6a19;
    --yellow-900:#644d12;
    --cyan-50:#f2fcfd;
    --cyan-100:#c2eff5;
    --cyan-200:#91e2ed;
    --cyan-300:#61d5e4;
    --cyan-400:#30c9dc;
    --cyan-500:#00bcd4;
    --cyan-600:#00a0b4;
    --cyan-700:#008494;
    --cyan-800:#006775;
    --cyan-900:#004b55;
    --pink-50:#fef4f7;
    --pink-100:#fac9da;
    --pink-200:#f69ebc;
    --pink-300:#f1749e;
    --pink-400:#ed4981;
    --pink-500:#e91e63;
    --pink-600:#c61a54;
    --pink-700:#a31545;
    --pink-800:#801136;
    --pink-900:#5d0c28;
    --indigo-50:#f6f7fc;
    --indigo-100:#d5d9ef;
    --indigo-200:#b3bae2;
    --indigo-300:#919cd5;
    --indigo-400:#707dc8;
    --indigo-500:#4e5fbb;
    --indigo-600:#42519f;
    --indigo-700:#374383;
    --indigo-800:#2b3467;
    --indigo-900:#1f264b;
    --teal-50:#f2faf9;
    --teal-100:#c2e6e2;
    --teal-200:#91d2cc;
    --teal-300:#61beb5;
    --teal-400:#30aa9f;
    --teal-500:#009688;
    --teal-600:#008074;
    --teal-700:#00695f;
    --teal-800:#00534b;
    --teal-900:#003c36;
    --orange-50:#fffaf2;
    --orange-100:#ffe6c2;
    --orange-200:#ffd391;
    --orange-300:#ffbf61;
    --orange-400:#ffac30;
    --orange-500:#ff9800;
    --orange-600:#d98100;
    --orange-700:#b36a00;
    --orange-800:#8c5400;
    --orange-900:#663d00;
    --bluegray-50:#f7f9f9;
    --bluegray-100:#d9e0e3;
    --bluegray-200:#bbc7cd;
    --bluegray-300:#9caeb7;
    --bluegray-400:#7e96a1;
    --bluegray-500:#607d8b;
    --bluegray-600:#526a76;
    --bluegray-700:#435861;
    --bluegray-800:#35454c;
    --bluegray-900:#263238;
    --purple-50:#faf4fb;
    --purple-100:#e7cbec;
    --purple-200:#d4a2dd;
    --purple-300:#c279ce;
    --purple-400:#af50bf;
    --purple-500:#9c27b0;
    --purple-600:#852196;
    --purple-700:#6d1b7b;
    --purple-800:#561561;
    --purple-900:#3e1046;
    --red-50:#fef6f5;
    --red-100:#fcd2cf;
    --red-200:#faaea9;
    --red-300:#f88a82;
    --red-400:#f6675c;
    --red-500:#f44336;
    --red-600:#cf392e;
    --red-700:#ab2f26;
    --red-800:#86251e;
    --red-900:#621b16;
    --primary-50:#fafbfd;
    --primary-100:#e8eaf6;
    --primary-200:#d6daef;
    --primary-300:#c3c9e8;
    --primary-400:#b1b9e1;
    --primary-500:#9fa8da;
    --primary-600:#878fb9;
    --primary-700:#6f7699;
    --primary-800:#575c78;
    --primary-900:#404357;
  }