:root { /* gray(light) */ --light-gray00: #ffffff; --light-gray05: #fbfbfb; --light-gray10: #f6f6f8; --light-gray15: #ededf0; --light-gray20: #e5e5ea; --light-gray30: #dddee4; --light-gray40: #d5d6dd; --light-gray50: #c2c3cd; --light-gray60: #adaeb8; --light-gray70: #888893; --light-gray80: #66666e; --light-gray90: #4a494f; --light-gray100: #333236; /* gray(dark) */ --dark-gray00: #181b28; --dark-gray05: #1e212d; --dark-gray10: #242735; --dark-gray15: #272b3a; --dark-gray20: #2e3243; --dark-gray30: #393e50; --dark-gray40: #454b5f; --dark-gray50: #646a7d; --dark-gray60: #999cac; --dark-gray70: #bbbdc9; --dark-gray80: #d3d4dd; --dark-gray90: #eeeef1; --dark-gray100: #f7f7f8; /* gray */ --gray00: var(--light-gray00); --gray05: var(--light-gray05); --gray10: var(--light-gray10); --gray15: var(--light-gray15); --gray20: var(--light-gray20); --gray30: var(--light-gray30); --gray40: var(--light-gray40); --gray50: var(--light-gray50); --gray60: var(--light-gray60); --gray70: var(--light-gray70); --gray80: var(--light-gray80); --gray90: var(--light-gray90); --gray100: var(--light-gray100); /* purple(light) */ --light-purple00: #fbf5ff; --light-purple05: #f8ecff; --light-purple10: #e9ccff; --light-purple15: #d4a4f9; --light-purple20: #cd96f8; --light-purple30: #c47cfd; --light-purple40: #b363fd; --light-purple50: #a64eff; --light-purple60: #9933ff; --light-purple70: #8f00ff; --light-purple80: #760dde; --light-purple90: #6500c2; --light-purple100: #54009e; /* purple(dark) */ --dark-purple00: #fbf5ff; --dark-purple05: #f8ecff; --dark-purple10: #e9ccff; --dark-purple15: #d4a4f9; --dark-purple20: #cd96f8; --dark-purple30: #c47cfd; --dark-purple40: #b363fd; --dark-purple50: #a64eff; --dark-purple60: #9933ff; --dark-purple70: #8f00ff; --dark-purple80: #760dde; --dark-purple90: #6500c2; --dark-purple100: #54009e; /* purple */ --purple00: var(--light-purple00); --purple05: var(--light-purple05); --purple10: var(--light-purple10); --purple15: var(--light-purple15); --purple20: var(--light-purple20); --purple30: var(--light-purple30); --purple40: var(--light-purple40); --purple50: var(--light-purple50); --purple60: var(--light-purple60); --purple70: var(--light-purple70); --purple80: var(--light-purple80); --purple90: var(--light-purple90); --purple100: var(--light-purple100); /* blue(light) */ --light-blue00: #ebf3ff; --light-blue05: #e0eeff; --light-blue10: #d0e5ff; --light-blue15: #bdddff; --light-blue20: #a6d1ff; --light-blue30: #85c2ff; --light-blue40: #4da6fe; --light-blue50: #1790ff; --light-blue60: #0674f4; --light-blue70: #0056d8; --light-blue80: #004bbd; --light-blue90: #00369e; --light-blue100: #003078; /* blue(dark) */ --dark-blue00: #003078; --dark-blue05: #00369e; --dark-blue10: #004bbd; --dark-blue15: #0056d8; --dark-blue20: #0674f4; --dark-blue30: #1a90fc; --dark-blue40: #4da6fe; --dark-blue50: #85c2ff; --dark-blue60: #a6d1ff; --dark-blue70: #bdddff; --dark-blue80: #d0e5ff; --dark-blue90: #e0eeff; --dark-blue100: #ebf3ff; /* blue */ --blue00: var(--light-blue00); --blue05: var(--light-blue05); --blue10: var(--light-blue10); --blue15: var(--light-blue15); --blue20: var(--light-blue20); --blue30: var(--light-blue30); --blue40: var(--light-blue40); --blue50: var(--light-blue50); --blue60: var(--light-blue60); --blue70: var(--light-blue70); --blue80: var(--light-blue80); --blue90: var(--light-blue90); --blue100: var(--light-blue100); /* pink(light) */ --light-pink00: #ffebf7; --light-pink05: #ffe0f3; --light-pink10: #ffd0ec; --light-pink15: #ffbde4; --light-pink20: #ffa6db; --light-pink30: #ff85ce; --light-pink40: #ff52b7; --light-pink50: #ff1ca5; --light-pink60: #eb008d; --light-pink70: #ce0075; --light-pink80: #af0462; --light-pink90: #920156; --light-pink100: #72004b; /* pink(dark) */ --dark-pink00: #72004b; --dark-pink05: #920156; --dark-pink10: #af0462; --dark-pink15: #ce0075; --dark-pink20: #eb008d; --dark-pink30: #ff1ca5; --dark-pink40: #ff52b7; --dark-pink50: #ff85ce; --dark-pink60: #ffa6db; --dark-pink70: #ffbde4; --dark-pink80: #ffd0ec; --dark-pink90: #ffe0f3; --dark-pink100: #ffebf7; /* pink */ --pink00: var(--light-pink00); --pink05: var(--light-pink05); --pink10: var(--light-pink10); --pink15: var(--light-pink15); --pink20: var(--light-pink20); --pink30: var(--light-pink30); --pink40: var(--light-pink40); --pink50: var(--light-pink50); --pink60: var(--light-pink60); --pink70: var(--light-pink70); --pink80: var(--light-pink80); --pink90: var(--light-pink90); --pink100: var(--light-pink100); /* yellow(light) */ --light-yellow00: #fff7e5; --light-yellow05: #fff2b2; --light-yellow10: #ffe878; --light-yellow15: #ffe057; --light-yellow20: #ffd52e; --light-yellow30: #ffcb02; --light-yellow40: #ffc002; --light-yellow50: #ffb200; --light-yellow60: #ffa10a; --light-yellow70: #ff9100; --light-yellow80: #f07c00; --light-yellow90: #d66000; --light-yellow100: #a34900; /* yellow(dark) */ --dark-yellow00: #a34900; --dark-yellow05: #d66000; --dark-yellow10: #f07c00; --dark-yellow15: #ff9100; --dark-yellow20: #ffa10a; --dark-yellow30: #ffb200; --dark-yellow40: #ffc002; --dark-yellow50: #ffcb02; --dark-yellow60: #ffd52e; --dark-yellow70: #ffe057; --dark-yellow80: #ffe878; --dark-yellow90: #fff2b2; --dark-yellow100: #fff7e5; /* yellow */ --yellow00: var(--light-yellow00); --yellow05: var(--light-yellow05); --yellow10: var(--light-yellow10); --yellow15: var(--light-yellow15); --yellow20: var(--light-yellow20); --yellow30: var(--light-yellow30); --yellow40: var(--light-yellow40); --yellow50: var(--light-yellow50); --yellow60: var(--light-yellow60); --yellow70: var(--light-yellow70); --yellow80: var(--light-yellow80); --yellow90: var(--light-yellow90); --yellow100: var(--light-yellow100); /* green(light) */ --light-green00: #ebffeb; --light-green05: #d9ffdb; --light-green10: #b0fdb3; --light-green15: #9bf59f; --light-green20: #80f188; --light-green30: #68ec75; --light-green40: #59da6b; --light-green50: #3ccc4b; --light-green60: #00be2f; --light-green70: #07ac30; --light-green80: #039127; --light-green90: #03731f; --light-green100: #025918; /* green(dark) */ --dark-green00: #025918; --dark-green05: #03731f; --dark-green10: #039127; --dark-green15: #07ac30; --dark-green20: #00be2f; --dark-green30: #3ccc4b; --dark-green40: #59da6b; --dark-green50: #68ec75; --dark-green60: #80f188; --dark-green70: #9bf59f; --dark-green80: #b0fdb3; --dark-green90: #cdfed0; --dark-green100: #ebffeb; /* green */ --green00: var(--light-green00); --green05: var(--light-green05); --green10: var(--light-green10); --green15: var(--light-green15); --green20: var(--light-green20); --green30: var(--light-green30); --green40: var(--light-green40); --green50: var(--light-green50); --green60: var(--light-green60); --green70: var(--light-green70); --green80: var(--light-green80); --green90: var(--light-green90); --green100: var(--light-green100); /* transparency gray00 (light) */ --light-gray00-code: 255 255 255; --transparency-gray-00-opacity-00: rgb(var(--light-gray00-code) / 0%); --transparency-gray-00-opacity-05: rgb(var(--light-gray00-code) / 5%); --transparency-gray-00-opacity-10: rgb(var(--light-gray00-code) / 10%); --transparency-gray-00-opacity-15: rgb(var(--light-gray00-code) / 15%); --transparency-gray-00-opacity-20: rgb(var(--light-gray00-code) / 20%); --transparency-gray-00-opacity-30: rgb(var(--light-gray00-code) / 30%); --transparency-gray-00-opacity-40: rgb(var(--light-gray00-code) / 40%); --transparency-gray-00-opacity-50: rgb(var(--light-gray00-code) / 50%); --transparency-gray-00-opacity-60: rgb(var(--light-gray00-code) / 60%); --transparency-gray-00-opacity-70: rgb(var(--light-gray00-code) / 70%); --transparency-gray-00-opacity-80: rgb(var(--light-gray00-code) / 80%); --transparency-gray-00-opacity-90: rgb(var(--light-gray00-code) / 90%); --transparency-gray-00-opacity-100: rgb(var(--light-gray00-code) / 100%); /* transparency gray100 (light) */ --light-gray100-code: 51 50 54; --transparency-gray-100-opacity-00: rgb(var(--light-gray100-code) / 0%); --transparency-gray-100-opacity-05: rgb(var(--light-gray100-code) / 5%); --transparency-gray-100-opacity-10: rgb(var(--light-gray100-code) / 10%); --transparency-gray-100-opacity-15: rgb(var(--light-gray100-code) / 15%); --transparency-gray-100-opacity-20: rgb(var(--light-gray100-code) / 20%); --transparency-gray-100-opacity-30: rgb(var(--light-gray100-code) / 30%); --transparency-gray-100-opacity-40: rgb(var(--light-gray100-code) / 40%); --transparency-gray-100-opacity-50: rgb(var(--light-gray100-code) / 50%); --transparency-gray-100-opacity-60: rgb(var(--light-gray100-code) / 60%); --transparency-gray-100-opacity-70: rgb(var(--light-gray100-code) / 70%); --transparency-gray-100-opacity-80: rgb(var(--light-gray100-code) / 80%); --transparency-gray-100-opacity-90: rgb(var(--light-gray100-code) / 90%); --transparency-gray-100-opacity-100: rgb(var(--light-gray100-code) / 100%); /* transparency purple (light) */ --light-purple60-code: 153 51 255; /* #9933ff */ --transparency-purple-opacity-00: rgb(var(--light-purple60-code) / 0%); --transparency-purple-opacity-05: rgb(var(--light-purple60-code) / 5%); --transparency-purple-opacity-10: rgb(var(--light-purple60-code) / 10%); --transparency-purple-opacity-15: rgb(var(--light-purple60-code) / 15%); --transparency-purple-opacity-20: rgb(var(--light-purple60-code) / 20%); --transparency-purple-opacity-30: rgb(var(--light-purple60-code) / 30%); --transparency-purple-opacity-40: rgb(var(--light-purple60-code) / 40%); --transparency-purple-opacity-50: rgb(var(--light-purple60-code) / 50%); --transparency-purple-opacity-60: rgb(var(--light-purple60-code) / 60%); --transparency-purple-opacity-70: rgb(var(--light-purple60-code) / 70%); --transparency-purple-opacity-80: rgb(var(--light-purple60-code) / 80%); --transparency-purple-opacity-90: rgb(var(--light-purple60-code) / 90%); /* mint(deprecated) */ --mint00: #f9fafb; --mint10: #dfeff1; --mint20: #adf0ea; --mint30: #82e8df; --mint40: #2dd9ca; --mint50: #24c4c7; --mint60: #20a7b1; --mint70: #188ba7; /* error */ --error: #d6173a; } [data-theme='DARK'] { /* gray */ --gray100: var(--dark-gray100); --gray90: var(--dark-gray90); --gray80: var(--dark-gray80); --gray70: var(--dark-gray70); --gray60: var(--dark-gray60); --gray50: var(--dark-gray50); --gray40: var(--dark-gray40); --gray30: var(--dark-gray30); --gray20: var(--dark-gray20); --gray15: var(--dark-gray15); --gray10: var(--dark-gray10); --gray05: var(--dark-gray05); --gray00: var(--dark-gray00); /* purple */ --purple00: var(--dark-purple00); --purple05: var(--dark-purple05); --purple10: var(--dark-purple10); --purple15: var(--dark-purple15); --purple20: var(--dark-purple20); --purple30: var(--dark-purple30); --purple40: var(--dark-purple40); --purple50: var(--dark-purple50); --purple60: var(--dark-purple60); --purple70: var(--dark-purple70); --purple80: var(--dark-purple80); --purple90: var(--dark-purple90); --purple100: var(--dark-purple100); /* blue */ --blue100: var(--dark-blue100); --blue90: var(--dark-blue90); --blue80: var(--dark-blue80); --blue70: var(--dark-blue70); --blue60: var(--dark-blue60); --blue50: var(--dark-blue50); --blue40: var(--dark-blue40); --blue30: var(--dark-blue30); --blue20: var(--dark-blue20); --blue15: var(--dark-blue15); --blue10: var(--dark-blue10); --blue05: var(--dark-blue05); --blue00: var(--dark-blue00); /* pink */ --pink100: var(--dark-pink100); --pink90: var(--dark-pink90); --pink80: var(--dark-pink80); --pink70: var(--dark-pink70); --pink60: var(--dark-pink60); --pink50: var(--dark-pink50); --pink40: var(--dark-pink40); --pink30: var(--dark-pink30); --pink20: var(--dark-pink20); --pink15: var(--dark-pink15); --pink10: var(--dark-pink10); --pink05: var(--dark-pink05); --pink00: var(--dark-pink00); /* yellow */ --yellow00: var(--dark-yellow00); --yellow05: var(--dark-yellow05); --yellow10: var(--dark-yellow10); --yellow15: var(--dark-yellow15); --yellow20: var(--dark-yellow20); --yellow30: var(--dark-yellow30); --yellow40: var(--dark-yellow40); --yellow50: var(--dark-yellow50); --yellow60: var(--dark-yellow60); --yellow70: var(--dark-yellow70); --yellow80: var(--dark-yellow80); --yellow90: var(--dark-yellow90); --yellow100: var(--dark-yellow100); /* green */ --green00: var(--dark-green00); --green05: var(--dark-green05); --green10: var(--dark-green10); --green15: var(--dark-green15); --green20: var(--dark-green20); --green30: var(--dark-green30); --green40: var(--dark-green40); --green50: var(--dark-green50); --green60: var(--dark-green60); --green70: var(--dark-green70); --green80: var(--dark-green80); --green90: var(--dark-green90); --green100: var(--dark-green100); /* transparency gray00 (dark) */ --dark-gray00-code: 24 27 40; --transparency-gray-00-opacity-00: rgb(var(--dark-gray00-code) / 0%); --transparency-gray-00-opacity-05: rgb(var(--dark-gray00-code) / 5%); --transparency-gray-00-opacity-10: rgb(var(--dark-gray00-code) / 10%); --transparency-gray-00-opacity-15: rgb(var(--dark-gray00-code) / 15%); --transparency-gray-00-opacity-20: rgb(var(--dark-gray00-code) / 20%); --transparency-gray-00-opacity-30: rgb(var(--dark-gray00-code) / 30%); --transparency-gray-00-opacity-40: rgb(var(--dark-gray00-code) / 40%); --transparency-gray-00-opacity-50: rgb(var(--dark-gray00-code) / 50%); --transparency-gray-00-opacity-60: rgb(var(--dark-gray00-code) / 60%); --transparency-gray-00-opacity-70: rgb(var(--dark-gray00-code) / 70%); --transparency-gray-00-opacity-80: rgb(var(--dark-gray00-code) / 80%); --transparency-gray-00-opacity-90: rgb(var(--dark-gray00-code) / 90%); --transparency-gray-00-opacity-100: rgb(var(--dark-gray00-code) / 100%); /* transparency gray100 (dark) */ --dark-gray100-code: 247 247 248; --transparency-gray-100-opacity-00: rgb(var(--dark-gray100-code) / 0%); --transparency-gray-100-opacity-05: rgb(var(--dark-gray100-code) / 5%); --transparency-gray-100-opacity-10: rgb(var(--dark-gray100-code) / 10%); --transparency-gray-100-opacity-15: rgb(var(--dark-gray100-code) / 15%); --transparency-gray-100-opacity-20: rgb(var(--dark-gray100-code) / 20%); --transparency-gray-100-opacity-30: rgb(var(--dark-gray100-code) / 30%); --transparency-gray-100-opacity-40: rgb(var(--dark-gray100-code) / 40%); --transparency-gray-100-opacity-50: rgb(var(--dark-gray100-code) / 50%); --transparency-gray-100-opacity-60: rgb(var(--dark-gray100-code) / 60%); --transparency-gray-100-opacity-70: rgb(var(--dark-gray100-code) / 70%); --transparency-gray-100-opacity-80: rgb(var(--dark-gray100-code) / 80%); --transparency-gray-100-opacity-90: rgb(var(--dark-gray100-code) / 90%); --transparency-gray-100-opacity-100: rgb(var(--dark-gray100-code) / 100%); /* transparency purple (light) */ --dark-purple60-code: 153 51 255; --transparency-purple-opacity-00: rgb(var(--dark-purple60-code) / 0%); --transparency-purple-opacity-05: rgb(var(--dark-purple60-code) / 5%); --transparency-purple-opacity-10: rgb(var(--dark-purple60-code) / 10%); --transparency-purple-opacity-15: rgb(var(--dark-purple60-code) / 15%); --transparency-purple-opacity-40: rgb(var(--dark-purple60-code) / 40%); --transparency-purple-opacity-60: rgb(var(--dark-purple60-code) / 60%); } :root { /* gray(light) */ --light-gray00: #ffffff; --light-gray05: #fbfbfb; --light-gray10: #f6f6f8; --light-gray15: #ededf0; --light-gray20: #e5e5ea; --light-gray30: #dddee4; --light-gray40: #d5d6dd; --light-gray50: #c2c3cd; --light-gray60: #adaeb8; --light-gray70: #888893; --light-gray80: #66666e; --light-gray90: #4a494f; --light-gray100: #333236; /* gray(dark) */ --dark-gray00: #181b28; --dark-gray05: #1e212d; --dark-gray10: #242735; --dark-gray15: #272b3a; --dark-gray20: #2e3243; --dark-gray30: #393e50; --dark-gray40: #454b5f; --dark-gray50: #646a7d; --dark-gray60: #999cac; --dark-gray70: #bbbdc9; --dark-gray80: #d3d4dd; --dark-gray90: #eeeef1; --dark-gray100: #f7f7f8; /* gray */ --gray00: var(--light-gray00); --gray05: var(--light-gray05); --gray10: var(--light-gray10); --gray15: var(--light-gray15); --gray20: var(--light-gray20); --gray30: var(--light-gray30); --gray40: var(--light-gray40); --gray50: var(--light-gray50); --gray60: var(--light-gray60); --gray70: var(--light-gray70); --gray80: var(--light-gray80); --gray90: var(--light-gray90); --gray100: var(--light-gray100); /* purple(light) */ --light-purple00: #fbf5ff; --light-purple05: #f8ecff; --light-purple10: #e9ccff; --light-purple15: #d4a4f9; --light-purple20: #cd96f8; --light-purple30: #c47cfd; --light-purple40: #b363fd; --light-purple50: #a64eff; --light-purple60: #9933ff; --light-purple70: #8f00ff; --light-purple80: #760dde; --light-purple90: #6500c2; --light-purple100: #54009e; /* purple(dark) */ --dark-purple00: #fbf5ff; --dark-purple05: #f8ecff; --dark-purple10: #e9ccff; --dark-purple15: #d4a4f9; --dark-purple20: #cd96f8; --dark-purple30: #c47cfd; --dark-purple40: #b363fd; --dark-purple50: #a64eff; --dark-purple60: #9933ff; --dark-purple70: #8f00ff; --dark-purple80: #760dde; --dark-purple90: #6500c2; --dark-purple100: #54009e; /* purple */ --purple00: var(--light-purple00); --purple05: var(--light-purple05); --purple10: var(--light-purple10); --purple15: var(--light-purple15); --purple20: var(--light-purple20); --purple30: var(--light-purple30); --purple40: var(--light-purple40); --purple50: var(--light-purple50); --purple60: var(--light-purple60); --purple70: var(--light-purple70); --purple80: var(--light-purple80); --purple90: var(--light-purple90); --purple100: var(--light-purple100); /* blue(light) */ --light-blue00: #ebf3ff; --light-blue05: #e0eeff; --light-blue10: #d0e5ff; --light-blue15: #bdddff; --light-blue20: #a6d1ff; --light-blue30: #85c2ff; --light-blue40: #4da6fe; --light-blue50: #1790ff; --light-blue60: #0674f4; --light-blue70: #0056d8; --light-blue80: #004bbd; --light-blue90: #00369e; --light-blue100: #003078; /* blue(dark) */ --dark-blue00: #003078; --dark-blue05: #00369e; --dark-blue10: #004bbd; --dark-blue15: #0056d8; --dark-blue20: #0674f4; --dark-blue30: #1a90fc; --dark-blue40: #4da6fe; --dark-blue50: #85c2ff; --dark-blue60: #a6d1ff; --dark-blue70: #bdddff; --dark-blue80: #d0e5ff; --dark-blue90: #e0eeff; --dark-blue100: #ebf3ff; /* blue */ --blue00: var(--light-blue00); --blue05: var(--light-blue05); --blue10: var(--light-blue10); --blue15: var(--light-blue15); --blue20: var(--light-blue20); --blue30: var(--light-blue30); --blue40: var(--light-blue40); --blue50: var(--light-blue50); --blue60: var(--light-blue60); --blue70: var(--light-blue70); --blue80: var(--light-blue80); --blue90: var(--light-blue90); --blue100: var(--light-blue100); /* pink(light) */ --light-pink00: #ffebf7; --light-pink05: #ffe0f3; --light-pink10: #ffd0ec; --light-pink15: #ffbde4; --light-pink20: #ffa6db; --light-pink30: #ff85ce; --light-pink40: #ff52b7; --light-pink50: #ff1ca5; --light-pink60: #eb008d; --light-pink70: #ce0075; --light-pink80: #af0462; --light-pink90: #920156; --light-pink100: #72004b; /* pink(dark) */ --dark-pink00: #72004b; --dark-pink05: #920156; --dark-pink10: #af0462; --dark-pink15: #ce0075; --dark-pink20: #eb008d; --dark-pink30: #ff1ca5; --dark-pink40: #ff52b7; --dark-pink50: #ff85ce; --dark-pink60: #ffa6db; --dark-pink70: #ffbde4; --dark-pink80: #ffd0ec; --dark-pink90: #ffe0f3; --dark-pink100: #ffebf7; /* pink */ --pink00: var(--light-pink00); --pink05: var(--light-pink05); --pink10: var(--light-pink10); --pink15: var(--light-pink15); --pink20: var(--light-pink20); --pink30: var(--light-pink30); --pink40: var(--light-pink40); --pink50: var(--light-pink50); --pink60: var(--light-pink60); --pink70: var(--light-pink70); --pink80: var(--light-pink80); --pink90: var(--light-pink90); --pink100: var(--light-pink100); /* yellow(light) */ --light-yellow00: #fff7e5; --light-yellow05: #fff2b2; --light-yellow10: #ffe878; --light-yellow15: #ffe057; --light-yellow20: #ffd52e; --light-yellow30: #ffcb02; --light-yellow40: #ffc002; --light-yellow50: #ffb200; --light-yellow60: #ffa10a; --light-yellow70: #ff9100; --light-yellow80: #f07c00; --light-yellow90: #d66000; --light-yellow100: #a34900; /* yellow(dark) */ --dark-yellow00: #a34900; --dark-yellow05: #d66000; --dark-yellow10: #f07c00; --dark-yellow15: #ff9100; --dark-yellow20: #ffa10a; --dark-yellow30: #ffb200; --dark-yellow40: #ffc002; --dark-yellow50: #ffcb02; --dark-yellow60: #ffd52e; --dark-yellow70: #ffe057; --dark-yellow80: #ffe878; --dark-yellow90: #fff2b2; --dark-yellow100: #fff7e5; /* yellow */ --yellow00: var(--light-yellow00); --yellow05: var(--light-yellow05); --yellow10: var(--light-yellow10); --yellow15: var(--light-yellow15); --yellow20: var(--light-yellow20); --yellow30: var(--light-yellow30); --yellow40: var(--light-yellow40); --yellow50: var(--light-yellow50); --yellow60: var(--light-yellow60); --yellow70: var(--light-yellow70); --yellow80: var(--light-yellow80); --yellow90: var(--light-yellow90); --yellow100: var(--light-yellow100); /* green(light) */ --light-green00: #ebffeb; --light-green05: #d9ffdb; --light-green10: #b0fdb3; --light-green15: #9bf59f; --light-green20: #80f188; --light-green30: #68ec75; --light-green40: #59da6b; --light-green50: #3ccc4b; --light-green60: #00be2f; --light-green70: #07ac30; --light-green80: #039127; --light-green90: #03731f; --light-green100: #025918; /* green(dark) */ --dark-green00: #025918; --dark-green05: #03731f; --dark-green10: #039127; --dark-green15: #07ac30; --dark-green20: #00be2f; --dark-green30: #3ccc4b; --dark-green40: #59da6b; --dark-green50: #68ec75; --dark-green60: #80f188; --dark-green70: #9bf59f; --dark-green80: #b0fdb3; --dark-green90: #cdfed0; --dark-green100: #ebffeb; /* green */ --green00: var(--light-green00); --green05: var(--light-green05); --green10: var(--light-green10); --green15: var(--light-green15); --green20: var(--light-green20); --green30: var(--light-green30); --green40: var(--light-green40); --green50: var(--light-green50); --green60: var(--light-green60); --green70: var(--light-green70); --green80: var(--light-green80); --green90: var(--light-green90); --green100: var(--light-green100); /* transparency gray00 (light) */ --light-gray00-code: 255 255 255; --transparency-gray-00-opacity-00: rgb(var(--light-gray00-code) / 0%); --transparency-gray-00-opacity-05: rgb(var(--light-gray00-code) / 5%); --transparency-gray-00-opacity-10: rgb(var(--light-gray00-code) / 10%); --transparency-gray-00-opacity-15: rgb(var(--light-gray00-code) / 15%); --transparency-gray-00-opacity-20: rgb(var(--light-gray00-code) / 20%); --transparency-gray-00-opacity-30: rgb(var(--light-gray00-code) / 30%); --transparency-gray-00-opacity-40: rgb(var(--light-gray00-code) / 40%); --transparency-gray-00-opacity-50: rgb(var(--light-gray00-code) / 50%); --transparency-gray-00-opacity-60: rgb(var(--light-gray00-code) / 60%); --transparency-gray-00-opacity-70: rgb(var(--light-gray00-code) / 70%); --transparency-gray-00-opacity-80: rgb(var(--light-gray00-code) / 80%); --transparency-gray-00-opacity-90: rgb(var(--light-gray00-code) / 90%); --transparency-gray-00-opacity-100: rgb(var(--light-gray00-code) / 100%); /* transparency gray100 (light) */ --light-gray100-code: 51 50 54; --transparency-gray-100-opacity-00: rgb(var(--light-gray100-code) / 0%); --transparency-gray-100-opacity-05: rgb(var(--light-gray100-code) / 5%); --transparency-gray-100-opacity-10: rgb(var(--light-gray100-code) / 10%); --transparency-gray-100-opacity-15: rgb(var(--light-gray100-code) / 15%); --transparency-gray-100-opacity-20: rgb(var(--light-gray100-code) / 20%); --transparency-gray-100-opacity-30: rgb(var(--light-gray100-code) / 30%); --transparency-gray-100-opacity-40: rgb(var(--light-gray100-code) / 40%); --transparency-gray-100-opacity-50: rgb(var(--light-gray100-code) / 50%); --transparency-gray-100-opacity-60: rgb(var(--light-gray100-code) / 60%); --transparency-gray-100-opacity-70: rgb(var(--light-gray100-code) / 70%); --transparency-gray-100-opacity-80: rgb(var(--light-gray100-code) / 80%); --transparency-gray-100-opacity-90: rgb(var(--light-gray100-code) / 90%); --transparency-gray-100-opacity-100: rgb(var(--light-gray100-code) / 100%); /* transparency purple (light) */ --light-purple60-code: 153 51 255; /* #9933ff */ --transparency-purple-opacity-00: rgb(var(--light-purple60-code) / 0%); --transparency-purple-opacity-05: rgb(var(--light-purple60-code) / 5%); --transparency-purple-opacity-10: rgb(var(--light-purple60-code) / 10%); --transparency-purple-opacity-15: rgb(var(--light-purple60-code) / 15%); --transparency-purple-opacity-20: rgb(var(--light-purple60-code) / 20%); --transparency-purple-opacity-30: rgb(var(--light-purple60-code) / 30%); --transparency-purple-opacity-40: rgb(var(--light-purple60-code) / 40%); --transparency-purple-opacity-50: rgb(var(--light-purple60-code) / 50%); --transparency-purple-opacity-60: rgb(var(--light-purple60-code) / 60%); --transparency-purple-opacity-70: rgb(var(--light-purple60-code) / 70%); --transparency-purple-opacity-80: rgb(var(--light-purple60-code) / 80%); --transparency-purple-opacity-90: rgb(var(--light-purple60-code) / 90%); /* mint(deprecated) */ --mint00: #f9fafb; --mint10: #dfeff1; --mint20: #adf0ea; --mint30: #82e8df; --mint40: #2dd9ca; --mint50: #24c4c7; --mint60: #20a7b1; --mint70: #188ba7; /* error */ --error: #d6173a; } [data-theme='DARK'] { /* gray */ --gray100: var(--dark-gray100); --gray90: var(--dark-gray90); --gray80: var(--dark-gray80); --gray70: var(--dark-gray70); --gray60: var(--dark-gray60); --gray50: var(--dark-gray50); --gray40: var(--dark-gray40); --gray30: var(--dark-gray30); --gray20: var(--dark-gray20); --gray15: var(--dark-gray15); --gray10: var(--dark-gray10); --gray05: var(--dark-gray05); --gray00: var(--dark-gray00); /* purple */ --purple00: var(--dark-purple00); --purple05: var(--dark-purple05); --purple10: var(--dark-purple10); --purple15: var(--dark-purple15); --purple20: var(--dark-purple20); --purple30: var(--dark-purple30); --purple40: var(--dark-purple40); --purple50: var(--dark-purple50); --purple60: var(--dark-purple60); --purple70: var(--dark-purple70); --purple80: var(--dark-purple80); --purple90: var(--dark-purple90); --purple100: var(--dark-purple100); /* blue */ --blue100: var(--dark-blue100); --blue90: var(--dark-blue90); --blue80: var(--dark-blue80); --blue70: var(--dark-blue70); --blue60: var(--dark-blue60); --blue50: var(--dark-blue50); --blue40: var(--dark-blue40); --blue30: var(--dark-blue30); --blue20: var(--dark-blue20); --blue15: var(--dark-blue15); --blue10: var(--dark-blue10); --blue05: var(--dark-blue05); --blue00: var(--dark-blue00); /* pink */ --pink100: var(--dark-pink100); --pink90: var(--dark-pink90); --pink80: var(--dark-pink80); --pink70: var(--dark-pink70); --pink60: var(--dark-pink60); --pink50: var(--dark-pink50); --pink40: var(--dark-pink40); --pink30: var(--dark-pink30); --pink20: var(--dark-pink20); --pink15: var(--dark-pink15); --pink10: var(--dark-pink10); --pink05: var(--dark-pink05); --pink00: var(--dark-pink00); /* yellow */ --yellow00: var(--dark-yellow00); --yellow05: var(--dark-yellow05); --yellow10: var(--dark-yellow10); --yellow15: var(--dark-yellow15); --yellow20: var(--dark-yellow20); --yellow30: var(--dark-yellow30); --yellow40: var(--dark-yellow40); --yellow50: var(--dark-yellow50); --yellow60: var(--dark-yellow60); --yellow70: var(--dark-yellow70); --yellow80: var(--dark-yellow80); --yellow90: var(--dark-yellow90); --yellow100: var(--dark-yellow100); /* green */ --green00: var(--dark-green00); --green05: var(--dark-green05); --green10: var(--dark-green10); --green15: var(--dark-green15); --green20: var(--dark-green20); --green30: var(--dark-green30); --green40: var(--dark-green40); --green50: var(--dark-green50); --green60: var(--dark-green60); --green70: var(--dark-green70); --green80: var(--dark-green80); --green90: var(--dark-green90); --green100: var(--dark-green100); /* transparency gray00 (dark) */ --dark-gray00-code: 24 27 40; --transparency-gray-00-opacity-00: rgb(var(--dark-gray00-code) / 0%); --transparency-gray-00-opacity-05: rgb(var(--dark-gray00-code) / 5%); --transparency-gray-00-opacity-10: rgb(var(--dark-gray00-code) / 10%); --transparency-gray-00-opacity-15: rgb(var(--dark-gray00-code) / 15%); --transparency-gray-00-opacity-20: rgb(var(--dark-gray00-code) / 20%); --transparency-gray-00-opacity-30: rgb(var(--dark-gray00-code) / 30%); --transparency-gray-00-opacity-40: rgb(var(--dark-gray00-code) / 40%); --transparency-gray-00-opacity-50: rgb(var(--dark-gray00-code) / 50%); --transparency-gray-00-opacity-60: rgb(var(--dark-gray00-code) / 60%); --transparency-gray-00-opacity-70: rgb(var(--dark-gray00-code) / 70%); --transparency-gray-00-opacity-80: rgb(var(--dark-gray00-code) / 80%); --transparency-gray-00-opacity-90: rgb(var(--dark-gray00-code) / 90%); --transparency-gray-00-opacity-100: rgb(var(--dark-gray00-code) / 100%); /* transparency gray100 (dark) */ --dark-gray100-code: 247 247 248; --transparency-gray-100-opacity-00: rgb(var(--dark-gray100-code) / 0%); --transparency-gray-100-opacity-05: rgb(var(--dark-gray100-code) / 5%); --transparency-gray-100-opacity-10: rgb(var(--dark-gray100-code) / 10%); --transparency-gray-100-opacity-15: rgb(var(--dark-gray100-code) / 15%); --transparency-gray-100-opacity-20: rgb(var(--dark-gray100-code) / 20%); --transparency-gray-100-opacity-30: rgb(var(--dark-gray100-code) / 30%); --transparency-gray-100-opacity-40: rgb(var(--dark-gray100-code) / 40%); --transparency-gray-100-opacity-50: rgb(var(--dark-gray100-code) / 50%); --transparency-gray-100-opacity-60: rgb(var(--dark-gray100-code) / 60%); --transparency-gray-100-opacity-70: rgb(var(--dark-gray100-code) / 70%); --transparency-gray-100-opacity-80: rgb(var(--dark-gray100-code) / 80%); --transparency-gray-100-opacity-90: rgb(var(--dark-gray100-code) / 90%); --transparency-gray-100-opacity-100: rgb(var(--dark-gray100-code) / 100%); /* transparency purple (light) */ --dark-purple60-code: 153 51 255; --transparency-purple-opacity-00: rgb(var(--dark-purple60-code) / 0%); --transparency-purple-opacity-05: rgb(var(--dark-purple60-code) / 5%); --transparency-purple-opacity-10: rgb(var(--dark-purple60-code) / 10%); --transparency-purple-opacity-15: rgb(var(--dark-purple60-code) / 15%); --transparency-purple-opacity-40: rgb(var(--dark-purple60-code) / 40%); --transparency-purple-opacity-60: rgb(var(--dark-purple60-code) / 60%); } :root { /* Semantic Colors / Toggle */ --toggle-bg: var(--purple70); --toggle-switch: var(--light-gray00); /* Semantic Colors / Button / CTA */ --btn-cta-bg: #8f00ff; --btn-cta-bg-hover: #7200cc; --btn-cta-border: #333236; --btn-cta-label: #ffffff; /* Semantic Colors / Button / Primary */ --btn-primary-bg: var(--purple60); --btn-primary-bg-hover: var(--purple70); /* Semantic Colors / Text */ --txt-primary: var(--transparency-gray-100-opacity-100); --txt-secondary: var(--transparency-gray-100-opacity-80); --txt-tertiary: var(--transparency-gray-100-opacity-60); --txt-caption: var(--transparency-gray-100-opacity-50); --txt-disabled: var(--transparency-gray-100-opacity-30); --txt-primary-invert: var(--transparency-gray-00-opacity-100); --txt-secondary-invert: var(--transparency-gray-00-opacity-80); --txt-tertiary-invert: var(--transparency-gray-00-opacity-60); --txt-caption-invert: var(--transparency-gray-00-opacity-50); --txt-disabled-invert: var(--transparency-gray-00-opacity-30); --txt-link: #20a7b1; /* Semantic Colors / Text / Purple */ --txt-purple-primary: var(--purple80); --txt-purple-secondary: var(--purple60); /* Semantic Colors / Status */ --status-positive: var(--green70); --status-negative: #d6173a; /* Semantic Colors / Background */ --bg-primary: var(--gray00); --bg-secondary: var(--gray05); --bg-tertiary: var(--gray10); --bg-invert: #080c14; /* Semantic Colors / Background / Purple */ --bg-purple-primary: var(--purple05); --bg-purple-primary-invert: var(--purple50); /* Semantic Colors / Border */ --border-primary: var(--gray100); --border-secondary: var(--transparency-gray-100-opacity-15); --border-tertiary: var(--transparency-gray-100-opacity-10); --border-primary-invert: var(--gray00); --border-secondary-invert: var(--transparency-gray-00-opacity-20); --border-tertiary-invert: var(--transparency-gray-00-opacity-10); /* Semantic Colors / Border / Purple */ --border-purple-primary: var(--purple60); --border-purple-secondary: var(--purple30); --border-purple-tertiary: var(--purple10); /* Semantic Colors / Backdrop */ --backdrop: rgb(0 0 0 / 70%); /* Semantic Colors / Diff */ --diff-remove-bg: #ffc9c7; --diff-remove-txt: #b4002b; --diff-add-bg: #c5fad7; --diff-add-txt: #00693d; /* Semantic Colors / Shadow */ --shadow-01: 0 .2rem 1.4rem 0 rgb(0 0 0 / 8%); --shadow-02: 0 .2rem 1.8rem 0 rgb(0 0 0 / 12%); --shadow-03: 0 .4rem 2.4rem 0 rgb(0 0 0 / 20%); --shadow-04: 0 .4rem 2.4rem 0 rgb(0 0 0 / 30%); /* Semantic Colors / Drop Shadow */ --drop-shadow-01: drop-shadow(0 .2rem 1.4rem rgb(0 0 0 / 8%)); --drop-shadow-02: drop-shadow(0 .2rem 1.8rem rgb(0 0 0 / 12%)); --drop-shadow-03: drop-shadow(0 .4rem 2.4rem rgb(0 0 0 / 20%)); --drop-shadow-04: drop-shadow(0 .4rem 2.4rem rgb(0 0 0 / 30%)); /* Semantic Colors / KDC */ --kdc-black-08: #171617; --kdc-green-05: #6cd28c; --kdc-green-01: #fff9d9; --kdc-green-02: #fff2b2; --kdc-green-03: #e1ffa1; --kdc-green-04: #aef77e; --kdc-green-06: #29ad99; --kdc-green-07: #087b69; --kdc-green-08: #095146; --kdc-pink-05: #ff47b6; --kdc-pink-06: #ff1ca5; --kdc-pink-07: #d31989; --kdc-purple-01: #f3e3ff; --kdc-purple-03: #c47cfd; --kdc-purple-06: #7004c5; --kdc-blue-05: #5c6aff; --kdc-blue-06: #6a2eff; --kdc-blue-07: #481eb9; } /* 다크모드가 색상이 다른 경우 재 정의 필요 */ [data-theme='DARK'] { /* Semantic Colors / Toggle */ --toggle-bg: var(--purple60); --toggle-switch: var(--dark-gray100); /* Semantic Colors / Text */ --txt-primary: var(--transparency-gray-100-opacity-100); --txt-secondary: var(--transparency-gray-100-opacity-80); --txt-tertiary: var(--transparency-gray-100-opacity-60); --txt-caption: var(--transparency-gray-100-opacity-50); --txt-disabled: var(--transparency-gray-100-opacity-30); --txt-primary-invert: var(--transparency-gray-100-opacity-100); --txt-secondary-invert: var(--transparency-gray-100-opacity-80); --txt-tertiary-invert: var(--transparency-gray-100-opacity-60); --txt-caption-invert: var(--transparency-gray-100-opacity-50); --txt-disabled-invert: var(--transparency-gray-100-opacity-30); /* Semantic Colors / Text / Purple */ --txt-purple-primary: var(--purple20); --txt-purple-secondary: var(--purple30); /* Semantic Colors / Status */ --status-positive: var(--green70); /* Semantic Colors / Background */ --bg-primary: var(--gray00); --bg-secondary: var(--gray05); --bg-tertiary: var(--gray10); /* Semantic Colors / Background / Purple */ --bg-purple-primary: var(--transparency-purple-opacity-15); --bg-purple-primary-invert: var(--transparency-purple-opacity-90); /* Semantic Colors / Border */ --border-primary: var(--gray100); --border-secondary: var(--transparency-gray-100-opacity-15); --border-tertiary: var(--transparency-gray-100-opacity-10); --border-primary-invert: var(--gray00); --border-secondary-invert: var(--transparency-gray-00-opacity-20); --border-tertiary-invert: var(--transparency-gray-00-opacity-10); /* Semantic Colors / Border / Purple */ --border-purple-primary: var(--transparency-purple-opacity-90); --border-purple-secondary: var(--transparency-purple-opacity-70); --border-purple-tertiary: var(--transparency-purple-opacity-50); /* Semantic Colors / Diff */ --diff-remove-bg: #650205; --diff-remove-txt: #fbbac6; --diff-add-bg: #065433; --diff-add-txt: #b4dac5; /* Semantic Colors / Shadow */ --shadow-01: 0 .2rem 1.4rem 0 rgb(0 0 0 / 8%); --shadow-02: 0 .2rem 1.8rem 0 rgb(0 0 0 / 12%); --shadow-03: 0 .4rem 2.4rem 0 rgb(0 0 0 / 20%); --shadow-04: 0 .4rem 2.4rem 0 rgb(0 0 0 / 30%); } :root { /* GNB height */ --gnb-height: 9.8rem; /* Global Navigation Tab height */ --gnt-height: 0rem; /* stylelint-disable-line length-zero-no-unit */ /* radius */ --radius-0: 0; --radius-2: .2rem; --radius-4: .4rem; --radius-6: .6rem; --radius-8: .8rem; --radius-10: 1rem; --radius-12: 1.2rem; --radius-16: 1.6rem; --radius-20: 2rem; --radius-24: 2.4rem; --radius-28: 2.8rem; --radius-32: 3.2rem; --radius-circle: 999rem; /* corner-radius */ --corner-radius-xl: var(--radius-28); --corner-radius-l: var(--radius-20); --corner-radius-m: var(--radius-16); --corner-radius-s: var(--radius-12); --corner-radius-xs: var(--radius-8); /* spacing */ --spacing-0: 0rem; /* stylelint-disable-line length-zero-no-unit */ --spacing-2: .2rem; --spacing-4: .4rem; --spacing-6: .6rem; --spacing-8: .8rem; --spacing-10: 1rem; --spacing-12: 1.2rem; --spacing-16: 1.6rem; --spacing-20: 2rem; --spacing-24: 2.4rem; --spacing-32: 3.2rem; --spacing-40: 4rem; --spacing-48: 4.8rem; --spacing-56: 5.6rem; --spacing-64: 6.4rem; --spacing-80: 8rem; --spacing-120: 12rem; --spacing-160: 16rem; --spacing-200: 20rem; --spacing-240: 24rem; /* layout */ --container-padding: 4rem; /* layout > section-padding-h-{숫자} */ --section-padding-h-240: 24rem; --section-padding-h-200: 20rem; --section-padding-h-160: 16rem; --section-padding-h-120: 12rem; --section-padding-h-80: 8rem; --section-padding-h-40: 4rem; /* layout > contents-gap */ --contents-gap-xs: var(--spacing-8); --contents-gap-s: var(--spacing-12); --contents-gap-m: var(--spacing-16); --contents-gap-l: var(--spacing-24); --contents-gap-xl: var(--spacing-32); /* classroom */ --classroom-footer-height: 5.5rem; /* 2024promotion */ --book-gap-x: 16rem; --book-gap-y: 5rem; --book-center-y: 2rem; --book-rotate: 5deg; } @media (max-width: calc(75em - .0625em)) { /* sass mixin medium */ :root { --gnb-height: 5.6rem; --gnt-height: calc(5.6rem + env(safe-area-inset-bottom, 0rem)); /* layout */ --container-padding: 3.2rem; /* 2024promotion */ --book-gap-x: 9.4rem; --book-gap-y: 3rem; --book-center-y: 2rem; } } @media (max-width: calc(48em - .0625em)) { /* sass mixin small */ :root { /* radius small */ --radius-2: .1rem; --radius-4: .2rem; --radius-6: .4rem; --radius-8: .6rem; --radius-10: .8rem; --radius-12: 1rem; --radius-16: 1.2rem; --radius-20: 1.6rem; --radius-24: 2rem; --radius-28: 2.4rem; --radius-32: 2.8rem; /* spacing small */ --spacing-6: .6rem; --spacing-8: .6rem; --spacing-10: .8rem; --spacing-12: 1rem; --spacing-16: 1.2rem; --spacing-20: 1.6rem; --spacing-24: 2rem; --spacing-32: 2.4rem; --spacing-40: 3.2rem; --spacing-48: 4rem; --spacing-56: 4.8rem; --spacing-64: 5.2rem; --spacing-80: 6.4rem; --spacing-120: 8rem; --spacing-160: 12rem; --spacing-200: 16rem; --spacing-240: 20rem; /* layout */ --container-padding: 1.6rem; /* layout > section-padding-{숫자} */ --section-padding-h-240: 12rem; --section-padding-h-200: 12rem; --section-padding-h-160: 8rem; --section-padding-h-120: 6.4rem; --section-padding-h-80: 6.4rem; --section-padding-h-40: 2.4rem; /* classroom */ --classroom-footer-height: 5.1rem; /* 2024promotion */ --book-gap-x: 6rem; --book-gap-y: 2rem; --book-center-y: .6rem; } } /* ref: https://codeit-kr.slack.com/archives/C05HM7VUZN1/p1718589658496069?thread_ts=1718589329.979849&cid=C05HM7VUZN1 */ /* portal에서 사용하는 컴포넌트는 제외 */ :root { --z-index-toast: 2100; --z-index-bottom-sheet: 2001; --z-index-overlay: 2000; --z-index-drawer: 1500; --z-index-tab-bar: 1400; --z-index-float: 1300; --z-index-popover: 1200; --z-index-tooltip: 1100; } :root { /* etc(light) */ --light-progress-bar-bg: #f8ecff; --light-progress-bar: #9933ff; --light-fix-bg: #dfefe6; --light-fix-txt: #00693d; --light-remove-bg: #fbd8e1; --light-remove-txt: #c90529; --light-red40: #f3bcc8; --light-red30: #fbd8e0; --light-red20: #d6173a; /* etc(dark) */ --dark-progress-bar-bg: #2d3143; --dark-progress-bar: #a64eff; --dark-fix-bg: #065433; --dark-fix-txt: #b4dac5; --dark-remove-bg: #830105; --dark-remove-txt: #ffb8c4; --dark-red40: #9a2326; --dark-red30: #650205; --dark-red20: #ff9eb0; /* etc */ --progress-bar-bg: var(--light-progress-bar-bg); --progress-bar: var(--light-progress-bar); --remove-txt: var(--light-remove-txt); --remove-bg: var(--light-remove-bg); --fix-txt: var(--light-fix-txt); --fix-bg: var(--light-fix-bg); --red40: var(--light-red40); --red30: var(--light-red30); --red20: var(--light-red20); } [data-theme='DARK'] { --progress-bar-bg: var(--dark-progress-bar-bg); --progress-bar: var(--dark-progress-bar); --remove-txt: var(--dark-remove-txt); --remove-bg: var(--dark-remove-bg); --fix-txt: var(--dark-fix-txt); --fix-bg: var(--dark-fix-bg); /* red */ --red40: var(--dark-red40); --red30: var(--dark-red30); --red20: var(--dark-red20); } :root { /* gray */ --sp-gray-100: #333236; --sp-gray-90: #4a494f; --sp-gray-80: #66666e; --sp-gray-70: #888893; --sp-gray-60: #adaeb8; --sp-gray-50: #c2c3cd; --sp-gray-40: #d5d6dd; --sp-gray-30: #dddee4; --sp-gray-20: #e5e5ea; --sp-gray-15: #ededf0; --sp-gray-10: #f6f6f8; --sp-gray-05: #fbfbfb; --sp-gray-00: #ffffff; /* main */ --sp-main-100: #54009e; --sp-main-90: #6500c2; --sp-main-80: #760dde; --sp-main-70: #8f00ff; --sp-main-60: #9933ff; --sp-main-50: #a64eff; --sp-main-40: #b363fd; --sp-main-30: #c47cfd; --sp-main-20: #cd96f8; --sp-main-15: #d4a4f9; --sp-main-10: #e9ccff; --sp-main-05: #f8ecff; --sp-main-00: #fdfaff; /* blue */ --sp-blue-100: #00154c; --sp-blue-90: #00247f; --sp-blue-80: #0032b2; --sp-blue-70: #0040e5; --sp-blue-60: #195aff; --sp-blue-50: #4e80ff; --sp-blue-40: #7fa3ff; --sp-blue-30: #99b5ff; --sp-blue-20: #b2c8ff; --sp-blue-15: #ccdaff; --sp-blue-10: #d6e1ff; --sp-blue-05: #e5ecff; --sp-blue-00: #f4f7ff; /* yellow */ --sp-yellow-100: #331100; --sp-yellow-90: #662900; --sp-yellow-80: #b85600; --sp-yellow-70: #eb7d00; --sp-yellow-60: #f59b00; --sp-yellow-50: #ffaa00; --sp-yellow-40: #ffb21a; --sp-yellow-30: #ffbb33; --sp-yellow-20: #ffc34d; --sp-yellow-15: #ffcc66; --sp-yellow-10: #ffe180; --sp-yellow-05: #fff2b2; --sp-yellow-00: #fff7e5; /* red */ --sp-red-100: #65000f; --sp-red-90: #830014; --sp-red-80: #a20019; --sp-red-70: #c0001e; --sp-red-60: #df0122; --sp-red-50: #fd0127; --sp-red-40: #fe3352; --sp-red-30: #fe667d; --sp-red-20: #fe99a8; --sp-red-15: #feb2be; --sp-red-10: #ffd6e6; --sp-red-05: #ffebf3; --sp-red-00: #fff4f8; /* green */ --sp-green-100: #13637c; --sp-green-90: #116e88; --sp-green-80: #117d97; --sp-green-70: #188ba7; --sp-green-60: #20a7b1; --sp-green-50: #24c4c7; --sp-green-40: #2dd9ca; --sp-green-30: #82e8df; --sp-green-20: #adf0ea; --sp-green-15: #d3ebed; --sp-green-10: #dfeff1; --sp-green-05: #edf6f7; --sp-green-00: #f9fafb; /* lime */ --sp-lime-point: #cfff48; /* transparency main */ --sp-transparency-main-00: #9933ff00; --sp-transparency-main-05: #9933ff0c; --sp-transparency-main-10: #9933ff19; --sp-transparency-main-15: #9933ff26; --sp-transparency-main-20: #9933ff33; --sp-transparency-main-40: #9933ff66; --sp-transparency-main-60: #9933ff99; --sp-transparency-main-80: #9933ffcc; /* transparency white */ --sp-transparency-white-00: #fbfbfb00; --sp-transparency-white-05: #fbfbfb0c; --sp-transparency-white-10: #fbfbfb19; --sp-transparency-white-15: #fbfbfb26; --sp-transparency-white-20: #fbfbfb33; --sp-transparency-white-30: #fbfbfb4c; --sp-transparency-white-40: #fbfbfb66; --sp-transparency-white-50: #fbfbfb7f; --sp-transparency-white-60: #fbfbfb99; --sp-transparency-white-70: #fbfbfbb2; --sp-transparency-white-80: #fbfbfbcc; --sp-transparency-white-90: #fbfbfbe5; --sp-transparency-white-100: #ffffff; /* transparency gray */ --sp-transparency-gray-00: #27233000; --sp-transparency-gray-05: #2723300c; --sp-transparency-gray-10: #27233019; --sp-transparency-gray-15: #27233026; --sp-transparency-gray-20: #27233033; --sp-transparency-gray-30: #2723304c; --sp-transparency-gray-40: #27233066; --sp-transparency-gray-50: #2723307f; --sp-transparency-gray-60: #27233099; --sp-transparency-gray-70: #272330b2; --sp-transparency-gray-80: #272330cc; --sp-transparency-gray-90: #272330e5; --sp-transparency-gray-100: #262330; /* transparency black */ --sp-transparency-black-100: #000000; } [data-theme='DARK'] { /* gray */ --sp-gray-100: #f7f7f8; --sp-gray-90: #eeeef1; --sp-gray-80: #d3d4dd; --sp-gray-70: #bbbdc9; --sp-gray-60: #999cac; --sp-gray-50: #646a7d; --sp-gray-40: #454b5f; --sp-gray-30: #393e50; --sp-gray-20: #2e3243; --sp-gray-15: #272b3a; --sp-gray-10: #242735; --sp-gray-05: #1e212d; --sp-gray-00: #181b28; /* main */ --sp-main-100: #fdfaff; --sp-main-90: #f8ecff; --sp-main-80: #e9ccff; --sp-main-70: #d4a4f9; --sp-main-60: #cd96f8; --sp-main-50: #c47cfd; --sp-main-40: #b363fd; --sp-main-30: #a64eff; --sp-main-20: #9933ff; --sp-main-15: #8f00ff; --sp-main-10: #760dde; --sp-main-05: #6500c2; --sp-main-00: #54009e; /* blue */ --sp-blue-100: #f5f8ff; --sp-blue-90: #e5edff; --sp-blue-80: #ccdaff; --sp-blue-70: #ccdaff; --sp-blue-60: #b2c8ff; --sp-blue-50: #99b5ff; --sp-blue-40: #7fa3ff; --sp-blue-30: #4e80ff; --sp-blue-20: #195aff; --sp-blue-15: #0041e5; --sp-blue-10: #0032b2; --sp-blue-05: #00247f; --sp-blue-00: #00154c; /* yellow */ --sp-yellow-100: #fff7e5; --sp-yellow-90: #fff2b2; --sp-yellow-80: #ffe180; --sp-yellow-70: #ffcc66; --sp-yellow-60: #ffc34d; --sp-yellow-50: #ffbb33; --sp-yellow-40: #ffb21a; --sp-yellow-30: #ffaa00; --sp-yellow-20: #f59b00; --sp-yellow-15: #eb7d00; --sp-yellow-10: #b85600; --sp-yellow-05: #662900; --sp-yellow-00: #331100; /* red */ --sp-red-100: #fbedef; --sp-red-90: #f6d4d9; --sp-red-80: #eea9b3; --sp-red-70: #e67e8e; --sp-red-60: #de5368; --sp-red-50: #d62843; --sp-red-40: #bc233b; --sp-red-30: #a21e32; --sp-red-20: #89192a; --sp-red-15: #7c1726; --sp-red-10: #6f1522; --sp-red-05: #62121e; --sp-red-00: #55101a; /* green */ --sp-green-100: #f9fafb; --sp-green-90: #edf6f7; --sp-green-80: #dfeff1; --sp-green-70: #d3ebed; --sp-green-60: #adf0ea; --sp-green-50: #82e8df; --sp-green-40: #2dd9ca; --sp-green-30: #24c4c7; --sp-green-20: #20a7b1; --sp-green-15: #188ba7; --sp-green-10: #117d97; --sp-green-05: #116e88; --sp-green-00: #13637c; /* transparency main */ --sp-transparency-main-00: #cd96f800; --sp-transparency-main-05: #cd96f80c; --sp-transparency-main-10: #cd96f819; --sp-transparency-main-15: #cd96f826; --sp-transparency-main-20: #cd96f833; --sp-transparency-main-40: #cd96f866; --sp-transparency-main-60: #cd96f899; --sp-transparency-main-80: #cd96f8cc; /* transparency white */ --sp-transparency-white-00: #181b2800; --sp-transparency-white-05: #181b280c; --sp-transparency-white-10: #181b2819; --sp-transparency-white-15: #181b2826; --sp-transparency-white-20: #181b2833; --sp-transparency-white-30: #181b284c; --sp-transparency-white-40: #181b2866; --sp-transparency-white-50: #181b287f; --sp-transparency-white-60: #181b2899; --sp-transparency-white-70: #181b28b2; --sp-transparency-white-80: #181b28cc; --sp-transparency-white-90: #181b28e5; --sp-transparency-white-100: #181b28; /* transparency gray */ --sp-transparency-gray-00: #f7f7f800; --sp-transparency-gray-05: #f7f7f80c; --sp-transparency-gray-10: #f7f7f819; --sp-transparency-gray-15: #f7f7f826; --sp-transparency-gray-20: #f7f7f833; --sp-transparency-gray-30: #f7f7f84c; --sp-transparency-gray-40: #f7f7f866; --sp-transparency-gray-50: #f7f7f87f; --sp-transparency-gray-60: #f7f7f899; --sp-transparency-gray-70: #f7f7f8b2; --sp-transparency-gray-80: #f7f7f8cc; --sp-transparency-gray-90: #f7f7f8e5; --sp-transparency-gray-100: #f7f7f8; /* transparency black */ --sp-transparency-black-100: #ffffff; } :root { /* gray */ --sp-gray-100: #333236; --sp-gray-90: #4a494f; --sp-gray-80: #66666e; --sp-gray-70: #888893; --sp-gray-60: #adaeb8; --sp-gray-50: #c2c3cd; --sp-gray-40: #d5d6dd; --sp-gray-30: #dddee4; --sp-gray-20: #e5e5ea; --sp-gray-15: #ededf0; --sp-gray-10: #f6f6f8; --sp-gray-05: #fbfbfb; --sp-gray-00: #ffffff; /* main */ --sp-main-100: #54009e; --sp-main-90: #6500c2; --sp-main-80: #760dde; --sp-main-70: #8f00ff; --sp-main-60: #9933ff; --sp-main-50: #a64eff; --sp-main-40: #b363fd; --sp-main-30: #c47cfd; --sp-main-20: #cd96f8; --sp-main-15: #d4a4f9; --sp-main-10: #e9ccff; --sp-main-05: #f8ecff; --sp-main-00: #fdfaff; /* blue */ --sp-blue-100: #00154c; --sp-blue-90: #00247f; --sp-blue-80: #0032b2; --sp-blue-70: #0040e5; --sp-blue-60: #195aff; --sp-blue-50: #4e80ff; --sp-blue-40: #7fa3ff; --sp-blue-30: #99b5ff; --sp-blue-20: #b2c8ff; --sp-blue-15: #ccdaff; --sp-blue-10: #d6e1ff; --sp-blue-05: #e5ecff; --sp-blue-00: #f4f7ff; /* yellow */ --sp-yellow-100: #331100; --sp-yellow-90: #662900; --sp-yellow-80: #b85600; --sp-yellow-70: #eb7d00; --sp-yellow-60: #f59b00; --sp-yellow-50: #ffaa00; --sp-yellow-40: #ffb21a; --sp-yellow-30: #ffbb33; --sp-yellow-20: #ffc34d; --sp-yellow-15: #ffcc66; --sp-yellow-10: #ffe180; --sp-yellow-05: #fff2b2; --sp-yellow-00: #fff7e5; /* red */ --sp-red-100: #65000f; --sp-red-90: #830014; --sp-red-80: #a20019; --sp-red-70: #c0001e; --sp-red-60: #df0122; --sp-red-50: #fd0127; --sp-red-40: #fe3352; --sp-red-30: #fe667d; --sp-red-20: #fe99a8; --sp-red-15: #feb2be; --sp-red-10: #ffd6e6; --sp-red-05: #ffebf3; --sp-red-00: #fff4f8; /* green */ --sp-green-100: #13637c; --sp-green-90: #116e88; --sp-green-80: #117d97; --sp-green-70: #188ba7; --sp-green-60: #20a7b1; --sp-green-50: #24c4c7; --sp-green-40: #2dd9ca; --sp-green-30: #82e8df; --sp-green-20: #adf0ea; --sp-green-15: #d3ebed; --sp-green-10: #dfeff1; --sp-green-05: #edf6f7; --sp-green-00: #f9fafb; /* lime */ --sp-lime-point: #cfff48; /* transparency main */ --sp-transparency-main-00: #9933ff00; --sp-transparency-main-05: #9933ff0c; --sp-transparency-main-10: #9933ff19; --sp-transparency-main-15: #9933ff26; --sp-transparency-main-20: #9933ff33; --sp-transparency-main-40: #9933ff66; --sp-transparency-main-60: #9933ff99; --sp-transparency-main-80: #9933ffcc; /* transparency white */ --sp-transparency-white-00: #fbfbfb00; --sp-transparency-white-05: #fbfbfb0c; --sp-transparency-white-10: #fbfbfb19; --sp-transparency-white-15: #fbfbfb26; --sp-transparency-white-20: #fbfbfb33; --sp-transparency-white-30: #fbfbfb4c; --sp-transparency-white-40: #fbfbfb66; --sp-transparency-white-50: #fbfbfb7f; --sp-transparency-white-60: #fbfbfb99; --sp-transparency-white-70: #fbfbfbb2; --sp-transparency-white-80: #fbfbfbcc; --sp-transparency-white-90: #fbfbfbe5; --sp-transparency-white-100: #ffffff; /* transparency gray */ --sp-transparency-gray-00: #27233000; --sp-transparency-gray-05: #2723300c; --sp-transparency-gray-10: #27233019; --sp-transparency-gray-15: #27233026; --sp-transparency-gray-20: #27233033; --sp-transparency-gray-30: #2723304c; --sp-transparency-gray-40: #27233066; --sp-transparency-gray-50: #2723307f; --sp-transparency-gray-60: #27233099; --sp-transparency-gray-70: #272330b2; --sp-transparency-gray-80: #272330cc; --sp-transparency-gray-90: #272330e5; --sp-transparency-gray-100: #262330; /* transparency black */ --sp-transparency-black-100: #000000; } [data-theme='DARK'] { /* gray */ --sp-gray-100: #f7f7f8; --sp-gray-90: #eeeef1; --sp-gray-80: #d3d4dd; --sp-gray-70: #bbbdc9; --sp-gray-60: #999cac; --sp-gray-50: #646a7d; --sp-gray-40: #454b5f; --sp-gray-30: #393e50; --sp-gray-20: #2e3243; --sp-gray-15: #272b3a; --sp-gray-10: #242735; --sp-gray-05: #1e212d; --sp-gray-00: #181b28; /* main */ --sp-main-100: #fdfaff; --sp-main-90: #f8ecff; --sp-main-80: #e9ccff; --sp-main-70: #d4a4f9; --sp-main-60: #cd96f8; --sp-main-50: #c47cfd; --sp-main-40: #b363fd; --sp-main-30: #a64eff; --sp-main-20: #9933ff; --sp-main-15: #8f00ff; --sp-main-10: #760dde; --sp-main-05: #6500c2; --sp-main-00: #54009e; /* blue */ --sp-blue-100: #f5f8ff; --sp-blue-90: #e5edff; --sp-blue-80: #ccdaff; --sp-blue-70: #ccdaff; --sp-blue-60: #b2c8ff; --sp-blue-50: #99b5ff; --sp-blue-40: #7fa3ff; --sp-blue-30: #4e80ff; --sp-blue-20: #195aff; --sp-blue-15: #0041e5; --sp-blue-10: #0032b2; --sp-blue-05: #00247f; --sp-blue-00: #00154c; /* yellow */ --sp-yellow-100: #fff7e5; --sp-yellow-90: #fff2b2; --sp-yellow-80: #ffe180; --sp-yellow-70: #ffcc66; --sp-yellow-60: #ffc34d; --sp-yellow-50: #ffbb33; --sp-yellow-40: #ffb21a; --sp-yellow-30: #ffaa00; --sp-yellow-20: #f59b00; --sp-yellow-15: #eb7d00; --sp-yellow-10: #b85600; --sp-yellow-05: #662900; --sp-yellow-00: #331100; /* red */ --sp-red-100: #fbedef; --sp-red-90: #f6d4d9; --sp-red-80: #eea9b3; --sp-red-70: #e67e8e; --sp-red-60: #de5368; --sp-red-50: #d62843; --sp-red-40: #bc233b; --sp-red-30: #a21e32; --sp-red-20: #89192a; --sp-red-15: #7c1726; --sp-red-10: #6f1522; --sp-red-05: #62121e; --sp-red-00: #55101a; /* green */ --sp-green-100: #f9fafb; --sp-green-90: #edf6f7; --sp-green-80: #dfeff1; --sp-green-70: #d3ebed; --sp-green-60: #adf0ea; --sp-green-50: #82e8df; --sp-green-40: #2dd9ca; --sp-green-30: #24c4c7; --sp-green-20: #20a7b1; --sp-green-15: #188ba7; --sp-green-10: #117d97; --sp-green-05: #116e88; --sp-green-00: #13637c; /* transparency main */ --sp-transparency-main-00: #cd96f800; --sp-transparency-main-05: #cd96f80c; --sp-transparency-main-10: #cd96f819; --sp-transparency-main-15: #cd96f826; --sp-transparency-main-20: #cd96f833; --sp-transparency-main-40: #cd96f866; --sp-transparency-main-60: #cd96f899; --sp-transparency-main-80: #cd96f8cc; /* transparency white */ --sp-transparency-white-00: #181b2800; --sp-transparency-white-05: #181b280c; --sp-transparency-white-10: #181b2819; --sp-transparency-white-15: #181b2826; --sp-transparency-white-20: #181b2833; --sp-transparency-white-30: #181b284c; --sp-transparency-white-40: #181b2866; --sp-transparency-white-50: #181b287f; --sp-transparency-white-60: #181b2899; --sp-transparency-white-70: #181b28b2; --sp-transparency-white-80: #181b28cc; --sp-transparency-white-90: #181b28e5; --sp-transparency-white-100: #181b28; /* transparency gray */ --sp-transparency-gray-00: #f7f7f800; --sp-transparency-gray-05: #f7f7f80c; --sp-transparency-gray-10: #f7f7f819; --sp-transparency-gray-15: #f7f7f826; --sp-transparency-gray-20: #f7f7f833; --sp-transparency-gray-30: #f7f7f84c; --sp-transparency-gray-40: #f7f7f866; --sp-transparency-gray-50: #f7f7f87f; --sp-transparency-gray-60: #f7f7f899; --sp-transparency-gray-70: #f7f7f8b2; --sp-transparency-gray-80: #f7f7f8cc; --sp-transparency-gray-90: #f7f7f8e5; --sp-transparency-gray-100: #f7f7f8; /* transparency black */ --sp-transparency-black-100: #ffffff; } :root { /* Semantic Colors / Text */ --sp-txt-primary: var(--sp-transparency-gray-100); --sp-txt-secondary: var(--sp-transparency-gray-80); --sp-txt-tertiary: var(--sp-transparency-gray-60); --sp-txt-caption: var(--sp-transparency-gray-50); --sp-txt-disabled: var(--sp-transparency-gray-30); --sp-txt-primary-invert: var(--sp-transparency-white-100); --sp-txt-secondary-invert: var(--sp-transparency-white-80); --sp-txt-tertiary-invert: var(--sp-transparency-white-70); --sp-txt-caption-invert: var(--sp-transparency-white-60); --sp-txt-disabled-invert: var(--sp-transparency-white-30); --sp-txt-error: var(--sp-red-50); --sp-txt-positive: var(--sp-green-50); /* Semantic Colors / Background */ --sp-bg-primary: var(--sp-transparency-white-100); --sp-bg-secondary: var(--sp-transparency-gray-05); --sp-bg-tertiary: var(--sp-transparency-gray-10); --sp-bg-disabled: var(--sp-transparency-gray-15); --sp-bg-primary-invert: var(--sp-transparency-gray-100); --sp-bg-secondary-invert: var(--sp-transparency-white-05); --sp-bg-tertiary-invert: var(--sp-transparency-white-10); --sp-bg-disabled-invert: var(--sp-transparency-white-15); --sp-bg-error: var(--sp-red-05); --sp-bg-positive: var(--sp-green-05); --sp-bg-accent: var(--sp-transparency-main-10); /* Semantic Colors / Border */ --sp-border-primary: var(--sp-transparency-gray-100); --sp-border-secondary: var(--sp-transparency-gray-20); --sp-border-tertiary: var(--sp-transparency-gray-10); --sp-border-disabled: var(--sp-transparency-gray-05); --sp-border-primary-invert: var(--sp-transparency-white-100); --sp-border-secondary-invert: var(--sp-transparency-white-20); --sp-border-tertiary-invert: var(--sp-transparency-white-10); --sp-border-disabled-invert: var(--sp-transparency-white-05); --sp-border-error: var(--sp-red-40); --sp-border-positive: var(--sp-green-40); --sp-border-accent: var(--sp-main-40); } /* 다크모드가 색상이 다른 경우 재 정의 필요 */ [data-theme='DARK'] { /* Semantic Colors / Text */ --sp-txt-primary: var(--sp-transparency-gray-100); --sp-txt-secondary: var(--sp-transparency-gray-80); --sp-txt-tertiary: var(--sp-transparency-gray-60); --sp-txt-caption: var(--sp-transparency-gray-50); --sp-txt-disabled: var(--sp-transparency-gray-30); --sp-txt-primary-invert: var(--sp-transparency-white-100); --sp-txt-secondary-invert: var(--sp-transparency-white-80); --sp-txt-tertiary-invert: var(--sp-transparency-white-60); --sp-txt-caption-invert: var(--sp-transparency-white-50); --sp-txt-disabled-invert: var(--sp-transparency-white-30); --sp-txt-error: var(--sp-red-50); --sp-txt-positive: var(--sp-green-50); /* Semantic Colors / Background */ --sp-bg-primary: var(--sp-transparency-white-100); --sp-bg-secondary: var(--sp-transparency-gray-05); --sp-bg-tertiary: var(--sp-transparency-gray-10); --sp-bg-disabled: var(--sp-transparency-gray-15); --sp-bg-primary-invert: var(--sp-transparency-gray-100); --sp-bg-secondary-invert: var(--sp-transparency-white-05); --sp-bg-tertiary-invert: var(--sp-transparency-white-10); --sp-bg-disabled-invert: var(--sp-transparency-white-15); --sp-bg-error: var(--sp-red-05); --sp-bg-positive: var(--sp-green-05); --sp-bg-accent: var(--sp-transparency-main-10); /* Semantic Colors / Border */ --sp-border-primary: var(--sp-transparency-gray-100); --sp-border-secondary: var(--sp-transparency-gray-20); --sp-border-tertiary: var(--sp-transparency-gray-10); --sp-border-disabled: var(--sp-transparency-gray-05); --sp-border-primary-invert: var(--sp-transparency-white-100); --sp-border-secondary-invert: var(--sp-transparency-white-20); --sp-border-tertiary-invert: var(--sp-transparency-white-10); --sp-border-disabled-invert: var(--sp-transparency-white-05); --sp-border-error: var(--sp-red-20); --sp-border-positive: var(--sp-green-20); --sp-border-accent: var(--sp-main-20); } :root { --sp-shadow-s: 0 0 4px 0 rgb(0 0 0 / 8%), 0 0 2px 0 rgb(0 34 102 / 10%); --sp-shadow-m: 0 0 8px 0 rgb(0 0 0 / 8%), 0 2px 8px 0 rgb(0 34 102 / 10%); --sp-shadow-m2: 0 0 8px 0 rgb(0 0 0 / 4%), 0 4px 12px 0 rgb(0 34 102 / 6%); --sp-shadow-l: 0 0 8px 0 rgb(0 0 0 / 8%), 0 4px 12px 0 rgb(0 34 102 / 10%); } /* 스프린트 관련 앱의 _app.tsx에서 @frontend-mono/shared/styles/vars.css도 import 필요 */ :root { /* GNB */ --sp-gnb-height: 6rem; --gnt-height: 0; } @media (max-width: 75em) { /* sass mixin medium */ :root { --sp-gnb-height: 4.8rem; --gnt-height: 0; } } @font-face{font-family:"SpoqaHanSansNeo";src:url("https://codeit-static.codeit.com/font/SpoqaHanSansNeo-Light.woff2") format("woff2"),url("https://codeit-static.codeit.com/font/SpoqaHanSansNeo-Light.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-family:"SpoqaHanSansNeo";src:url("https://codeit-static.codeit.com/font/SpoqaHanSansNeo-Regular.woff2") format("woff2"),url("https://codeit-static.codeit.com/font/SpoqaHanSansNeo-Regular.woff") format("woff");font-style:normal}@font-face{font-family:"SpoqaHanSansNeo";src:url("https://codeit-static.codeit.com/font/SpoqaHanSansNeo-Medium.woff2") format("woff2"),url("https://codeit-static.codeit.com/font/SpoqaHanSansNeo-Medium.woff") format("woff");font-weight:500;font-style:normal}@font-face{font-family:"SpoqaHanSansNeo";src:url("https://codeit-static.codeit.com/font/SpoqaHanSansNeo-Bold.woff2") format("woff2"),url("https://codeit-static.codeit.com/font/SpoqaHanSansNeo-Bold.woff") format("woff");font-weight:600;font-style:normal}@font-face{font-family:"SpoqaHanSansNeo";src:url("https://codeit-static.codeit.com/font/SpoqaHanSansNeo-Bold.woff2") format("woff2"),url("https://codeit-static.codeit.com/font/SpoqaHanSansNeo-Bold.woff") format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Rec Mono Linear";src:url("https://codeit-static.codeit.com/font/RecMonoLinear-Regular.ttf") format("truetype");font-weight:normal;font-style:normal}@font-face{font-family:"Menlo";font-style:normal;font-weight:normal;src:local("Menlo Regular"),url("https://codeit-static.codeit.com/font/Menlo-Regular.woff") format("woff")}@font-face{font-family:"Pretendard";src:url("https://codeit-static.codeit.com/font/Pretendard-ExtraBold.woff2") format("woff2"),url("https://codeit-static.codeit.com/font/Pretendard-ExtraBold.woff") format("woff");font-weight:800;font-style:normal}._sm{display:none}@media(max-width: 767px){._sm{display:revert}}._md{display:none}@media(max-width: 75em){._md{display:revert}}@media(max-width: 767px){._md{display:none}._md._sm{display:revert}}._lg{display:revert}@media(max-width: 75em){._lg{display:none}._lg._md{display:revert}}@media(max-width: 75em)and (max-width: 767px){._lg._md{display:none}._lg._md._sm{display:revert}}@media(max-width: 767px){._lg{display:none}._lg._sm{display:revert}}*,*::before,*::after{margin:0;padding:0;box-sizing:inherit;background-color:rgba(0,0,0,0)}html{font-size:62.5%;box-sizing:border-box;-webkit-overflow-scrolling:touch}body{min-width:32rem;background-color:var(--sp-gray-00);color:var(--sp-txt-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"SpoqaHanSansNeo","Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:1.6rem;letter-spacing:-0.03rem}input,textarea{border:none;outline:none;font-family:"SpoqaHanSansNeo","Apple SD Gothic Neo","Noto Sans KR",sans-serif}textarea{resize:none}button{font:inherit;background:none;color:inherit;border:none;padding:0;cursor:pointer;outline:inherit}a{text-decoration:none;color:inherit}img{vertical-align:middle}li{list-style:none}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}#nprogress .bar{height:.4rem !important;background:var(--sp-main-50) !important}#nprogress .peg{box-shadow:0 0 1rem var(--sp-main-50),0 0 .5rem var(--sp-main-50) !important} @keyframes react-loading-skeleton { 100% { transform: translateX(100%); } } .react-loading-skeleton { --base-color: #ebebeb; --highlight-color: #f5f5f5; --animation-duration: 1.5s; --animation-direction: normal; --pseudo-element-display: block; /* Enable animation */ background-color: var(--base-color); width: 100%; border-radius: 0.25rem; display: inline-flex; line-height: 1; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; overflow: hidden; } .react-loading-skeleton::after { content: ' '; display: var(--pseudo-element-display); position: absolute; top: 0; left: 0; right: 0; height: 100%; background-repeat: no-repeat; background-image: var( --custom-highlight-background, linear-gradient( 90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100% ) ); transform: translateX(-100%); animation-name: react-loading-skeleton; animation-direction: var(--animation-direction); animation-duration: var(--animation-duration); animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @media (prefers-reduced-motion) { .react-loading-skeleton { --pseudo-element-display: none; /* Disable animation */ } } /* Make clicks pass-through */ #nprogress { pointer-events: none; } #nprogress .bar { background: #29d; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } /* Fancy blur effect */ #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29d, 0 0 5px #29d; opacity: 1.0; transform: rotate(3deg) translate(0px, -4px); } /* Remove these to get rid of the spinner */ #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #29d; border-left-color: #29d; border-radius: 50%; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos]{pointer-events:none}[data-aos].aos-animate{pointer-events:auto}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}@media screen{html:not(.no-js) [data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:none}html:not(.no-js) [data-aos=fade-up]{transform:translate3d(0,100px,0)}html:not(.no-js) [data-aos=fade-down]{transform:translate3d(0,-100px,0)}html:not(.no-js) [data-aos=fade-right]{transform:translate3d(-100px,0,0)}html:not(.no-js) [data-aos=fade-left]{transform:translate3d(100px,0,0)}html:not(.no-js) [data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}html:not(.no-js) [data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}html:not(.no-js) [data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}html:not(.no-js) [data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}html:not(.no-js) [data-aos=zoom-in]{transform:scale(.6)}html:not(.no-js) [data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-out]{transform:scale(1.2)}html:not(.no-js) [data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}html:not(.no-js) [data-aos^=slide][data-aos^=slide]{transition-property:transform;visibility:hidden}html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate{visibility:visible;transform:translateZ(0)}html:not(.no-js) [data-aos=slide-up]{transform:translate3d(0,100%,0)}html:not(.no-js) [data-aos=slide-down]{transform:translate3d(0,-100%,0)}html:not(.no-js) [data-aos=slide-right]{transform:translate3d(-100%,0,0)}html:not(.no-js) [data-aos=slide-left]{transform:translate3d(100%,0,0)}html:not(.no-js) [data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:transform}html:not(.no-js) [data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}html:not(.no-js) [data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}html:not(.no-js) [data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}html:not(.no-js) [data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}html:not(.no-js) [data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}html:not(.no-js) [data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)}} .ToastRenderer__sm__b7N0g{display:none}@media(max-width: 767px){.ToastRenderer__sm__b7N0g{display:revert}}.ToastRenderer__md__jNLYA{display:none}@media(max-width: 75em){.ToastRenderer__md__jNLYA{display:revert}}@media(max-width: 767px){.ToastRenderer__md__jNLYA{display:none}.ToastRenderer__md__jNLYA.ToastRenderer__sm__b7N0g{display:revert}}.ToastRenderer__lg__JM4sQ{display:revert}@media(max-width: 75em){.ToastRenderer__lg__JM4sQ{display:none}.ToastRenderer__lg__JM4sQ.ToastRenderer__md__jNLYA{display:revert}}@media(max-width: 75em)and (max-width: 767px){.ToastRenderer__lg__JM4sQ.ToastRenderer__md__jNLYA{display:none}.ToastRenderer__lg__JM4sQ.ToastRenderer__md__jNLYA.ToastRenderer__sm__b7N0g{display:revert}}@media(max-width: 767px){.ToastRenderer__lg__JM4sQ{display:none}.ToastRenderer__lg__JM4sQ.ToastRenderer__sm__b7N0g{display:revert}}.ToastRenderer_container__txIO3{position:fixed;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:1.2rem;width:calc(100vw - 3.2rem);z-index:10}.ToastRenderer_container__txIO3.ToastRenderer_fullWidth__M2_HB{width:100vw}@media(min-width: 48em){.ToastRenderer_container__txIO3{width:initial;gap:2rem}}.ToastRenderer_toast__wJkXV{display:flex;justify-content:flex-end;width:100%}.ToastRenderer_toast__wJkXV.ToastRenderer_isIncreasing__rt6WA{animation:ToastRenderer_showUp__JjFQR .3s ease-in-out}@keyframes ToastRenderer_showUp__JjFQR{0%{transform:translateY(8rem);opacity:.7}100%{transform:translateY(0);opacity:1}} .MarketingToast__sm__hAb9e{display:none}@media(max-width: 767px){.MarketingToast__sm__hAb9e{display:revert}}.MarketingToast__md__MQaab{display:none}@media(max-width: 75em){.MarketingToast__md__MQaab{display:revert}}@media(max-width: 767px){.MarketingToast__md__MQaab{display:none}.MarketingToast__md__MQaab.MarketingToast__sm__hAb9e{display:revert}}.MarketingToast__lg__eN6z5{display:revert}@media(max-width: 75em){.MarketingToast__lg__eN6z5{display:none}.MarketingToast__lg__eN6z5.MarketingToast__md__MQaab{display:revert}}@media(max-width: 75em)and (max-width: 767px){.MarketingToast__lg__eN6z5.MarketingToast__md__MQaab{display:none}.MarketingToast__lg__eN6z5.MarketingToast__md__MQaab.MarketingToast__sm__hAb9e{display:revert}}@media(max-width: 767px){.MarketingToast__lg__eN6z5{display:none}.MarketingToast__lg__eN6z5.MarketingToast__sm__hAb9e{display:revert}}.MarketingToast_container__RAm3s{position:relative;cursor:pointer;height:-moz-fit-content;height:fit-content;background-color:var(--bg-primary);display:flex;flex-direction:column;width:35.8rem;padding:1.6rem 1.2rem;box-shadow:var(--shadow-03);border-radius:var(--radius-12)}@media(max-width: 767px){.MarketingToast_container__RAm3s{width:100vw;max-width:45rem;border-bottom-right-radius:0;border-bottom-left-radius:0}}.MarketingToast_closeButton__Y9A80{position:absolute;top:1.6rem;right:1.6rem;z-index:1}.MarketingToast_title__ajXDQ{color:var(--txt-primary);padding:0 2.8rem 0 .8rem;white-space:pre-line;font-size:1.6rem;font-weight:700;line-height:2.7rem;letter-spacing:inherit}.MarketingToast_message__43szZ{margin-top:.2rem;color:var(--txt-tertiary);padding:0 .8rem;white-space:pre-line;font-size:1.6rem;font-weight:400;line-height:2.7rem;letter-spacing:inherit}.MarketingToast_image__56aWT{object-fit:cover;margin-top:1.6rem;border-radius:.8rem;width:100%;height:auto;aspect-ratio:334/188}.MarketingToast_line__LKAcU{height:.1rem;background-color:var(--gray30);margin-top:1.6rem}.MarketingToast_bottomMessageWrapper__FEoDe{display:flex;justify-content:flex-end;align-items:center;gap:.4rem;padding:0 .4rem}.MarketingToast_image__56aWT+.MarketingToast_bottomMessageWrapper__FEoDe{margin-top:1.2rem}.MarketingToast_line__LKAcU+.MarketingToast_bottomMessageWrapper__FEoDe{margin-top:.8rem}.MarketingToast_bottomMessage__eUvZD{color:var(--txt-secondary);font-size:1.5rem;font-weight:500;line-height:2.5rem;letter-spacing:inherit}.MarketingToast_chevronRightBox__3BEhm{width:1.6rem;height:1.6rem;background-color:var(--txt-secondary);border-radius:var(--radius-circle);display:flex;justify-content:center;align-items:center} .Icon__sm__8_HR_{display:none}@media(max-width: 767px){.Icon__sm__8_HR_{display:revert}}.Icon__md__vC3nW{display:none}@media(max-width: 75em){.Icon__md__vC3nW{display:revert}}@media(max-width: 767px){.Icon__md__vC3nW{display:none}.Icon__md__vC3nW.Icon__sm__8_HR_{display:revert}}.Icon__lg__iI0No{display:revert}@media(max-width: 75em){.Icon__lg__iI0No{display:none}.Icon__lg__iI0No.Icon__md__vC3nW{display:revert}}@media(max-width: 75em)and (max-width: 767px){.Icon__lg__iI0No.Icon__md__vC3nW{display:none}.Icon__lg__iI0No.Icon__md__vC3nW.Icon__sm__8_HR_{display:revert}}@media(max-width: 767px){.Icon__lg__iI0No{display:none}.Icon__lg__iI0No.Icon__sm__8_HR_{display:revert}}:where(.Icon_container__KMOfZ){display:inline-block;position:relative;line-height:0}:where(.Icon_container__KMOfZ).Icon_clickable__GpQ82{cursor:pointer}:where(.Icon_container__KMOfZ).Icon_thick__yKILh path{stroke-width:.5;stroke:var(--color, var(--gray100))}:where(.Icon_container__KMOfZ).Icon_xxsmall__A3aNc{--size: .8rem}@media not all and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_l-xxsmall__Hc0TY{--size: .8rem}}@media(min-width: 48em)and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_m-xxsmall__kl27e{--size: .8rem}}@media(max-width: 767px){:where(.Icon_container__KMOfZ).Icon_s-xxsmall__lsKl_{--size: .8rem}}:where(.Icon_container__KMOfZ).Icon_xsmall__DpkJ3{--size: 1.2rem}@media not all and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_l-xsmall__bSpQk{--size: 1.2rem}}@media(min-width: 48em)and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_m-xsmall__MOea3{--size: 1.2rem}}@media(max-width: 767px){:where(.Icon_container__KMOfZ).Icon_s-xsmall__Lc14p{--size: 1.2rem}}:where(.Icon_container__KMOfZ).Icon_medium__2vnL2{--size: 2rem}@media not all and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_l-medium__Bw_5J{--size: 2rem}}@media(min-width: 48em)and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_m-medium__wmLdK{--size: 2rem}}@media(max-width: 767px){:where(.Icon_container__KMOfZ).Icon_s-medium__9ZScx{--size: 2rem}}:where(.Icon_container__KMOfZ).Icon_small__p_kK_{--size: 1.6rem}@media not all and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_l-small__eG1i3{--size: 1.6rem}}@media(min-width: 48em)and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_m-small__gKKFd{--size: 1.6rem}}@media(max-width: 767px){:where(.Icon_container__KMOfZ).Icon_s-small__eV9kZ{--size: 1.6rem}}:where(.Icon_container__KMOfZ).Icon_large__RZaKE{--size: 2.4rem}@media not all and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_l-large__pSyZb{--size: 2.4rem}}@media(min-width: 48em)and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_m-large__BQ2ze{--size: 2.4rem}}@media(max-width: 767px){:where(.Icon_container__KMOfZ).Icon_s-large__2gSoQ{--size: 2.4rem}}:where(.Icon_container__KMOfZ).Icon_xlarge__RnUBo{--size: 2.8rem}@media not all and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_l-xlarge__y8NHk{--size: 2.8rem}}@media(min-width: 48em)and (max-width: 75em){:where(.Icon_container__KMOfZ).Icon_m-xlarge__30WjK{--size: 2.8rem}}@media(max-width: 767px){:where(.Icon_container__KMOfZ).Icon_s-xlarge__h4n_I{--size: 2.8rem}}:where(.Icon_container__KMOfZ).Icon_rotate-45__scx_D svg{transform:rotate(45deg)}:where(.Icon_container__KMOfZ).Icon_rotate-90__ACeUg svg{transform:rotate(90deg)}:where(.Icon_container__KMOfZ).Icon_rotate-135__0N1yA svg{transform:rotate(135deg)}:where(.Icon_container__KMOfZ).Icon_rotate-180__E6ZqI svg{transform:rotate(180deg)}:where(.Icon_container__KMOfZ).Icon_rotate-225__7yUcX svg{transform:rotate(225deg)}:where(.Icon_container__KMOfZ).Icon_rotate-270__kFD9o svg{transform:rotate(270deg)}:where(.Icon_container__KMOfZ).Icon_rotate-315__KsZzs svg{transform:rotate(315deg)}:where(.Icon_container__KMOfZ).Icon_rotate-360__LLeeK svg{transform:rotate(360deg)}@media(hover: hover)and (pointer: fine){:where(.Icon_container__KMOfZ){transition:unset}:where(.Icon_container__KMOfZ):hover{z-index:1}:where(.Icon_container__KMOfZ):hover.Icon_hover__hCUHe::after{display:block}}:where(.Icon_container__KMOfZ)::after{content:"";position:absolute;display:none;padding:.8rem;top:-0.8rem;left:-0.8rem;width:calc(100% + 1.6rem);height:calc(100% + 1.6rem);z-index:-1;background-color:rgba(24,27,40,.08);border-radius:var(--radius-circle)}:where(.Icon_container__KMOfZ) svg{width:var(--size, 2rem);height:var(--size, 2rem);transition:transform .2s ease-in-out}:where(.Icon_container__KMOfZ) path{fill:var(--color, var(--gray100))}.Icon_touch__Ex_iL{position:absolute;top:0;left:0;display:none;padding:50%;background-color:rgba(0,0,0,0);width:200%;height:200%;transform:translate(-25%, -25%)}@media not (hover: hover),not (pointer: fine){.Icon_touch__Ex_iL{display:block}} .GlobalChannelTalkButtonManager_container__I99IK{opacity:1;transition:opacity .3s}.GlobalChannelTalkButtonManager_container__I99IK.GlobalChannelTalkButtonManager_hidden__t9TtF{opacity:0} .ChannelTalkButton_button__5GUUT{position:fixed;z-index:100;bottom:2rem;right:2rem;display:flex;flex-direction:row;align-items:center}@media(max-width: 75em){.ChannelTalkButton_button__5GUUT{right:1rem}}@media(max-width: 767px){.ChannelTalkButton_button__5GUUT{right:1.2rem}}.ChannelTalkButton_label__QVt5J{padding:var(--spacing-16) var(--spacing-20);background-color:var(--sp-transparency-gray-100);border-radius:var(--radius-12);border:.1rem solid var(--sp-border-tertiary-invert);-webkit-backdrop-filter:blur(2.8rem);backdrop-filter:blur(2.8rem);color:var(--sp-txt-secondary-invert);width:14.3rem;display:flex;flex-direction:column;align-items:flex-start;margin-right:-5rem;font-size:1.6rem;font-weight:700;letter-spacing:-0.048rem;line-height:160%}@media(max-width: 767px){.ChannelTalkButton_label__QVt5J{display:none}}.ChannelTalkButton_image__0cHjR{width:8rem;height:auto;object-fit:contain;position:relative}@media(max-width: 767px){.ChannelTalkButton_image__0cHjR{width:4.8rem}}