@team-frieeren/components 1.0.0

package/dist/index.css

@@ -0,0 +1,1896 @@
+@charset "UTF-8";
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type=checkbox],
+[type=radio] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type=search] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root {
+  --seed-palette-color-base-100: #ffffff;
+  --seed-palette-color-base-200: #f6f7f9;
+  --seed-palette-color-base-300: #edf0f3;
+  --seed-palette-color-base-400: #e0e5ea;
+  --seed-palette-color-base-500: #c6ccd1;
+  --seed-palette-color-base-600: #a6abaf;
+  --seed-palette-color-base-700: #7b8287;
+  --seed-palette-color-base-800: #494f54;
+  --seed-palette-color-base-900: #25292c;
+  --seed-palette-color-base-1000: #191b1c;
+  --seed-palette-color-blue-100: #f0f9ff;
+  --seed-palette-color-blue-200: #e0f2fe;
+  --seed-palette-color-blue-300: #bae6fd;
+  --seed-palette-color-blue-400: #7dd3fc;
+  --seed-palette-color-blue-500: #38bdf8;
+  --seed-palette-color-blue-600: #0ea5e9;
+  --seed-palette-color-blue-700: #0284c7;
+  --seed-palette-color-blue-800: #0369a1;
+  --seed-palette-color-blue-900: #075985;
+  --seed-palette-color-blue-1000: #0c4a6e;
+  --seed-palette-color-purple-100: #f9fafe;
+  --seed-palette-color-purple-200: #ecedfc;
+  --seed-palette-color-purple-300: #d0d2f7;
+  --seed-palette-color-purple-400: #b5b8f2;
+  --seed-palette-color-purple-500: #9a9eec;
+  --seed-palette-color-purple-600: #7a82e4;
+  --seed-palette-color-purple-700: #6167c9;
+  --seed-palette-color-purple-800: #5756a6;
+  --seed-palette-color-purple-900: #494582;
+  --seed-palette-color-purple-1000: #38325d;
+  --seed-palette-color-red-100: #fef2f2;
+  --seed-palette-color-red-200: #fee2e2;
+  --seed-palette-color-red-300: #fecaca;
+  --seed-palette-color-red-400: #fca5a5;
+  --seed-palette-color-red-500: #f87171;
+  --seed-palette-color-red-600: #ef4444;
+  --seed-palette-color-red-700: #dc2626;
+  --seed-palette-color-red-800: #b91c1c;
+  --seed-palette-color-red-900: #991b1b;
+  --seed-palette-color-red-1000: #7f1d1d;
+  --seed-palette-color-orange-100: #fff7ed;
+  --seed-palette-color-orange-200: #ffedd5;
+  --seed-palette-color-orange-300: #fed7aa;
+  --seed-palette-color-orange-400: #fdba74;
+  --seed-palette-color-orange-500: #fb923c;
+  --seed-palette-color-orange-600: #f97316;
+  --seed-palette-color-orange-700: #ea580c;
+  --seed-palette-color-orange-800: #c2410c;
+  --seed-palette-color-orange-900: #9a3412;
+  --seed-palette-color-orange-1000: #7c2d12;
+  --seed-palette-color-yellow-100: #fefce8;
+  --seed-palette-color-yellow-200: #fef9c3;
+  --seed-palette-color-yellow-300: #fef08a;
+  --seed-palette-color-yellow-400: #fde047;
+  --seed-palette-color-yellow-500: #facc15;
+  --seed-palette-color-yellow-600: #eab308;
+  --seed-palette-color-yellow-700: #ca8a04;
+  --seed-palette-color-yellow-800: #a16207;
+  --seed-palette-color-yellow-900: #854d0e;
+  --seed-palette-color-yellow-1000: #713f12;
+  --seed-palette-color-green-100: #e9ffe9;
+  --seed-palette-color-green-200: #d5ffd5;
+  --seed-palette-color-green-300: #bdffbd;
+  --seed-palette-color-green-400: #89ee89;
+  --seed-palette-color-green-500: #60e060;
+  --seed-palette-color-green-600: #50bf50;
+  --seed-palette-color-green-700: #2fa32f;
+  --seed-palette-color-green-800: #1e861e;
+  --seed-palette-color-green-900: #156015;
+  --seed-palette-color-green-1000: #063f06;
+  --seed-ui-color-text-white: #ffffff;
+  --seed-ui-color-text-disabled: #c6ccd1;
+  --seed-ui-color-text-lite: #a6abaf;
+  --seed-ui-color-text-dark: #494f54;
+  --seed-ui-color-text-black: #191b1c;
+  --seed-ui-color-background-white: #ffffff;
+  --seed-ui-color-background-container: #ffffff;
+  --seed-ui-color-background-gray: #f6f7f9;
+  --seed-ui-color-background-chips: #f6f7f9;
+  --seed-ui-color-background-placeholder: #e0e5ea;
+  --seed-ui-color-background-guide: #e0e5ea;
+  --seed-ui-color-background-focus: #191b1c;
+  --seed-ui-color-icon-white: #ffffff;
+  --seed-ui-color-icon-lite: #a6abaf;
+  --seed-ui-color-icon-dark: #494f54;
+  --seed-ui-color-icon-black: #191b1c;
+  --seed-ui-color-line-white: #ffffff;
+  --seed-ui-color-line-lite: #edf0f3;
+  --seed-ui-color-line-medium: #c6ccd1;
+  --seed-ui-color-line-dark: #494f54;
+  --seed-ui-color-line-focus: #25292c;
+  --seed-ui-color-toast-complete: #50bf50;
+  --seed-ui-color-toast-error: #ef4444;
+  --seed-ui-color-toast-caution: #fef08a;
+  --seed-ui-color-misc-black-70: rgba(0, 0, 0, 0.7);
+  --seed-ui-color-misc-black-40: rgba(0, 0, 0, 0.4);
+  --seed-brand-color-primary: #50bf50;
+  --seed-brand-color-secondary1: #bdffbd;
+  --seed-brand-color-secondary2: #e9ffe9;
+  --seed-brand-color-point1: #ef4444;
+  --seed-brand-color-point2: #f87171;
+  --seed-brand-color-point3: #fb923c;
+  --seed-brand-color-point4: #fef08a;
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root {
+  --seed-palette-color-base-100: #ffffff;
+  --seed-palette-color-base-200: #f6f7f9;
+  --seed-palette-color-base-300: #edf0f3;
+  --seed-palette-color-base-400: #e0e5ea;
+  --seed-palette-color-base-500: #c6ccd1;
+  --seed-palette-color-base-600: #a6abaf;
+  --seed-palette-color-base-700: #7b8287;
+  --seed-palette-color-base-800: #494f54;
+  --seed-palette-color-base-900: #25292c;
+  --seed-palette-color-base-1000: #191b1c;
+  --seed-palette-color-blue-100: #f0f9ff;
+  --seed-palette-color-blue-200: #e0f2fe;
+  --seed-palette-color-blue-300: #bae6fd;
+  --seed-palette-color-blue-400: #7dd3fc;
+  --seed-palette-color-blue-500: #38bdf8;
+  --seed-palette-color-blue-600: #0ea5e9;
+  --seed-palette-color-blue-700: #0284c7;
+  --seed-palette-color-blue-800: #0369a1;
+  --seed-palette-color-blue-900: #075985;
+  --seed-palette-color-blue-1000: #0c4a6e;
+  --seed-palette-color-purple-100: #f9fafe;
+  --seed-palette-color-purple-200: #ecedfc;
+  --seed-palette-color-purple-300: #d0d2f7;
+  --seed-palette-color-purple-400: #b5b8f2;
+  --seed-palette-color-purple-500: #9a9eec;
+  --seed-palette-color-purple-600: #7a82e4;
+  --seed-palette-color-purple-700: #6167c9;
+  --seed-palette-color-purple-800: #5756a6;
+  --seed-palette-color-purple-900: #494582;
+  --seed-palette-color-purple-1000: #38325d;
+  --seed-palette-color-red-100: #fef2f2;
+  --seed-palette-color-red-200: #fee2e2;
+  --seed-palette-color-red-300: #fecaca;
+  --seed-palette-color-red-400: #fca5a5;
+  --seed-palette-color-red-500: #f87171;
+  --seed-palette-color-red-600: #ef4444;
+  --seed-palette-color-red-700: #dc2626;
+  --seed-palette-color-red-800: #b91c1c;
+  --seed-palette-color-red-900: #991b1b;
+  --seed-palette-color-red-1000: #7f1d1d;
+  --seed-palette-color-orange-100: #fff7ed;
+  --seed-palette-color-orange-200: #ffedd5;
+  --seed-palette-color-orange-300: #fed7aa;
+  --seed-palette-color-orange-400: #fdba74;
+  --seed-palette-color-orange-500: #fb923c;
+  --seed-palette-color-orange-600: #f97316;
+  --seed-palette-color-orange-700: #ea580c;
+  --seed-palette-color-orange-800: #c2410c;
+  --seed-palette-color-orange-900: #9a3412;
+  --seed-palette-color-orange-1000: #7c2d12;
+  --seed-palette-color-yellow-100: #fefce8;
+  --seed-palette-color-yellow-200: #fef9c3;
+  --seed-palette-color-yellow-300: #fef08a;
+  --seed-palette-color-yellow-400: #fde047;
+  --seed-palette-color-yellow-500: #facc15;
+  --seed-palette-color-yellow-600: #eab308;
+  --seed-palette-color-yellow-700: #ca8a04;
+  --seed-palette-color-yellow-800: #a16207;
+  --seed-palette-color-yellow-900: #854d0e;
+  --seed-palette-color-yellow-1000: #713f12;
+  --seed-palette-color-green-100: #e9ffe9;
+  --seed-palette-color-green-200: #d5ffd5;
+  --seed-palette-color-green-300: #bdffbd;
+  --seed-palette-color-green-400: #89ee89;
+  --seed-palette-color-green-500: #60e060;
+  --seed-palette-color-green-600: #50bf50;
+  --seed-palette-color-green-700: #2fa32f;
+  --seed-palette-color-green-800: #1e861e;
+  --seed-palette-color-green-900: #156015;
+  --seed-palette-color-green-1000: #063f06;
+  --seed-ui-color-text-white: #ffffff;
+  --seed-ui-color-text-disabled: #c6ccd1;
+  --seed-ui-color-text-lite: #a6abaf;
+  --seed-ui-color-text-dark: #494f54;
+  --seed-ui-color-text-black: #191b1c;
+  --seed-ui-color-background-white: #ffffff;
+  --seed-ui-color-background-container: #ffffff;
+  --seed-ui-color-background-gray: #f6f7f9;
+  --seed-ui-color-background-chips: #f6f7f9;
+  --seed-ui-color-background-placeholder: #e0e5ea;
+  --seed-ui-color-background-guide: #e0e5ea;
+  --seed-ui-color-background-focus: #191b1c;
+  --seed-ui-color-icon-white: #ffffff;
+  --seed-ui-color-icon-lite: #a6abaf;
+  --seed-ui-color-icon-dark: #494f54;
+  --seed-ui-color-icon-black: #191b1c;
+  --seed-ui-color-line-white: #ffffff;
+  --seed-ui-color-line-lite: #edf0f3;
+  --seed-ui-color-line-medium: #c6ccd1;
+  --seed-ui-color-line-dark: #494f54;
+  --seed-ui-color-line-focus: #25292c;
+  --seed-ui-color-toast-complete: #50bf50;
+  --seed-ui-color-toast-error: #ef4444;
+  --seed-ui-color-toast-caution: #fef08a;
+  --seed-ui-color-misc-black-70: rgba(0, 0, 0, 0.7);
+  --seed-ui-color-misc-black-40: rgba(0, 0, 0, 0.4);
+  --seed-brand-color-primary: #50bf50;
+  --seed-brand-color-secondary1: #bdffbd;
+  --seed-brand-color-secondary2: #e9ffe9;
+  --seed-brand-color-point1: #ef4444;
+  --seed-brand-color-point2: #f87171;
+  --seed-brand-color-point3: #fb923c;
+  --seed-brand-color-point4: #fef08a;
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root {
+  --seed-font-family-head: pretendard;
+  --seed-font-family-title: pretendard;
+  --seed-font-family-body: pretendard;
+  --seed-font-family-paragraph: pretendard;
+  --seed-font-family-caption: pretendard;
+  --seed-font-weight-400: regular;
+  --seed-font-weight-500: medium;
+  --seed-font-weight-700: bold;
+  --seed-font-size-xs: 12px;
+  --seed-font-size-s: 14px;
+  --seed-font-size-sm: 16px;
+  --seed-font-size-md: 18px;
+  --seed-font-size-lg: 20px;
+  --seed-font-size-xl: 22px;
+  --seed-font-size-2xl: 24px;
+  --seed-font-size-4xl: 32px;
+  --seed-font-size-5xl: 40px;
+  --seed-font-size-6xl: 48px;
+  --seed-font-size-3xl: 28px;
+  --seed-font-line-height-sm: 16px;
+  --seed-font-line-height-2xl: 24px;
+  --seed-font-line-height-4xl: 32px;
+  --seed-font-line-height-5xl: 40px;
+  --seed-font-line-height-6xl: 48px;
+  --seed-font-line-height-lg: 20px;
+  --seed-font-line-height-3xl: 28px;
+  --seed-font-line-height-s: 14px;
+  --seed-spacing-100: 0px;
+  --seed-spacing-200: 4px;
+  --seed-spacing-300: 8px;
+  --seed-spacing-400: 12px;
+  --seed-spacing-500: 16px;
+  --seed-spacing-600: 20px;
+  --seed-spacing-700: 24px;
+  --seed-spacing-800: 28px;
+  --seed-spacing-900: 32px;
+  --seed-spacing-1000: 40px;
+  --seed-spacing-1100: 48px;
+  --seed-spacing-1200: 56px;
+  --seed-spacing-1300: 64px;
+  --seed-spacing-1400: 72px;
+  --seed-rounding-100: 0px;
+  --seed-rounding-200: 4px;
+  --seed-rounding-300: 8px;
+  --seed-rounding-400: 12px;
+  --seed-rounding-500: 16px;
+  --seed-rounding-600: 20px;
+  --seed-rounding-700: 24px;
+  --seed-rounding-800: 28px;
+  --seed-rounding-900: 32px;
+  --seed-rounding-1000: 40px;
+  --seed-rounding-1100: 48px;
+  --seed-rounding-1200: 56px;
+  --seed-rounding-1300: 64px;
+  --seed-rounding-1400: 72px;
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root {
+  --seed-font-family-head: pretendard;
+  --seed-font-family-title: pretendard;
+  --seed-font-family-body: pretendard;
+  --seed-font-family-paragraph: pretendard;
+  --seed-font-family-caption: pretendard;
+  --seed-font-weight-400: regular;
+  --seed-font-weight-500: medium;
+  --seed-font-weight-700: bold;
+  --seed-font-size-xs: 12px;
+  --seed-font-size-s: 14px;
+  --seed-font-size-sm: 16px;
+  --seed-font-size-md: 18px;
+  --seed-font-size-lg: 20px;
+  --seed-font-size-xl: 22px;
+  --seed-font-size-2xl: 24px;
+  --seed-font-size-4xl: 32px;
+  --seed-font-size-5xl: 40px;
+  --seed-font-size-6xl: 48px;
+  --seed-font-size-3xl: 28px;
+  --seed-font-line-height-sm: 16px;
+  --seed-font-line-height-2xl: 24px;
+  --seed-font-line-height-4xl: 32px;
+  --seed-font-line-height-5xl: 40px;
+  --seed-font-line-height-6xl: 48px;
+  --seed-font-line-height-lg: 20px;
+  --seed-font-line-height-3xl: 28px;
+  --seed-font-line-height-s: 14px;
+  --seed-spacing-100: 0px;
+  --seed-spacing-200: 4px;
+  --seed-spacing-300: 8px;
+  --seed-spacing-400: 12px;
+  --seed-spacing-500: 16px;
+  --seed-spacing-600: 20px;
+  --seed-spacing-700: 24px;
+  --seed-spacing-800: 28px;
+  --seed-spacing-900: 32px;
+  --seed-spacing-1000: 40px;
+  --seed-spacing-1100: 48px;
+  --seed-spacing-1200: 56px;
+  --seed-spacing-1300: 64px;
+  --seed-spacing-1400: 72px;
+  --seed-rounding-100: 0px;
+  --seed-rounding-200: 4px;
+  --seed-rounding-300: 8px;
+  --seed-rounding-400: 12px;
+  --seed-rounding-500: 16px;
+  --seed-rounding-600: 20px;
+  --seed-rounding-700: 24px;
+  --seed-rounding-800: 28px;
+  --seed-rounding-900: 32px;
+  --seed-rounding-1000: 40px;
+  --seed-rounding-1100: 48px;
+  --seed-rounding-1200: 56px;
+  --seed-rounding-1300: 64px;
+  --seed-rounding-1400: 72px;
+}
+
+.box {
+  box-sizing: border-box;
+}
+
+:root {
+  --button-loading-dot-delay: 0.2s;
+  --button-loading-dot-duration: 1.4s;
+}
+
+.button {
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  border: none;
+  font-weight: 500;
+  transition: all 0.2s ease-in-out;
+  border-radius: var(--seed-spacing-300);
+}
+.button:disabled {
+  cursor: not-allowed;
+}
+.button.button--loading {
+  cursor: wait;
+}
+
+.button--size-lg {
+  padding: var(--seed-spacing-500) var(--seed-spacing-700);
+  gap: var(--seed-spacing-300);
+  font-size: 16px;
+  height: 52px;
+}
+.button--size-lg > .button--content span {
+  height: 20px;
+}
+
+.button--size-md {
+  padding: var(--seed-spacing-300) var(--seed-spacing-400);
+  gap: var(--seed-spacing-300);
+  font-size: 14px;
+  height: 48px;
+}
+.button--size-md > .button--content span {
+  height: 20px;
+}
+
+.button--type-solid-green {
+  background-color: var(--seed-brand-color-primary);
+  color: var(--seed-ui-color-line-white);
+}
+.button--type-solid-green:hover:not(:disabled) {
+  background-color: var(--seed-palette-color-green-700);
+}
+.button--type-solid-green:active:not(:disabled) {
+  background-color: var(--seed-palette-color-green-700);
+}
+.button--type-solid-green.disabled {
+  background-color: var(--seed-ui-color-background-guide);
+  border-color: var(--seed-ui-color-background-guide);
+  color: var(--seed-ui-color-text-disabled);
+}
+
+.button--type-solid-red {
+  background-color: var(--seed-brand-color-point2);
+  color: var(--seed-ui-color-line-white);
+}
+.button--type-solid-red:hover:not(:disabled) {
+  background-color: var(--seed-palette-color-red-600);
+}
+.button--type-solid-red:active:not(:disabled) {
+  background-color: var(--seed-palette-color-red-600);
+}
+.button--type-solid-red.disabled {
+  background-color: var(--seed-ui-color-background-guide);
+  border-color: var(--seed-ui-color-background-guide);
+  color: var(--seed-ui-color-text-disabled);
+}
+
+.button--type-outline-green {
+  background-color: var(--seed-ui-color-background-container);
+  border: 1px solid var(--seed-brand-color-primary);
+  color: var(--seed-brand-color-primary);
+}
+.button--type-outline-green:hover:not(:disabled) {
+  background-color: var(--seed-brand-color-secondary2);
+}
+.button--type-outline-green:active:not(:disabled) {
+  background-color: var(--seed-brand-color-secondary2);
+}
+.button--type-outline-green.disabled {
+  background-color: var(--seed-ui-color-background-white);
+  border-color: var(---seed-ui-color-line-lite);
+  color: var(--seed-ui-color-text-disabled);
+}
+
+.button--type-outline-gray {
+  background-color: var(--seed-ui-color-background-white);
+  border: 1px solid var(--seed-ui-color-line-dark);
+  color: var(--seed-ui-color-text-black);
+}
+.button--type-outline-gray:hover:not(:disabled) {
+  background-color: var(--seed-ui-color-background-gray);
+}
+.button--type-outline-gray:active:not(:disabled) {
+  background-color: var(--seed-ui-color-background-gray);
+}
+.button--type-outline-gray.disabled {
+  background-color: var(--seed-ui-color-background-white);
+  border-color: var(---seed-ui-color-line-lite);
+  color: var(--seed-ui-color-text-disabled);
+}
+
+.button--type-text-none {
+  background-color: transparent;
+  color: var(--seed-ui-color-text-black);
+}
+.button--type-text-none:hover:not(:disabled) {
+  color: var(--seed-ui-color-text-lite);
+}
+.button--type-text-none:active:not(:disabled) {
+  color: var(--seed-ui-color-text-lite);
+}
+.button--type-text-none.disabled {
+  color: var(--seed-ui-color-text-disabled);
+}
+
+.button--display-inline {
+  display: inline-flex;
+}
+
+.button--display-block {
+  display: flex;
+}
+
+.button--display-full {
+  display: flex;
+  width: 100%;
+}
+
+.button--content {
+  opacity: 1;
+  transition: opacity 0.2s;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+.button--content.button--content--hidden {
+  opacity: 0;
+}
+
+.button--loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.button--loading-dot {
+  animation: loadingDot var(--button-loading-dot-duration) infinite;
+  opacity: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+.button--loading-dot:nth-child(2) {
+  animation-delay: var(--button-loading-dot-delay);
+}
+.button--loading-dot:nth-child(3) {
+  animation-delay: calc(var(--button-loading-dot-delay) * 2);
+}
+
+@keyframes loadingDot {
+  0%, 20% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+  80%, 100% {
+    opacity: 0;
+    transform: translateY(0);
+  }
+}
+:root {
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --font-size-heading: 24px;
+  --font-size-body: 16px;
+  --font-size-text: 14px;
+  --line-height-default: 1.4;
+  --font-display-block: block;
+  --font-display-inline-block: inline-block;
+  --font-display-inline: inline;
+  --font-display-flex: flex;
+  --font-display-inline-flex: inline-flex;
+  --font-display-none: none;
+}
+
+.text {
+  box-sizing: border-box;
+}
+
+.text--font-weight-regular {
+  font-weight: var(--font-weight-regular);
+}
+
+.text--font-weight-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.text--font-weight-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.text--typography-heading {
+  font-size: var(--font-size-heading);
+  line-height: var(--line-height-default);
+}
+
+.text--typography-body {
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-default);
+}
+
+.text--typography-text {
+  font-size: var(--font-size-text);
+  line-height: var(--line-height-default);
+}
+
+.text--single-line {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.text--multi-line {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.text--display-block {
+  display: var(--font-display-block);
+}
+
+.text--display-inline-block {
+  display: var(--font-display-inline-block);
+}
+
+.text--display-inline {
+  display: var(--font-display-inline);
+}
+
+.text--display-flex {
+  display: var(--font-display-flex);
+}
+
+.text--display-inline-flex {
+  display: var(--font-display-inline-flex);
+}
+
+.text--display-none {
+  display: var(--font-display-none);
+}
+
+:root {
+  /* Color tokens */
+  --seed-palette-color-base-100: #ffffff;
+  --seed-palette-color-base-800: #494f54;
+  /* Radius tokens */
+  --seed-spacing-100: 0px;
+  --seed-spacing-300: 8px;
+  --seed-spacing-600: 20px;
+  --seed-spacing-900: 32px;
+}
+
+/** Default Style */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.drawer-content {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: fit-content;
+  background-color: #fff;
+  outline: none;
+  max-height: calc(100dvh - 32px);
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  overflow-y: hidden;
+}
+
+.drawer-content-inner {
+  max-height: calc(100dvh - 68px); /* 핸들 높이(36px)를 고려하여 조정 */
+  overflow-y: auto; /* 스크롤 추가 */
+  -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */
+}
+
+/** Tokens Style */
+.bottomsheet-container--radius-none {
+  border-top: var(--seed-spacing-100);
+}
+
+.bottomsheet-container--radius-small {
+  border-radius: var(--seed-spacing-300);
+}
+
+.bottomsheet-container--radius-medium {
+  border-radius: var(--seed-spacing-700);
+}
+
+.bottomsheet-container--radius-large {
+  border-radius: var(--seed-spacing-900);
+}
+
+.bottomsheet-container--theme-light {
+  background-color: var(--seed-palette-color-base-100);
+}
+
+.bottomsheet-container--theme-dark {
+  background-color: var(--seed-palette-color-base-800);
+}
+
+.drawer-handle {
+  height: 36px;
+  width: 100%;
+}
+
+:root {
+  /* Color tokens */
+  --seed-palette-color-base-100: #ffffff;
+  --seed-palette-color-base-900: #25292c;
+  /* Radius tokens */
+  --seed-spacing-100: 0px;
+  --seed-spacing-300: 8px;
+  --seed-spacing-600: 20px;
+  --seed-spacing-900: 32px;
+}
+
+/** Default Style */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  /** to-do animation duration, timing function tokenization */
+  animation: overlayShow 250ms cubic-bezier(0.3, 0, 0, 1);
+}
+
+.dialog-content {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 450px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 300ms cubic-bezier(0.3, 0, 0, 1);
+}
+
+.dialog-handle {
+  margin-top: 10px;
+  width: 45px;
+}
+
+/** Default Animation */
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+/** Tokens Style */
+.dialog-content--theme-light {
+  background-color: var(--seed-palette-color-base-100);
+}
+
+.dialog-content--theme-dark {
+  background-color: var(--seed-palette-color-base-900);
+}
+
+.dialog-content--radius-none {
+  border-radius: var(--seed-spacing-100);
+}
+
+.dialog-content--radius-small {
+  border-radius: var(--seed-spacing-300);
+}
+
+.dialog-content--radius-medium {
+  border-radius: var(--seed-spacing-600);
+}
+
+.dialog-content--radius-large {
+  border-radius: var(--seed-spacing-900);
+}
+
+/** Default Style */
+@keyframes toast-enter-top {
+  0% {
+    transform: translate3d(0, -200%, 0) scale(0.6);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+    opacity: 1;
+  }
+}
+@keyframes toast-exit-top {
+  0% {
+    transform: translate3d(0, 0, -1px) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -150%, -1px) scale(0.6);
+    opacity: 0;
+  }
+}
+@keyframes toast-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes toast-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes toast-enter-bottom {
+  0% {
+    transform: translate3d(0, 200%, 0) scale(0.6);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+    opacity: 1;
+  }
+}
+@keyframes toast-exit-bottom {
+  0% {
+    transform: translate3d(0, 0, -1px) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, 150%, -1px) scale(0.6);
+    opacity: 0;
+  }
+}
+@keyframes toast-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes toast-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.toast--content {
+  opacity: 0;
+  display: flex;
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--seed-spacing-600);
+  border-radius: var(--seed-rounding-300);
+  min-height: 56px;
+  padding: var(--seed-spacing-500);
+  background: var(--seed-ui-color-misc-black-70);
+  color: #363636;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
+  pointer-events: auto;
+  will-change: transform;
+  transition: transform 0.23s cubic-bezier(0.21, 1.02, 0.73, 1);
+}
+.toast--content.top.visible {
+  animation: toast-enter-top 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+}
+.toast--content.top.hidden {
+  animation: toast-exit-top 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
+}
+.toast--content.bottom.visible {
+  animation: toast-enter-bottom 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+}
+.toast--content.bottom.hidden {
+  animation: toast-exit-bottom 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toast--content.visible {
+    animation: toast-fade-in 0.35s ease-in forwards;
+  }
+  .toast--content.hidden {
+    animation: toast-fade-out 0.4s ease-out forwards;
+  }
+}
+
+.toast--type-message {
+  display: flex;
+  align-items: center;
+  gap: var(--seed-spacing-300);
+}
+
+.toast--type-icon {
+  display: flex;
+  align-items: center;
+}
+.toast--type-icon[data-toast-type=default] {
+  display: none;
+}
+
+.toast--message {
+  font-size: var(--seed-font-size-s);
+  font-weight: var(--seed-font-weight-400);
+  color: var(--seed-ui-color-text-white);
+  line-height: var(--seed-font-line-height-sm);
+}
+
+.toast--action-link {
+  flex-shrink: 0;
+  font-size: var(--seed-font-size-xs);
+  font-weight: var(--seed-font-weight-400);
+  color: var(--seed-ui-color-text-white);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.toast--action-button {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: var(--seed-spacing-200) var(--seed-spacing-300);
+  background-color: var(--seed-brand-color-primary);
+  border-radius: var(--seed-rounding-400);
+  font-size: var(--seed-font-size-xs);
+  font-weight: var(--seed-font-weight-400);
+  color: var(--seed-ui-color-text-white);
+  cursor: pointer;
+}
+
+.toaster-content {
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.toast-wrapper {
+  position: absolute;
+}
+.toast-wrapper > * {
+  transition: all 0.23s cubic-bezier(0.21, 1.02, 0.73, 1);
+}
+.toast-wrapper.toast-wrapper--top-right {
+  right: 0;
+}
+.toast-wrapper.toast-wrapper--top-left {
+  left: 0;
+}
+.toast-wrapper.toast-wrapper--top-center {
+  left: 50%;
+}
+.toast-wrapper.toast-wrapper--bottom-right {
+  bottom: 0;
+  right: 0;
+}
+.toast-wrapper.toast-wrapper--bottom-left {
+  bottom: 0;
+  left: 0;
+}
+.toast-wrapper.toast-wrapper--bottom-center {
+  bottom: 0;
+  left: 50%;
+}
+
+.popover-content {
+  border-radius: 4px;
+  padding: 20px;
+  width: 260px;
+  background-color: white;
+  box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+:root {
+  --seed-palette-color-base-100: #ffffff;
+  --seed-palette-color-base-500: #c6ccd1;
+  --seed-palette-color-base-800: #494f54;
+  --seed-palette-color-base-1000: #191b1c;
+  --seed-palette-color-blue-200: #e0f2fe;
+  --seed-palette-color-blue-800: #0369a1;
+  --seed-palette-color-blue-1000: #0c4a6e;
+}
+
+button {
+  all: unset;
+}
+
+.SelectTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 13px;
+  line-height: 1;
+  height: 35px;
+  gap: 5px;
+  background-color: white;
+  color: var(--seed-palette-color-base-1000);
+  box-shadow: 0 2px 10px var(--seed-palette-color-base-1000);
+}
+.SelectTrigger:hover {
+  background-color: var(--seed-palette-color-blue-200);
+}
+.SelectTrigger:focus {
+  box-shadow: 0 0 0 2px black;
+}
+.SelectTrigger[data-placeholder] {
+  color: var(--seed-palette-color-base-800);
+}
+
+.SelectIcon {
+  color: var(--seed-palette-color-base-1000);
+}
+
+.SelectContent {
+  overflow: hidden;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+}
+
+.SelectViewport {
+  padding: 5px;
+}
+
+.SelectItem {
+  font-size: 13px;
+  line-height: 1;
+  color: var(--seed-palette-color-base-1000);
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  height: 25px;
+  padding: 0 35px 0 25px;
+  position: relative;
+  user-select: none;
+}
+.SelectItem[data-disabled] {
+  color: var(--seed-palette-color-blue-800);
+  pointer-events: none;
+}
+.SelectItem[data-highlighted] {
+  outline: none;
+  background-color: var(--seed-palette-color-base-800);
+  color: var(--seed-color-violet-1);
+}
+
+.SelectLabel {
+  padding: 0 25px;
+  font-size: 12px;
+  line-height: 25px;
+  color: var(--seed-palette-color-blue-1000);
+}
+
+.SelectSeparator {
+  height: 1px;
+  background-color: var(--seed-palette-color-base-500);
+  margin: 5px;
+}
+
+.SelectItemIndicator {
+  position: absolute;
+  left: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.SelectScrollButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 25px;
+  background-color: white;
+  color: var(--seed-palette-color-base-1000);
+  cursor: default;
+}
+
+.toggle {
+  width: 52px;
+  height: 28px;
+  background-color: var(--seed-palette-color-base-400);
+  border-radius: var(--seed-rounding-500);
+  position: relative;
+}
+.toggle[data-state=checked] {
+  background-color: var(--seed-brand-color-primary);
+}
+
+.toggle-thumb {
+  display: block;
+  width: 22px;
+  height: 22px;
+  background-color: var(--seed-ui-color-icon-white);
+  border-radius: var(--seed-rounding-400);
+  transition: transform 100ms;
+  transform: translateX(4px);
+  will-change: transform;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
+}
+.toggle-thumb[data-state=checked] {
+  transform: translateX(26px);
+}
+
+.popup {
+  background-color: var(--seed-ui-color-background-white);
+  border-radius: 16px;
+  box-shadow: 0px 4px 16px 0px rgba(109, 109, 109, 0.07);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  max-width: 450px;
+  max-height: 85vh;
+  padding: 24px 16px;
+  animation: popup-content-show 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  overflow-y: auto;
+}
+.popup:focus {
+  outline: none;
+}
+.popup--actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 24px;
+}
+.popup--actions > * {
+  flex: 1;
+}
+.popup--actions-typeB {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+.popup--actions-left {
+  min-width: 76px;
+  flex: 0 0 auto;
+}
+.popup--actions-right {
+  flex: 1 1 auto;
+}
+@keyframes popup-overlay-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes popup-content-show {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
+:root {
+  --input-transition: 0.2s ease-in-out;
+}
+
+.input-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.input-wrapper.input--display-line .input {
+  border: 1px solid var(--seed-ui-color-line-medium);
+  border-radius: 0;
+}
+.input-wrapper.input--display-line .input:focus {
+  border-bottom-color: var(--seed-brand-color-primary);
+}
+.input-wrapper.input--display-line .input:hover:not(:disabled) {
+  border-bottom-color: var(--seed-brand-color-primary);
+}
+.input-wrapper.input--display-box .input {
+  border: 1px solid var(--seed-ui-color-line-medium);
+  border-radius: var(--seed-spacing-300);
+}
+.input-wrapper.input--display-box .input:focus {
+  border-color: var(--seed-brand-color-primary);
+}
+.input-wrapper.input--display-box .input:hover:not(:disabled) {
+  border-color: var(--seed-brand-color-primary);
+}
+.input-wrapper.input--error .input {
+  border-color: var(--seed-brand-color-point2);
+}
+.input-wrapper.input--error .input:focus {
+  border-color: var(--seed-brand-color-point2);
+}
+.input-wrapper.input--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.input-wrapper.input--disabled .input {
+  border: 1px solid var(--seed-ui-color-line-medium);
+  color: var(--seed-ui-color-text-disabled);
+}
+
+.input {
+  width: 100%;
+  padding: 17px var(--seed-spacing-500);
+  height: var(--seed-font-line-height-lg);
+  font-size: var(--seed-font-size-sm);
+  line-height: var(--seed-font-size-sm);
+  background: var(--seed-ui-color-background-white);
+  color: var(--seed-ui-color-text-black);
+  transition: all var(--input-transition);
+}
+.input:focus {
+  outline: none;
+}
+.input[type=file] {
+  cursor: pointer;
+  color: transparent;
+}
+.input[type=file]::-webkit-file-upload-button {
+  visibility: hidden;
+  width: 0;
+}
+.input[type=file]::before {
+  content: "파일 선택";
+  color: var(--seed-ui-color-text-lite);
+}
+.input[type=file].has-file::before {
+  content: "파일 선택 완료";
+  color: var(--seed-ui-color-text-black);
+}
+.input[type=file]:disabled::before {
+  background: var(--seed-ui-color-background-guide);
+  color: var(--seed-ui-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.input--action {
+  position: absolute;
+  right: var(--seed-spacing-500);
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--seed-ui-color-text-lite);
+}
+.input--action:hover:not(:disabled) {
+  color: var(--seed-ui-color-text-dark);
+}
+.input--action.input--action-link {
+  height: 24px;
+}
+.input--action.input--close {
+  height: 16px;
+}
+
+.tabs {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs--list,
+.tabs--trigger,
+.tabs--indicator {
+  box-sizing: border-box;
+}
+
+.tabs--list-wrapper {
+  position: relative;
+}
+
+.tabs--list {
+  display: flex;
+  height: 48px;
+  padding: var(--seed-spacing-200);
+  gap: var(--seed-spacing-200);
+  border-radius: var(--seed-rounding-500);
+  background-color: var(--seed-ui-color-background-chips);
+}
+
+.tabs--indicator {
+  position: absolute;
+  top: var(--seed-spacing-200);
+  left: 0;
+  height: calc(48px - var(--seed-spacing-200) * 2);
+  box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.08);
+  background-color: var(--seed-ui-color-background-white);
+  border-radius: var(--seed-rounding-500);
+  transition: all 0.2s ease-in-out;
+  z-index: 0;
+}
+
+.tabs--trigger {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--seed-font-size-s);
+  border-radius: var(--seed-rounding-400);
+  transition: all 0.2s ease-in-out;
+  z-index: 1;
+}
+.tabs--trigger[data-state=inactive] {
+  color: var(--seed-ui-color-text-lite);
+  font-weight: var(--seed-font-weight-400);
+}
+.tabs--trigger[data-state=active] {
+  color: var(--seed-ui-color-text-black);
+  font-weight: var(--seed-font-weight-700);
+}
+.toggle {
+  width: 52px;
+  height: 28px;
+  background-color: var(--seed-palette-color-base-400);
+  border-radius: var(--seed-rounding-500);
+  position: relative;
+}
+.toggle[data-state=checked] {
+  background-color: var(--seed-brand-color-primary);
+}
+
+.toggle-thumb {
+  display: block;
+  width: 22px;
+  height: 22px;
+  background-color: var(--seed-ui-color-icon-white);
+  border-radius: var(--seed-rounding-400);
+  transition: transform 100ms;
+  transform: translateX(4px);
+  will-change: transform;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
+}
+.toggle-thumb[data-state=checked] {
+  transform: translateX(26px);
+}
+.popup {
+  background-color: var(--seed-ui-color-background-white);
+  border-radius: 16px;
+  box-shadow: 0px 4px 16px 0px rgba(109, 109, 109, 0.07);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  max-width: 450px;
+  max-height: 85vh;
+  padding: 24px 16px;
+  animation: popup-content-show 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  overflow-y: auto;
+}
+.popup:focus {
+  outline: none;
+}
+.popup--actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 24px;
+}
+.popup--actions > * {
+  flex: 1;
+}
+.popup--actions-typeB {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+.popup--actions-left {
+  min-width: 76px;
+  flex: 0 0 auto;
+}
+.popup--actions-right {
+  flex: 1 1 auto;
+}
+@keyframes popup-overlay-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes popup-content-show {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+@charset "UTF-8";
+:root {
+  --input-transition: 0.2s ease-in-out;
+}
+
+.input-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.input-wrapper.input--display-line .input {
+  border: 1px solid var(--seed-ui-color-line-medium);
+  border-radius: 0;
+}
+.input-wrapper.input--display-line .input:focus {
+  border-bottom-color: var(--seed-brand-color-primary);
+}
+.input-wrapper.input--display-line .input:hover:not(:disabled) {
+  border-bottom-color: var(--seed-brand-color-primary);
+}
+.input-wrapper.input--display-box .input {
+  border: 1px solid var(--seed-ui-color-line-medium);
+  border-radius: var(--seed-spacing-300);
+}
+.input-wrapper.input--display-box .input:focus {
+  border-color: var(--seed-brand-color-primary);
+}
+.input-wrapper.input--display-box .input:hover:not(:disabled) {
+  border-color: var(--seed-brand-color-primary);
+}
+.input-wrapper.input--error .input {
+  border-color: var(--seed-brand-color-point2);
+}
+.input-wrapper.input--error .input:focus {
+  border-color: var(--seed-brand-color-point2);
+}
+.input-wrapper.input--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.input-wrapper.input--disabled .input {
+  border: 1px solid var(--seed-ui-color-line-medium);
+  color: var(--seed-ui-color-text-disabled);
+}
+
+.input {
+  width: 100%;
+  padding: 17px var(--seed-spacing-500);
+  height: var(--seed-font-line-height-lg);
+  font-size: var(--seed-font-size-sm);
+  line-height: var(--seed-font-size-sm);
+  background: var(--seed-ui-color-background-white);
+  color: var(--seed-ui-color-text-black);
+  transition: all var(--input-transition);
+}
+.input:focus {
+  outline: none;
+}
+.input[type=file] {
+  cursor: pointer;
+  color: transparent;
+}
+.input[type=file]::-webkit-file-upload-button {
+  visibility: hidden;
+  width: 0;
+}
+.input[type=file]::before {
+  content: "파일 선택";
+  color: var(--seed-ui-color-text-lite);
+}
+.input[type=file].has-file::before {
+  content: "파일 선택 완료";
+  color: var(--seed-ui-color-text-black);
+}
+.input[type=file]:disabled::before {
+  background: var(--seed-ui-color-background-guide);
+  color: var(--seed-ui-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.input--action {
+  position: absolute;
+  right: var(--seed-spacing-500);
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--seed-ui-color-text-lite);
+}
+.input--action:hover:not(:disabled) {
+  color: var(--seed-ui-color-text-dark);
+}
+.input--action.input--action-link {
+  height: 24px;
+}
+.input--action.input--close {
+  height: 16px;
+}
+.tabs {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs--list,
+.tabs--trigger,
+.tabs--indicator {
+  box-sizing: border-box;
+}
+
+.tabs--list-wrapper {
+  position: relative;
+}
+
+.tabs--list {
+  display: flex;
+  height: 48px;
+  padding: var(--seed-spacing-200);
+  gap: var(--seed-spacing-200);
+  border-radius: var(--seed-rounding-500);
+  background-color: var(--seed-ui-color-background-chips);
+}
+
+.tabs--indicator {
+  position: absolute;
+  top: var(--seed-spacing-200);
+  left: 0;
+  height: calc(48px - var(--seed-spacing-200) * 2);
+  box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.08);
+  background-color: var(--seed-ui-color-background-white);
+  border-radius: var(--seed-rounding-500);
+  transition: all 0.2s ease-in-out;
+  z-index: 0;
+}
+
+.tabs--trigger {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--seed-font-size-s);
+  border-radius: var(--seed-rounding-400);
+  transition: all 0.2s ease-in-out;
+  z-index: 1;
+}
+.tabs--trigger[data-state=inactive] {
+  color: var(--seed-ui-color-text-lite);
+  font-weight: var(--seed-font-weight-400);
+}
+.tabs--trigger[data-state=active] {
+  color: var(--seed-ui-color-text-black);
+  font-weight: var(--seed-font-weight-700);
+}