@sellmate/design-system 0.0.15 → 0.0.17

package/dist/collection/components/sd-guide/sd-guide.css

@@ -1,54 +1,1311 @@
 @charset "UTF-8";
-/*
-Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
-https://github.com/orioncactus/pretendard
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-*/
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 800;
-  font-display: swap;
-  src: local("Pretendard-ExtraBold"), url("./fonts/Pretendard-ExtraBold.subset.woff2") format("font-woff2"), url("./fonts/Pretendard-ExtraBold.ttf") format("truetype"); /* Safari, Android, iOS */
-}
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 700;
-  font-display: swap;
-  src: local("Pretendard-Bold"), url("./fonts/Pretendard-Bold.subset.woff2") format("font-woff2"), url("./fonts/Pretendard-Bold.ttf") format("truetype"); /* Safari, Android, iOS */
+/* === Background Colors === */
+.bg-primary {
+  background-color: var(--color-primary, #051d36);
+}
+
+.bg-secondary {
+  background-color: var(--color-secondary, #555555);
+}
+
+.bg-accent {
+  background-color: var(--color-accent, #9c27b0);
+}
+
+.bg-positive {
+  background-color: var(--color-positive, #0075ff);
+}
+
+.bg-negative {
+  background-color: var(--color-negative, #e30000);
+}
+
+.bg-info {
+  background-color: var(--color-info, #00cd52);
+}
+
+.bg-warning {
+  background-color: var(--color-warning, #f2c037);
+}
+
+.bg-red_99 {
+  background-color: var(--color-red_99, #220000);
+}
+
+.bg-red_95 {
+  background-color: var(--color-red_95, #440000);
+}
+
+.bg-red_90 {
+  background-color: var(--color-red_90, #5E0000);
+}
+
+.bg-red_85 {
+  background-color: var(--color-red_85, #820000);
+}
+
+.bg-red_80 {
+  background-color: var(--color-red_80, #AD0000);
+}
+
+.bg-red_75 {
+  background-color: var(--color-red_75, #E30000);
+}
+
+.bg-red_70 {
+  background-color: var(--color-red_70, #FB4444);
+}
+
+.bg-red_60 {
+  background-color: var(--color-red_60, #FF7C7C);
+}
+
+.bg-red_45 {
+  background-color: var(--color-red_45, #FFB5B5);
+}
+
+.bg-red_30 {
+  background-color: var(--color-red_30, #FFD3D3);
+}
+
+.bg-red_20 {
+  background-color: var(--color-red_20, #FCE6E6);
+}
+
+.bg-red_15 {
+  background-color: var(--color-red_15, #FCEFEF);
+}
+
+.bg-caution_bg {
+  background-color: var(--color-caution_bg, #FEF1F1);
+}
+
+.bg-caution_icon {
+  background-color: var(--color-caution_icon, #fd9595);
+}
+
+.bg-orange_99 {
+  background-color: var(--color-orange_99, #2F1100);
+}
+
+.bg-orange_95 {
+  background-color: var(--color-orange_95, #4D1B00);
+}
+
+.bg-orange_90 {
+  background-color: var(--color-orange_90, #752A00);
+}
+
+.bg-orange_85 {
+  background-color: var(--color-orange_85, #9B3700);
+}
+
+.bg-orange_75 {
+  background-color: var(--color-orange_75, #CE4900);
+}
+
+.bg-orange_65 {
+  background-color: var(--color-orange_65, #FF6B00);
+}
+
+.bg-orange_60 {
+  background-color: var(--color-orange_60, #FF7F22);
+}
+
+.bg-orange_55 {
+  background-color: var(--color-orange_55, #FFA452);
+}
+
+.bg-orange_45 {
+  background-color: var(--color-orange_45, #FFBC81);
+}
+
+.bg-orange_35 {
+  background-color: var(--color-orange_35, #FFD5AF);
+}
+
+.bg-orange_20 {
+  background-color: var(--color-orange_20, #FFEAD7);
+}
+
+.bg-orange_10 {
+  background-color: var(--color-orange_10, #FEF1EA);
+}
+
+.bg-header_alert {
+  background-color: var(--color-header_alert, #FF7A00);
+}
+
+.bg-yellow_95 {
+  background-color: var(--color-yellow_95, #322700);
+}
+
+.bg-yellow_90 {
+  background-color: var(--color-yellow_90, #453702);
+}
+
+.bg-yellow_80 {
+  background-color: var(--color-yellow_80, #6C5602);
+}
+
+.bg-yellow_70 {
+  background-color: var(--color-yellow_70, #9C7A00);
+}
+
+.bg-yellow_60 {
+  background-color: var(--color-yellow_60, #C49900);
+}
+
+.bg-yellow_50 {
+  background-color: var(--color-yellow_50, #EBB800);
+}
+
+.bg-yellow_45 {
+  background-color: var(--color-yellow_45, #FFC700);
+}
+
+.bg-yellow_40 {
+  background-color: var(--color-yellow_40, #FFD643);
+}
+
+.bg-yellow_30 {
+  background-color: var(--color-yellow_30, #FEE17C);
+}
+
+.bg-yellow_25 {
+  background-color: var(--color-yellow_25, #FFE99E);
+}
+
+.bg-yellow_20 {
+  background-color: var(--color-yellow_20, #FEF1C4);
+}
+
+.bg-yellow_10 {
+  background-color: var(--color-yellow_10, #FFF7DD);
+}
+
+.bg-olive_95 {
+  background-color: var(--color-olive_95, #2C2C00);
+}
+
+.bg-olive_90 {
+  background-color: var(--color-olive_90, #454500);
+}
+
+.bg-olive_80 {
+  background-color: var(--color-olive_80, #636300);
+}
+
+.bg-olive_70 {
+  background-color: var(--color-olive_70, #838300);
+}
+
+.bg-olive_65 {
+  background-color: var(--color-olive_65, #A5A500);
+}
+
+.bg-olive_55 {
+  background-color: var(--color-olive_55, #C7C700);
+}
+
+.bg-olive_45 {
+  background-color: var(--color-olive_45, #DDDD12);
+}
+
+.bg-olive_30 {
+  background-color: var(--color-olive_30, #EEEE37);
+}
+
+.bg-olive_20 {
+  background-color: var(--color-olive_20, #F6F65F);
+}
+
+.bg-olive_15 {
+  background-color: var(--color-olive_15, #FAFAA1);
+}
+
+.bg-olive_10 {
+  background-color: var(--color-olive_10, #FBFBBF);
+}
+
+.bg-olive_05 {
+  background-color: var(--color-olive_05, #FEFED9);
+}
+
+.bg-green_99 {
+  background-color: var(--color-green_99, #001D0B);
+}
+
+.bg-green_95 {
+  background-color: var(--color-green_95, #003013);
+}
+
+.bg-green_90 {
+  background-color: var(--color-green_90, #00461C);
+}
+
+.bg-green_85 {
+  background-color: var(--color-green_85, #006629);
+}
+
+.bg-green_80 {
+  background-color: var(--color-green_80, #007B31);
+}
+
+.bg-green_75 {
+  background-color: var(--color-green_75, #00973C);
+}
+
+.bg-green_70 {
+  background-color: var(--color-green_70, #12B553);
+}
+
+.bg-green_65 {
+  background-color: var(--color-green_65, #2BCE6C);
+}
+
+.bg-green_55 {
+  background-color: var(--color-green_55, #6DE39C);
+}
+
+.bg-green_45 {
+  background-color: var(--color-green_45, #ACF4C9);
+}
+
+.bg-green_25 {
+  background-color: var(--color-green_25, #D4FAE3);
+}
+
+.bg-green_15 {
+  background-color: var(--color-green_15, #E8F9EF);
+}
+
+.bg-steelblue_99 {
+  background-color: var(--color-steelblue_99, #021a25);
+}
+
+.bg-steelblue_95 {
+  background-color: var(--color-steelblue_95, #02212f);
+}
+
+.bg-steelblue_90 {
+  background-color: var(--color-steelblue_90, #032d40);
+}
+
+.bg-steelblue_85 {
+  background-color: var(--color-steelblue_85, #033f59);
+}
+
+.bg-steelblue_80 {
+  background-color: var(--color-steelblue_80, #06587d);
+}
+
+.bg-steelblue_75 {
+  background-color: var(--color-steelblue_75, #066d9b);
+}
+
+.bg-steelblue_70 {
+  background-color: var(--color-steelblue_70, #128fc7);
+}
+
+.bg-steelblue_65 {
+  background-color: var(--color-steelblue_65, #229fd7);
+}
+
+.bg-steelblue_60 {
+  background-color: var(--color-steelblue_60, #50bff0);
+}
+
+.bg-steelblue_45 {
+  background-color: var(--color-steelblue_45, #a4e2fd);
+}
+
+.bg-steelblue_25 {
+  background-color: var(--color-steelblue_25, #d9f2fd);
+}
+
+.bg-steelblue_10 {
+  background-color: var(--color-steelblue_10, #ecf8fd);
+}
+
+.bg-oceanblue_99 {
+  background-color: var(--color-oceanblue_99, #011428);
+}
+
+.bg-oceanblue_95 {
+  background-color: var(--color-oceanblue_95, #03172d);
+}
+
+.bg-oceanblue_90 {
+  background-color: var(--color-oceanblue_90, #051d36);
+}
+
+.bg-oceanblue_85 {
+  background-color: var(--color-oceanblue_85, #07284a);
+}
+
+.bg-oceanblue_80 {
+  background-color: var(--color-oceanblue_80, #004177);
+}
+
+.bg-oceanblue_75 {
+  background-color: var(--color-oceanblue_75, #025497);
+}
+
+.bg-oceanblue_70 {
+  background-color: var(--color-oceanblue_70, #006ac1);
+}
+
+.bg-oceanblue_65 {
+  background-color: var(--color-oceanblue_65, #1f8ae1);
+}
+
+.bg-oceanblue_60 {
+  background-color: var(--color-oceanblue_60, #5cb0f3);
+}
+
+.bg-oceanblue_50 {
+  background-color: var(--color-oceanblue_50, #9cd1fc);
+}
+
+.bg-oceanblue_25 {
+  background-color: var(--color-oceanblue_25, #d5ebfe);
+}
+
+.bg-oceanblue_15 {
+  background-color: var(--color-oceanblue_15, #eaf5fe);
+}
+
+.bg-brilliantblue_99 {
+  background-color: var(--color-brilliantblue_99, #001226);
+}
+
+.bg-brilliantblue_95 {
+  background-color: var(--color-brilliantblue_95, #001b39);
+}
+
+.bg-brilliantblue_90 {
+  background-color: var(--color-brilliantblue_90, #002b5e);
+}
+
+.bg-brilliantblue_85 {
+  background-color: var(--color-brilliantblue_85, #004290);
+}
+
+.bg-brilliantblue_80 {
+  background-color: var(--color-brilliantblue_80, #005cc9);
+}
+
+.bg-brilliantblue_75 {
+  background-color: var(--color-brilliantblue_75, #0075ff);
+}
+
+.bg-brilliantblue_70 {
+  background-color: var(--color-brilliantblue_70, #2d8dff);
+}
+
+.bg-brilliantblue_60 {
+  background-color: var(--color-brilliantblue_60, #64abff);
+}
+
+.bg-brilliantblue_50 {
+  background-color: var(--color-brilliantblue_50, #93c4ff);
+}
+
+.bg-brilliantblue_40 {
+  background-color: var(--color-brilliantblue_40, #bbdaff);
+}
+
+.bg-brilliantblue_25 {
+  background-color: var(--color-brilliantblue_25, #d9eaff);
+}
+
+.bg-brilliantblue_20 {
+  background-color: var(--color-brilliantblue_20, #e6f1ff);
+}
+
+.bg-brilliantblue_10 {
+  background-color: var(--color-brilliantblue_10, #eff6ff);
+}
+
+.bg-brilliantblue_05 {
+  background-color: var(--color-brilliantblue_05, #f5faff);
+}
+
+.bg-grey_95 {
+  background-color: var(--color-grey_95, #222222);
+}
+
+.bg-grey_90 {
+  background-color: var(--color-grey_90, #333333);
+}
+
+.bg-grey_85 {
+  background-color: var(--color-grey_85, #444444);
+}
+
+.bg-grey_80 {
+  background-color: var(--color-grey_80, #555555);
+}
+
+.bg-grey_70 {
+  background-color: var(--color-grey_70, #737373);
+}
+
+.bg-grey_65 {
+  background-color: var(--color-grey_65, #888888);
+}
+
+.bg-grey_60 {
+  background-color: var(--color-grey_60, #999999);
+}
+
+.bg-grey_55 {
+  background-color: var(--color-grey_55, #aaaaaa);
+}
+
+.bg-grey_50 {
+  background-color: var(--color-grey_50, #bbbbbb);
+}
+
+.bg-grey_45 {
+  background-color: var(--color-grey_45, #cccccc);
+}
+
+.bg-grey_35 {
+  background-color: var(--color-grey_35, #D8D8D8);
+}
+
+.bg-grey_30 {
+  background-color: var(--color-grey_30, #e1e1e1);
+}
+
+.bg-grey_25 {
+  background-color: var(--color-grey_25, #E5E5E5);
+}
+
+.bg-grey_20 {
+  background-color: var(--color-grey_20, #eeeeee);
+}
+
+.bg-grey_10 {
+  background-color: var(--color-grey_10, #f6f6f6);
+}
+
+.bg-grey_05 {
+  background-color: var(--color-grey_05, #f9f9f9);
+}
+
+.bg-white {
+  background-color: var(--color-white, #ffffff);
+}
+
+.bg-black {
+  background-color: var(--color-black, #000000);
+}
+
+/* === Text Colors === */
+.text-primary {
+  color: var(--color-primary, #051d36);
+}
+
+.text-secondary {
+  color: var(--color-secondary, #555555);
+}
+
+.text-accent {
+  color: var(--color-accent, #9c27b0);
+}
+
+.text-positive {
+  color: var(--color-positive, #0075ff);
+}
+
+.text-negative {
+  color: var(--color-negative, #e30000);
+}
+
+.text-info {
+  color: var(--color-info, #00cd52);
+}
+
+.text-warning {
+  color: var(--color-warning, #f2c037);
+}
+
+.text-red_99 {
+  color: var(--color-red_99, #220000);
+}
+
+.text-red_95 {
+  color: var(--color-red_95, #440000);
+}
+
+.text-red_90 {
+  color: var(--color-red_90, #5E0000);
+}
+
+.text-red_85 {
+  color: var(--color-red_85, #820000);
+}
+
+.text-red_80 {
+  color: var(--color-red_80, #AD0000);
+}
+
+.text-red_75 {
+  color: var(--color-red_75, #E30000);
+}
+
+.text-red_70 {
+  color: var(--color-red_70, #FB4444);
+}
+
+.text-red_60 {
+  color: var(--color-red_60, #FF7C7C);
+}
+
+.text-red_45 {
+  color: var(--color-red_45, #FFB5B5);
+}
+
+.text-red_30 {
+  color: var(--color-red_30, #FFD3D3);
+}
+
+.text-red_20 {
+  color: var(--color-red_20, #FCE6E6);
+}
+
+.text-red_15 {
+  color: var(--color-red_15, #FCEFEF);
+}
+
+.text-caution_bg {
+  color: var(--color-caution_bg, #FEF1F1);
+}
+
+.text-caution_icon {
+  color: var(--color-caution_icon, #fd9595);
+}
+
+.text-orange_99 {
+  color: var(--color-orange_99, #2F1100);
+}
+
+.text-orange_95 {
+  color: var(--color-orange_95, #4D1B00);
+}
+
+.text-orange_90 {
+  color: var(--color-orange_90, #752A00);
+}
+
+.text-orange_85 {
+  color: var(--color-orange_85, #9B3700);
+}
+
+.text-orange_75 {
+  color: var(--color-orange_75, #CE4900);
+}
+
+.text-orange_65 {
+  color: var(--color-orange_65, #FF6B00);
+}
+
+.text-orange_60 {
+  color: var(--color-orange_60, #FF7F22);
+}
+
+.text-orange_55 {
+  color: var(--color-orange_55, #FFA452);
+}
+
+.text-orange_45 {
+  color: var(--color-orange_45, #FFBC81);
+}
+
+.text-orange_35 {
+  color: var(--color-orange_35, #FFD5AF);
+}
+
+.text-orange_20 {
+  color: var(--color-orange_20, #FFEAD7);
+}
+
+.text-orange_10 {
+  color: var(--color-orange_10, #FEF1EA);
+}
+
+.text-header_alert {
+  color: var(--color-header_alert, #FF7A00);
+}
+
+.text-yellow_95 {
+  color: var(--color-yellow_95, #322700);
+}
+
+.text-yellow_90 {
+  color: var(--color-yellow_90, #453702);
+}
+
+.text-yellow_80 {
+  color: var(--color-yellow_80, #6C5602);
+}
+
+.text-yellow_70 {
+  color: var(--color-yellow_70, #9C7A00);
+}
+
+.text-yellow_60 {
+  color: var(--color-yellow_60, #C49900);
+}
+
+.text-yellow_50 {
+  color: var(--color-yellow_50, #EBB800);
+}
+
+.text-yellow_45 {
+  color: var(--color-yellow_45, #FFC700);
+}
+
+.text-yellow_40 {
+  color: var(--color-yellow_40, #FFD643);
+}
+
+.text-yellow_30 {
+  color: var(--color-yellow_30, #FEE17C);
+}
+
+.text-yellow_25 {
+  color: var(--color-yellow_25, #FFE99E);
+}
+
+.text-yellow_20 {
+  color: var(--color-yellow_20, #FEF1C4);
+}
+
+.text-yellow_10 {
+  color: var(--color-yellow_10, #FFF7DD);
+}
+
+.text-olive_95 {
+  color: var(--color-olive_95, #2C2C00);
+}
+
+.text-olive_90 {
+  color: var(--color-olive_90, #454500);
+}
+
+.text-olive_80 {
+  color: var(--color-olive_80, #636300);
+}
+
+.text-olive_70 {
+  color: var(--color-olive_70, #838300);
+}
+
+.text-olive_65 {
+  color: var(--color-olive_65, #A5A500);
+}
+
+.text-olive_55 {
+  color: var(--color-olive_55, #C7C700);
+}
+
+.text-olive_45 {
+  color: var(--color-olive_45, #DDDD12);
+}
+
+.text-olive_30 {
+  color: var(--color-olive_30, #EEEE37);
+}
+
+.text-olive_20 {
+  color: var(--color-olive_20, #F6F65F);
+}
+
+.text-olive_15 {
+  color: var(--color-olive_15, #FAFAA1);
+}
+
+.text-olive_10 {
+  color: var(--color-olive_10, #FBFBBF);
+}
+
+.text-olive_05 {
+  color: var(--color-olive_05, #FEFED9);
+}
+
+.text-green_99 {
+  color: var(--color-green_99, #001D0B);
+}
+
+.text-green_95 {
+  color: var(--color-green_95, #003013);
+}
+
+.text-green_90 {
+  color: var(--color-green_90, #00461C);
+}
+
+.text-green_85 {
+  color: var(--color-green_85, #006629);
+}
+
+.text-green_80 {
+  color: var(--color-green_80, #007B31);
+}
+
+.text-green_75 {
+  color: var(--color-green_75, #00973C);
+}
+
+.text-green_70 {
+  color: var(--color-green_70, #12B553);
+}
+
+.text-green_65 {
+  color: var(--color-green_65, #2BCE6C);
+}
+
+.text-green_55 {
+  color: var(--color-green_55, #6DE39C);
+}
+
+.text-green_45 {
+  color: var(--color-green_45, #ACF4C9);
+}
+
+.text-green_25 {
+  color: var(--color-green_25, #D4FAE3);
+}
+
+.text-green_15 {
+  color: var(--color-green_15, #E8F9EF);
+}
+
+.text-steelblue_99 {
+  color: var(--color-steelblue_99, #021a25);
+}
+
+.text-steelblue_95 {
+  color: var(--color-steelblue_95, #02212f);
+}
+
+.text-steelblue_90 {
+  color: var(--color-steelblue_90, #032d40);
+}
+
+.text-steelblue_85 {
+  color: var(--color-steelblue_85, #033f59);
+}
+
+.text-steelblue_80 {
+  color: var(--color-steelblue_80, #06587d);
+}
+
+.text-steelblue_75 {
+  color: var(--color-steelblue_75, #066d9b);
+}
+
+.text-steelblue_70 {
+  color: var(--color-steelblue_70, #128fc7);
+}
+
+.text-steelblue_65 {
+  color: var(--color-steelblue_65, #229fd7);
+}
+
+.text-steelblue_60 {
+  color: var(--color-steelblue_60, #50bff0);
+}
+
+.text-steelblue_45 {
+  color: var(--color-steelblue_45, #a4e2fd);
+}
+
+.text-steelblue_25 {
+  color: var(--color-steelblue_25, #d9f2fd);
+}
+
+.text-steelblue_10 {
+  color: var(--color-steelblue_10, #ecf8fd);
+}
+
+.text-oceanblue_99 {
+  color: var(--color-oceanblue_99, #011428);
+}
+
+.text-oceanblue_95 {
+  color: var(--color-oceanblue_95, #03172d);
+}
+
+.text-oceanblue_90 {
+  color: var(--color-oceanblue_90, #051d36);
+}
+
+.text-oceanblue_85 {
+  color: var(--color-oceanblue_85, #07284a);
+}
+
+.text-oceanblue_80 {
+  color: var(--color-oceanblue_80, #004177);
+}
+
+.text-oceanblue_75 {
+  color: var(--color-oceanblue_75, #025497);
+}
+
+.text-oceanblue_70 {
+  color: var(--color-oceanblue_70, #006ac1);
+}
+
+.text-oceanblue_65 {
+  color: var(--color-oceanblue_65, #1f8ae1);
+}
+
+.text-oceanblue_60 {
+  color: var(--color-oceanblue_60, #5cb0f3);
+}
+
+.text-oceanblue_50 {
+  color: var(--color-oceanblue_50, #9cd1fc);
+}
+
+.text-oceanblue_25 {
+  color: var(--color-oceanblue_25, #d5ebfe);
+}
+
+.text-oceanblue_15 {
+  color: var(--color-oceanblue_15, #eaf5fe);
+}
+
+.text-brilliantblue_99 {
+  color: var(--color-brilliantblue_99, #001226);
+}
+
+.text-brilliantblue_95 {
+  color: var(--color-brilliantblue_95, #001b39);
+}
+
+.text-brilliantblue_90 {
+  color: var(--color-brilliantblue_90, #002b5e);
+}
+
+.text-brilliantblue_85 {
+  color: var(--color-brilliantblue_85, #004290);
+}
+
+.text-brilliantblue_80 {
+  color: var(--color-brilliantblue_80, #005cc9);
+}
+
+.text-brilliantblue_75 {
+  color: var(--color-brilliantblue_75, #0075ff);
+}
+
+.text-brilliantblue_70 {
+  color: var(--color-brilliantblue_70, #2d8dff);
+}
+
+.text-brilliantblue_60 {
+  color: var(--color-brilliantblue_60, #64abff);
+}
+
+.text-brilliantblue_50 {
+  color: var(--color-brilliantblue_50, #93c4ff);
+}
+
+.text-brilliantblue_40 {
+  color: var(--color-brilliantblue_40, #bbdaff);
+}
+
+.text-brilliantblue_25 {
+  color: var(--color-brilliantblue_25, #d9eaff);
+}
+
+.text-brilliantblue_20 {
+  color: var(--color-brilliantblue_20, #e6f1ff);
+}
+
+.text-brilliantblue_10 {
+  color: var(--color-brilliantblue_10, #eff6ff);
+}
+
+.text-brilliantblue_05 {
+  color: var(--color-brilliantblue_05, #f5faff);
+}
+
+.text-grey_95 {
+  color: var(--color-grey_95, #222222);
+}
+
+.text-grey_90 {
+  color: var(--color-grey_90, #333333);
+}
+
+.text-grey_85 {
+  color: var(--color-grey_85, #444444);
+}
+
+.text-grey_80 {
+  color: var(--color-grey_80, #555555);
+}
+
+.text-grey_70 {
+  color: var(--color-grey_70, #737373);
+}
+
+.text-grey_65 {
+  color: var(--color-grey_65, #888888);
+}
+
+.text-grey_60 {
+  color: var(--color-grey_60, #999999);
+}
+
+.text-grey_55 {
+  color: var(--color-grey_55, #aaaaaa);
+}
+
+.text-grey_50 {
+  color: var(--color-grey_50, #bbbbbb);
+}
+
+.text-grey_45 {
+  color: var(--color-grey_45, #cccccc);
+}
+
+.text-grey_35 {
+  color: var(--color-grey_35, #D8D8D8);
+}
+
+.text-grey_30 {
+  color: var(--color-grey_30, #e1e1e1);
+}
+
+.text-grey_25 {
+  color: var(--color-grey_25, #E5E5E5);
+}
+
+.text-grey_20 {
+  color: var(--color-grey_20, #eeeeee);
+}
+
+.text-grey_10 {
+  color: var(--color-grey_10, #f6f6f6);
+}
+
+.text-grey_05 {
+  color: var(--color-grey_05, #f9f9f9);
+}
+
+.text-white {
+  color: var(--color-white, #ffffff);
+}
+
+.text-black {
+  color: var(--color-black, #000000);
+}
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role=list],
+ol[role=list] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font-size: inherit;
+}
+
+/* Make sure textarea without a rows attribute are not tiny */
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}
+
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  outline: 0;
+}
+button:focus {
+  outline: 0 !important;
+}
+
+:host {
+  display: inline-block;
+  height: fit-content;
+  line-height: 0;
+}
+
+.text-center {
+  text-align: center;
 }
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 600;
-  font-display: swap;
-  src: local("Pretendard-SemiBold"), url("./fonts/Pretendard-SemiBold.subset.woff2") format("font-woff2"), url("./fonts/Pretendard-SemiBold.ttf") format("truetype"); /* Safari, Android, iOS */
+
+.text-right {
+  text-align: right;
 }
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 500;
-  font-display: swap;
-  src: local("Pretendard-Medium"), url("./fonts/Pretendard-Medium.subset.woff2") format("font-woff2"), url("./fonts/Pretendard-Medium.ttf") format("truetype"); /* Safari, Android, iOS */
+
+.text-left {
+  text-align: left;
 }
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 400;
-  font-display: swap;
-  src: local("Pretendard-Regular"), url("./fonts/Pretendard-Regular.subset.woff2") format("font-woff2"), url("./fonts/Pretendard-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
+
+input[type=text],
+input[type=number],
+input[type=password],
+input[type=email],
+input[type=tel],
+textarea {
+  padding-block: 0px;
+  padding-inline: 0px;
+}
+
+.sd-hoverable:hover > .sd-focus-helper {
+  background: currentColor;
+  opacity: 0.15;
 }
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 300;
-  font-display: swap;
-  src: local("Pretendard-Light"), url("./fonts/Pretendard-Light.subset.woff2") format("font-woff2"), url("./fonts/Pretendard-Light.ttf") format("truetype"); /* Safari, Android, iOS */
+.sd-hoverable:hover > .sd-focus-helper:before {
+  opacity: 0.1;
 }
-:root {
-  --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+.sd-hoverable:hover > .sd-focus-helper:after {
+  opacity: 0.4;
 }
 
-html {
-  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+.sd-focus-helper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  opacity: 0;
+  transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+.sd-focus-helper:before, .sd-focus-helper:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border-radius: inherit;
+  transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+.sd-focus-helper:before {
+  background: #000000;
+}
+.sd-focus-helper:after {
+  background: #ffffff;
+}
+
+.sd-tooltip-menu {
+  width: fit-content;
+  padding: 8px 16px;
+  border-radius: 4px;
+  color: white;
+  background: #07284a;
+  font-size: 12px;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  gap: 12px;
+}
+.sd-tooltip-menu--with-close {
+  padding-right: 12px !important;
+}
+.sd-tooltip-menu__arrow {
+  position: absolute;
+  display: flex;
+  width: 9.6px;
+  height: 7.2px;
+}
+.sd-tooltip-menu__arrow svg {
+  width: 100%;
+  height: 100%;
+}
+.sd-tooltip-menu__arrow--top {
+  bottom: -7.2px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.sd-tooltip-menu__arrow--bottom {
+  top: -7.2px;
+  left: 50%;
+  transform: translateX(-50%) rotate(180deg);
+}
+.sd-tooltip-menu__arrow--left {
+  right: -7.2px;
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
+}
+.sd-tooltip-menu__arrow--right {
+  left: -7.2px;
+  top: 50%;
+  transform: translateY(-50%) rotate(90deg);
+}
+.sd-tooltip-menu__content {
+  line-height: 20px;
+  font-weight: 500;
+}
+.sd-tooltip-menu__close-button {
+  padding-top: 4px;
+  display: flex;
+}
+.sd-tooltip-menu__close-button button {
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.sd-popover-menu {
+  width: fit-content;
+  padding: 12px 20px;
+  border-radius: 4px;
+  color: white;
+  background: #07284a;
+  font-size: 12px;
+  position: relative;
+  box-sizing: border-box;
+}
+.sd-popover-menu__arrow {
+  position: absolute;
+  display: flex;
+  width: 9.6px;
+  height: 7.2px;
+}
+.sd-popover-menu__arrow svg {
+  width: 100%;
+  height: 100%;
+}
+.sd-popover-menu__arrow--top {
+  bottom: -7.2px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.sd-popover-menu__arrow--bottom {
+  top: -7.2px;
+  left: 50%;
+  transform: translateX(-50%) rotate(180deg);
+}
+.sd-popover-menu__arrow--left {
+  right: -7.2px;
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
+}
+.sd-popover-menu__arrow--right {
+  left: -7.2px;
+  top: 50%;
+  transform: translateY(-50%) rotate(90deg);
+}
+.sd-popover-menu__content {
+  font-size: 12px;
+  line-height: 20px;
+}
+.sd-popover-menu__content .sd-popover-menu__title {
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+.sd-popover-menu__content .sd-popover-menu__messages {
+  font-weight: 500;
+}
+.sd-popover-menu__content .sd-popover-menu__buttons {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.sd-popover-menu__content .sd-popover-menu__buttons--1 {
+  justify-content: flex-end;
+}
+.sd-popover-menu__content .sd-popover-menu__buttons--2 {
+  justify-content: space-between;
+}
+.sd-popover-menu__close-button {
+  position: absolute;
+  top: 16px;
+  right: 12px;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
 }
 
 /* === Background Colors === */
@@ -1360,12 +2617,147 @@ textarea {
   cursor: pointer;
 }
 
-.sd-guide :deep(.sd-button) {
+.sd-button {
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease-in-out;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.sd-button--xs {
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  min-height: 24px;
+}
+.sd-button--sm {
+  padding: 0 12px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  min-height: 28px;
+}
+.sd-button--md {
+  padding: 0 20px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 26px;
+  min-height: 34px;
+}
+.sd-button--lg {
+  padding: 0 28px;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 30px;
+  min-height: 62px;
+}
+.sd-button--primary {
+  background-color: var(--button-color);
+  color: white;
+  transition: filter 0.2s ease;
+}
+.sd-button--primary::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: #000000;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 0;
+}
+.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {
+  opacity: 0.25;
+}
+.sd-button--outline {
+  background: white;
+  border: 1px solid var(--button-color);
+  color: var(--button-color);
+}
+.sd-button--outline::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--button-color);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 0;
+}
+.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {
+  opacity: 0.15;
+}
+.sd-button--outline .sd-button__content {
+  position: relative;
+  z-index: 1;
+}
+.sd-button--ghost {
+  background-color: transparent;
+  color: var(--button-color);
+  border-color: transparent;
+}
+.sd-button--ghost::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--button-color);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 0;
+}
+.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {
+  opacity: 0.15;
+}
+.sd-button--ghost .sd-button__content {
+  position: relative;
+  z-index: 1;
+}
+.sd-button--disabled {
+  border: 1px solid #cccccc;
+  background: #e1e1e1;
+  color: #888888;
+  cursor: not-allowed !important;
+}
+.sd-button--icon-only {
+  padding: 0;
+  width: fit-content;
+  height: fit-content;
+  aspect-ratio: 1/1;
+}
+.sd-button--no-hover:hover::before {
+  opacity: 0 !important;
+}
+.sd-button .sd-button__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  z-index: 1;
+  font-weight: 500;
+}
+
+.sd-guide {
+  display: inline-block;
+}
+.sd-guide .sd-button {
   padding: 0 16px 0 12px;
   border-radius: 16px;
+  color: #333333 !important;
+  display: flex;
+  align-items: center;
 }
-.sd-guide :deep(.sd-button) .sd-button__content .sd-button__label {
-  color: #333333;
+.sd-guide .sd-button .sd-button__content {
+  color: #333333 !important;
+}
+.sd-guide .sd-button .sd-button__content .sd-button__label {
+  color: #333333 !important;
 }
 
 .sd-guide__popup {