.bg-surface { background-color: hsl(230, 0%, 97%); color: hsl(0, 0%, 0%); }
.bg-background { background-color: hsl(230, 0%, 100%); color: hsl(0, 0%, 0%); }
.bg-on-background { background-color: hsl(0, 0%, 0%); }
.text-on-background { color: hsl(0, 0%, 0%); }
.line-on-background { border-color: hsl(0, 0%, 0%); }
.bg-primary-sf { background-color: hsl(220, 60%, 97%); color: hsl(0, 0%, 0%); }
.bg-primary-lt { background-color: hsl(220, 60%, 94%); color: hsl(0, 0%, 0%); }
.bg-primary-md { background-color: hsl(220, 80%, 50%); color: hsl(0, 0%, 100%); }
.bg-primary-dk { background-color: hsl(220, 60%, 15%); color: hsl(0, 0%, 100%); }
.text-primary { color: hsl(220, 80%, 50%); }
.border-primary-lt { border-color: hsl(220, 60%, 94%); }
.border-primary-md { border-color: hsl(220, 80%, 50%); }
.border-primary-dk { border-color: hsl(220, 60%, 15%); }
.bg-secondary-sf { background-color: hsl(174, 70%, 97%); color: hsl(0, 0%, 0%); }
.bg-secondary-lt { background-color: hsl(174, 70%, 88%); color: hsl(0, 0%, 0%); }
.bg-secondary-md { background-color: hsl(174, 90%, 43%); color: hsl(0, 0%, 100%); }
.bg-secondary-dk { background-color: hsl(174, 70%, 8%); color: hsl(0, 0%, 100%); }
.text-secondary { color: hsl(174, 90%, 43%); }
.border-secondary-lt { border-color: hsl(174, 70%, 88%); }
.border-secondary-md { border-color: hsl(174, 90%, 43%); }
.border-secondary-dk { border-color: hsl(174, 70%, 8%); }
[data-key="title"] { font-family: '에스코어드림 7ExtraBold', sans-serif; }
[data-key="subtitle"] { font-family: '에스코어드림 6Bold', sans-serif; }
.qd { font-family: '에스코어드림 4Regular', sans-serif; }
:root { --color-background: hsl(230, 0%, 100%);
--color-on-background: hsl(0, 0%, 0%);
--color-surface: hsl(230, 0%, 97%);
--color-on-surface: hsl(0, 0%, 0%);
--color-primary-md: hsl(220, 80%, 50%);
--color-on-primary-md: hsl(0, 0%, 100%);
--color-primary-lt: hsl(220, 60%, 94%);
--color-on-primary-lt: hsl(0, 0%, 0%);
--color-primary-dk: hsl(220, 60%, 15%);
--color-on-primary-dk: hsl(0, 0%, 100%);
--color-primary-sf: hsl(220, 60%, 97%);
--color-on-primary-sf: hsl(0, 0%, 0%);
--color-secondary-md: hsl(174, 90%, 43%);
--color-on-secondary-md: hsl(0, 0%, 100%);
--color-secondary-lt: hsl(174, 70%, 88%);
--color-on-secondary-lt: hsl(0, 0%, 0%);
--color-secondary-dk: hsl(174, 70%, 8%);
--color-on-secondary-dk: hsl(0, 0%, 100%);
--color-secondary-sf: hsl(174, 70%, 97%);
--color-on-secondary-sf: hsl(0, 0%, 0%); }