@likelion-design/ui 0.1.6 → 0.1.8

package/dist/index.css

@@ -1,700 +1,3 @@
-/* src/styles.css */
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-static-white: #ffffff;
-  --color-static-black: #000000;
-  --color-static-gradation-primary:
-    linear-gradient(
-      
-      180deg,
-      #ffc74e 0%,
-      var(--color-primary-500) 100% );
-  --color-static-gradation-dark:
-    radial-gradient(
-      
-      circle,
-      #191f28 0%,
-      #993a00 100% );
-  --color-static-gradation-black:
-    linear-gradient(
-      
-      180deg,
-      var(--color-static-black) 0%,
-      var(--color-static-black) 100% );
-  --color-static-gradation-white:
-    linear-gradient(
-      
-      180deg,
-      var(--color-static-white) 0%,
-      var(--color-static-white) 100% );
-  --color-static-dim: rgba(0, 0, 0, 0.5);
-  --color-primary-50: #ffefe5;
-  --color-primary-100: #ffdfcc;
-  --color-primary-200: #ffbf99;
-  --color-primary-300: #ffa066;
-  --color-primary-400: #ff8033;
-  --color-primary-500: #ff6000;
-  --color-primary-600: #cc4d00;
-  --color-primary-700: #993a00;
-  --color-primary-800: #662600;
-  --color-primary-900: #4d1d00;
-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7ea;
-  --color-gray-300: #d1d6dc;
-  --color-gray-400: #b1b8c0;
-  --color-gray-500: #8a95a0;
-  --color-gray-600: #6b7583;
-  --color-gray-700: #4e5967;
-  --color-gray-800: #333d4b;
-  --color-gray-850: #262f3c;
-  --color-gray-900: #191f28;
-  --color-yellow-50: #fef7cd;
-  --color-yellow-100: #feee9a;
-  --color-yellow-200: #fde876;
-  --color-yellow-300: #fdd600;
-  --color-yellow-400: #efc100;
-  --color-yellow-500: #be9b00;
-  --color-yellow-600: #8c7300;
-  --color-yellow-700: #735f00;
-  --color-yellow-800: #574a00;
-  --color-yellow-900: #3c3200;
-  --color-lightgreen-50: #e9f7d4;
-  --color-lightgreen-100: #d7f2b1;
-  --color-lightgreen-200: #c7ec93;
-  --color-lightgreen-300: #b0d55c;
-  --color-lightgreen-400: #89c81b;
-  --color-lightgreen-500: #79b116;
-  --color-lightgreen-600: #4a7f05;
-  --color-lightgreen-700: #2d660a;
-  --color-lightgreen-800: #144d14;
-  --color-lightgreen-900: #0a3c02;
-  --color-green-50: #d3f8ef;
-  --color-green-100: #c4f8eb;
-  --color-green-200: #b4edde;
-  --color-green-300: #7eddcd;
-  --color-green-400: #4fc8b8;
-  --color-green-500: #0da796;
-  --color-green-600: #05806d;
-  --color-green-700: #006d5d;
-  --color-green-800: #005448;
-  --color-green-900: #003c32;
-  --color-blue-50: #dbf1ff;
-  --color-blue-100: #ccebff;
-  --color-blue-200: #c0e6ff;
-  --color-blue-300: #80c6fb;
-  --color-blue-400: #6daae7;
-  --color-blue-500: #3d94ff;
-  --color-blue-600: #2077e5;
-  --color-blue-700: #045ca9;
-  --color-blue-800: #004875;
-  --color-blue-900: #1d3649;
-  --color-purple-50: #f5e5ff;
-  --color-purple-100: #f0d6ff;
-  --color-purple-200: #eac7ff;
-  --color-purple-300: #d7aaff;
-  --color-purple-400: #ba8ff7;
-  --color-purple-500: #af79dd;
-  --color-purple-600: #9855d4;
-  --color-purple-700: #734098;
-  --color-purple-800: #5d327b;
-  --color-purple-900: #412356;
-  --color-pink-50: #ffe5ff;
-  --color-pink-100: #ffd2ff;
-  --color-pink-200: #ffc2ff;
-  --color-pink-300: #ff9eee;
-  --color-pink-400: #ef81ce;
-  --color-pink-500: #d3689f;
-  --color-pink-600: #c14180;
-  --color-pink-700: #a02c6d;
-  --color-pink-800: #7c1c58;
-  --color-pink-900: #601146;
-  --color-red-50: #ffe5ec;
-  --color-red-100: #ffccd8;
-  --color-red-200: #ffb8c9;
-  --color-red-300: #ffa5b4;
-  --color-red-400: #f7858e;
-  --color-red-500: #ea6565;
-  --color-red-600: #e12337;
-  --color-red-700: #ad1625;
-  --color-red-800: #8c101c;
-  --color-red-900: #6e0a1e;
-  --color-semantic-fg-primary: var(--color-primary-500);
-  --color-semantic-fg-pressed: var(--color-primary-600);
-  --color-semantic-fg-inverted: var(--color-static-white);
-  --color-semantic-fg-strong: var(--color-static-black);
-  --color-semantic-fg-normal: var(--color-gray-800);
-  --color-semantic-fg-neutral: var(--color-gray-700);
-  --color-semantic-fg-alternative: var(--color-gray-600);
-  --color-semantic-fg-assistive: var(--color-gray-500);
-  --color-semantic-fg-disabled: var(--color-gray-400);
-  --color-semantic-fg-yellow: var(--color-yellow-500);
-  --color-semantic-fg-lightgreen: var(--color-lightgreen-500);
-  --color-semantic-fg-green: var(--color-green-500);
-  --color-semantic-fg-blue: var(--color-blue-500);
-  --color-semantic-fg-purple: var(--color-purple-500);
-  --color-semantic-fg-pink: var(--color-pink-500);
-  --color-semantic-fg-red: var(--color-red-500);
-  --color-semantic-fg-black: var(--color-static-black);
-  --color-semantic-fg-white: var(--color-static-white);
-  --color-semantic-bg-normal: var(--color-gray-100);
-  --color-semantic-bg-normal-hovered: var(--color-gray-50);
-  --color-semantic-bg-normal-alternative: var(--color-gray-200);
-  --color-semantic-bg-normal-assistive: var(--color-gray-50);
-  --color-semantic-bg-normal-disabled: var(--color-gray-100);
-  --color-semantic-bg-inverted: var(--color-gray-900);
-  --color-semantic-bg-hovered: var(--color-gray-850);
-  --color-semantic-bg-primary: var(--color-primary-500);
-  --color-semantic-bg-primary-hovered: var(--color-primary-600);
-  --color-semantic-bg-primary-weak: var(--color-primary-50);
-  --color-semantic-bg-lightgreen: var(--color-lightgreen-50);
-  --color-semantic-bg-yellow: var(--color-yellow-50);
-  --color-semantic-bg-green: var(--color-green-50);
-  --color-semantic-bg-blue: var(--color-blue-50);
-  --color-semantic-bg-purple: var(--color-purple-50);
-  --color-semantic-bg-pink: var(--color-pink-50);
-  --color-semantic-bg-red: var(--color-red-50);
-  --color-semantic-bg-black: var(--color-static-black);
-  --color-semantic-bg-white: var(--color-static-white);
-  --color-semantic-bg-week-primary: rgba(255, 96, 0, 0.08);
-  --color-semantic-bg-week-primary-hovered: rgba(255, 96, 0, 0.16);
-  --color-semantic-bg-week-neutral-dark: rgba(0, 0, 0, 0.08);
-  --color-semantic-bg-week-neutral-dark-hovered: rgba(0, 0, 0, 0.16);
-  --color-semantic-bg-week-neutral-light: rgba(255, 255, 255, 0.08);
-  --color-semantic-bg-week-neutral-light-hovered: rgba(255, 255, 255, 0.16);
-  --color-semantic-border-primary: var(--color-primary-500);
-  --color-semantic-border-strong: var(--color-gray-800);
-  --color-semantic-border-normal: var(--color-gray-300);
-  --color-semantic-border-weak: var(--color-gray-200);
-  --color-semantic-border-white: var(--color-static-white);
-  --color-semantic-border-black: var(--color-static-black);
-  --color-semantic-border-inverted: var(--color-gray-700);
-  --color-semantic-border-inverted-strong: var(--color-gray-600);
-  --color-semantic-info-negative: var(--color-red-600);
-  --color-semantic-info-positive: var(--color-green-500);
-  --color-semantic-info-black: var(--color-static-black);
-  --color-semantic-info-white: var(--color-static-white);
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-.storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family:
-    "Nunito Sans",
-    "Helvetica Neue",
-    Helvetica,
-    Arial,
-    sans-serif;
-}
-.storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}
-.action-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-family:
-    "Pretendard",
-    -apple-system,
-    BlinkMacSystemFont,
-    system-ui,
-    sans-serif;
-  font-weight: 600;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: fit-content;
-  white-space: nowrap;
-}
-.action-button--xlarge {
-  height: 56px;
-  padding: 0 24px;
-  font-size: 17px;
-  min-width: 34px;
-}
-.action-button--large {
-  height: 48px;
-  padding: 0 24px;
-  font-size: 17px;
-  min-width: 34px;
-}
-.action-button--medium {
-  height: 36px;
-  padding: 0 20px;
-  font-size: 15px;
-  min-width: 34px;
-}
-.action-button--small {
-  height: 28px;
-  padding: 0 16px;
-  font-size: 13px;
-  min-width: 30px;
-}
-.action-button--primary.action-button--solid {
-  background-color: var(--color-semantic-bg-primary);
-  color: var(--color-semantic-fg-inverted);
-}
-.action-button--primary.action-button--solid:hover:not(:disabled),
-.action-button--primary.action-button--solid.action-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-primary-hovered);
-}
-.action-button--primary.action-button--solid:disabled,
-.action-button--primary.action-button--solid.action-button--disabled {
-  background-color: var(--color-semantic-bg-normal-disabled);
-  color: var(--color-semantic-fg-disabled);
-  cursor: not-allowed;
-}
-.action-button--primary.action-button--outline {
-  background-color: transparent;
-  color: var(--color-semantic-fg-primary);
-  border: 1px solid var(--color-semantic-border-normal);
-}
-.action-button--primary.action-button--outline:hover:not(:disabled),
-.action-button--primary.action-button--outline.action-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-normal-hovered);
-}
-.action-button--primary.action-button--outline:disabled,
-.action-button--primary.action-button--outline.action-button--disabled {
-  color: var(--color-semantic-fg-disabled);
-  border-color: var(--color-semantic-border-weak);
-  background-color: var(--color-semantic-bg-white);
-  cursor: not-allowed;
-}
-.action-button--primary.action-button--ghost {
-  background-color: transparent;
-  color: var(--color-semantic-fg-primary);
-}
-.action-button--primary.action-button--ghost:hover:not(:disabled),
-.action-button--primary.action-button--ghost.action-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-primary-weak);
-}
-.action-button--primary.action-button--ghost:disabled,
-.action-button--primary.action-button--ghost.action-button--disabled {
-  color: var(--color-semantic-fg-disabled);
-  background-color: var(--color-semantic-bg-white);
-  cursor: not-allowed;
-}
-.action-button--neutral.action-button--solid {
-  background-color: var(--color-semantic-bg-inverted);
-  color: var(--color-semantic-fg-white);
-}
-.action-button--neutral.action-button--solid:hover:not(:disabled),
-.action-button--neutral.action-button--solid.action-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-inverted);
-}
-.action-button--neutral.action-button--solid:disabled,
-.action-button--neutral.action-button--solid.action-button--disabled {
-  background-color: var(--color-semantic-bg-normal-disabled);
-  color: var(--color-semantic-fg-disabled);
-  cursor: not-allowed;
-}
-.action-button--neutral.action-button--outline {
-  background-color: transparent;
-  color: var(--color-semantic-fg-normal);
-  border: 1px solid var(--color-semantic-border-normal);
-}
-.action-button--neutral.action-button--outline:hover:not(:disabled),
-.action-button--neutral.action-button--outline.action-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-normal-hovered);
-}
-.action-button--neutral.action-button--outline:disabled,
-.action-button--neutral.action-button--outline.action-button--disabled {
-  color: var(--color-semantic-fg-disabled);
-  border-color: var(--color-semantic-border-weak);
-  background-color: var(--color-semantic-bg-white);
-  cursor: not-allowed;
-}
-.action-button--neutral.action-button--ghost {
-  background-color: transparent;
-  color: var(--color-semantic-fg-normal);
-}
-.action-button--neutral.action-button--ghost:hover:not(:disabled),
-.action-button--neutral.action-button--ghost.action-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-normal-hovered);
-}
-.action-button--neutral.action-button--ghost:disabled,
-.action-button--neutral.action-button--ghost.action-button--disabled {
-  color: var(--color-semantic-fg-disabled);
-  cursor: not-allowed;
-}
-.action-button--secondary.action-button--solid {
-  background-color: var(--color-semantic-bg-normal);
-  color: var(--color-semantic-fg-normal);
-}
-.action-button--secondary.action-button--solid:hover:not(:disabled),
-.action-button--secondary.action-button--solid.action-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-normal-hovered);
-}
-.action-button--secondary.action-button--solid:disabled,
-.action-button--secondary.action-button--solid.action-button--disabled {
-  background-color: var(--color-semantic-bg-normal-disabled);
-  color: var(--color-semantic-fg-disabled);
-  cursor: not-allowed;
-}
-.action-button--loading {
-  position: relative;
-  pointer-events: none;
-}
-.action-button--loading .action-button__content {
-  opacity: 0;
-}
-.action-button__content {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-.action-button__spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.action-button__spinner-svg {
-  width: 20px;
-  height: 20px;
-  animation: spin 1s linear infinite;
-}
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-.action-button__spinner-circle {
-  opacity: 1;
-}
-.action-button--primary.action-button--solid.action-button--loading {
-  background-color: var(--color-semantic-bg-primary-hovered);
-  color: var(--color-semantic-fg-inverted);
-}
-.action-button--primary.action-button--outline.action-button--loading {
-  background-color: var(--color-semantic-bg-normal-hovered);
-  color: var(--color-semantic-fg-primary);
-}
-.action-button--primary.action-button--ghost.action-button--loading {
-  background-color: var(--color-semantic-bg-primary-weak);
-  color: var(--color-semantic-fg-primary);
-}
-.action-button--neutral.action-button--solid.action-button--loading {
-  background-color: var(--color-semantic-bg-inverted);
-  color: var(--color-semantic-fg-white);
-}
-.action-button--neutral.action-button--outline.action-button--loading {
-  background-color: var(--color-semantic-bg-normal-hovered);
-  color: var(--color-semantic-fg-normal);
-}
-.action-button--neutral.action-button--ghost.action-button--loading {
-  background-color: var(--color-semantic-bg-normal-hovered);
-  color: var(--color-semantic-fg-normal);
-}
-.action-button--secondary.action-button--solid.action-button--loading {
-  background-color: var(--color-semantic-bg-normal-hovered);
-  color: var(--color-semantic-fg-normal);
-}
-.action-button__prefix-icon,
-.action-button__suffix-icon {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-.action-button--small .action-button__prefix-icon,
-.action-button--small .action-button__suffix-icon {
-  width: 16px;
-  height: 16px;
-}
-.action-button--medium .action-button__prefix-icon,
-.action-button--medium .action-button__suffix-icon {
-  width: 18px;
-  height: 18px;
-}
-.action-button--large .action-button__prefix-icon,
-.action-button--large .action-button__suffix-icon {
-  width: 20px;
-  height: 20px;
-}
-.action-button--xlarge .action-button__prefix-icon,
-.action-button--xlarge .action-button__suffix-icon {
-  width: 24px;
-  height: 24px;
-}
-.action-button__label {
-  display: inline-flex;
-  align-items: center;
-}
-.icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family:
-    "Pretendard",
-    -apple-system,
-    BlinkMacSystemFont,
-    system-ui,
-    sans-serif;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  padding: 0;
-  flex-shrink: 0;
-}
-.icon-button--xlarge {
-  width: 56px;
-  height: 56px;
-  border-radius: 8px;
-}
-.icon-button--large {
-  width: 48px;
-  height: 48px;
-  border-radius: 6px;
-}
-.icon-button--medium {
-  width: 36px;
-  height: 36px;
-  border-radius: 4px;
-}
-.icon-button--small {
-  width: 28px;
-  height: 28px;
-  border-radius: 4px;
-}
-.icon-button__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-.icon-button--xlarge .icon-button__icon,
-.icon-button--large .icon-button__icon {
-  width: 24px;
-  height: 24px;
-}
-.icon-button--medium .icon-button__icon {
-  width: 20px;
-  height: 20px;
-}
-.icon-button--small .icon-button__icon {
-  width: 16px;
-  height: 16px;
-}
-.icon-button--primary.icon-button--solid {
-  background-color: var(--color-semantic-bg-primary);
-  color: var(--color-semantic-fg-inverted);
-}
-.icon-button--primary.icon-button--solid:hover:not(:disabled),
-.icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-primary-hovered);
-}
-.icon-button--primary.icon-button--solid:disabled,
-.icon-button--primary.icon-button--solid.icon-button--disabled {
-  background-color: var(--color-semantic-bg-normal-disabled);
-  color: var(--color-semantic-fg-disabled);
-  cursor: not-allowed;
-}
-.icon-button--primary.icon-button--outline {
-  background-color: transparent;
-  color: var(--color-semantic-fg-primary);
-  border: 1px solid var(--color-semantic-border-normal);
-}
-.icon-button--primary.icon-button--outline:hover:not(:disabled),
-.icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-normal-hovered);
-}
-.icon-button--primary.icon-button--outline:disabled,
-.icon-button--primary.icon-button--outline.icon-button--disabled {
-  color: var(--color-semantic-fg-disabled);
-  border-color: var(--color-semantic-border-weak);
-  background-color: var(--color-semantic-bg-white);
-  cursor: not-allowed;
-}
-.icon-button--primary.icon-button--weak {
-  background-color: var(--color-semantic-bg-week-primary);
-  color: var(--color-semantic-fg-primary);
-}
-.icon-button--primary.icon-button--weak:hover:not(:disabled),
-.icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-week-primary-hovered);
-}
-.icon-button--neutral.icon-button--solid {
-  background-color: var(--color-semantic-bg-inverted);
-  color: var(--color-semantic-fg-white);
-}
-.icon-button--neutral.icon-button--solid:hover:not(:disabled),
-.icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-inverted);
-}
-.icon-button--neutral.icon-button--solid:disabled,
-.icon-button--neutral.icon-button--solid.icon-button--disabled {
-  background-color: var(--color-semantic-bg-normal-disabled);
-  color: var(--color-semantic-fg-disabled);
-  cursor: not-allowed;
-}
-.icon-button--neutral.icon-button--outline {
-  background-color: transparent;
-  color: var(--color-semantic-fg-normal);
-  border: 1px solid var(--color-semantic-border-normal);
-}
-.icon-button--neutral.icon-button--outline:hover:not(:disabled),
-.icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-normal-hovered);
-}
-.icon-button--neutral.icon-button--outline:disabled,
-.icon-button--neutral.icon-button--outline.icon-button--disabled {
-  color: var(--color-semantic-fg-disabled);
-  border-color: var(--color-semantic-border-weak);
-  background-color: var(--color-semantic-bg-white);
-  cursor: not-allowed;
-}
-.icon-button--neutral.icon-button--weak {
-  background-color: var(--color-semantic-bg-week-neutral-dark);
-  color: var(--color-semantic-fg-normal);
-}
-.icon-button--neutral.icon-button--weak:hover:not(:disabled),
-.icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled) {
-  background-color: var(--color-semantic-bg-week-neutral-dark-hovered);
-}
-.icon-button--neutral.icon-button--weak.dark {
-  color: var(--color-semantic-fg-white);
-}
-.icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),
-.icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(:disabled) {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.storybook-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  font-family:
-    "Nunito Sans",
-    "Helvetica Neue",
-    Helvetica,
-    Arial,
-    sans-serif;
-}
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
-.storybook-header h1 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 6px 0 6px 10px;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-}
-.storybook-header button + button {
-  margin-left: 10px;
-}
-.storybook-header .welcome {
-  margin-right: 10px;
-  color: #333;
-  font-size: 14px;
-}
-.storybook-page {
-  margin: 0 auto;
-  padding: 48px 20px;
-  max-width: 600px;
-  color: #333;
-  font-size: 14px;
-  line-height: 24px;
-  font-family:
-    "Nunito Sans",
-    "Helvetica Neue",
-    Helvetica,
-    Arial,
-    sans-serif;
-}
-.storybook-page h2 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 0 0 4px;
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-}
-.storybook-page p {
-  margin: 1em 0;
-}
-.storybook-page a {
-  color: inherit;
-}
-.storybook-page ul {
-  margin: 1em 0;
-  padding-left: 30px;
-}
-.storybook-page li {
-  margin-bottom: 8px;
-}
-.storybook-page .tip {
-  display: inline-block;
-  vertical-align: top;
-  margin-right: 10px;
-  border-radius: 1em;
-  background: #e7fdd8;
-  padding: 4px 12px;
-  color: #357a14;
-  font-weight: 700;
-  font-size: 11px;
-  line-height: 12px;
-}
-.storybook-page .tip-wrapper {
-  margin-top: 40px;
-  margin-bottom: 40px;
-  font-size: 13px;
-  line-height: 20px;
-}
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  vertical-align: top;
-  margin-top: 3px;
-  margin-right: 4px;
-  width: 12px;
-  height: 12px;
-}
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}
+:root{--background: #ffffff;--foreground: #171717;--color-background: var(--background);--color-foreground: var(--foreground);--font-sans: var(--font-geist-sans);--font-mono: var(--font-geist-mono);--color-static-white: #ffffff;--color-static-black: #000000;--color-static-gradation-primary: linear-gradient( 180deg, #ffc74e 0%, var(--color-primary-500) 100% );--color-static-gradation-dark: radial-gradient( circle, #191f28 0%, #993a00 100% );--color-static-gradation-black: linear-gradient( 180deg, var(--color-static-black) 0%, var(--color-static-black) 100% );--color-static-gradation-white: linear-gradient( 180deg, var(--color-static-white) 0%, var(--color-static-white) 100% );--color-static-dim: rgba(0, 0, 0, .5);--color-primary-50: #ffefe5;--color-primary-100: #ffdfcc;--color-primary-200: #ffbf99;--color-primary-300: #ffa066;--color-primary-400: #ff8033;--color-primary-500: #ff6000;--color-primary-600: #cc4d00;--color-primary-700: #993a00;--color-primary-800: #662600;--color-primary-900: #4d1d00;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7ea;--color-gray-300: #d1d6dc;--color-gray-400: #b1b8c0;--color-gray-500: #8a95a0;--color-gray-600: #6b7583;--color-gray-700: #4e5967;--color-gray-800: #333d4b;--color-gray-850: #262f3c;--color-gray-900: #191f28;--color-yellow-50: #fef7cd;--color-yellow-100: #feee9a;--color-yellow-200: #fde876;--color-yellow-300: #fdd600;--color-yellow-400: #efc100;--color-yellow-500: #be9b00;--color-yellow-600: #8c7300;--color-yellow-700: #735f00;--color-yellow-800: #574a00;--color-yellow-900: #3c3200;--color-lightgreen-50: #e9f7d4;--color-lightgreen-100: #d7f2b1;--color-lightgreen-200: #c7ec93;--color-lightgreen-300: #b0d55c;--color-lightgreen-400: #89c81b;--color-lightgreen-500: #79b116;--color-lightgreen-600: #4a7f05;--color-lightgreen-700: #2d660a;--color-lightgreen-800: #144d14;--color-lightgreen-900: #0a3c02;--color-green-50: #d3f8ef;--color-green-100: #c4f8eb;--color-green-200: #b4edde;--color-green-300: #7eddcd;--color-green-400: #4fc8b8;--color-green-500: #0da796;--color-green-600: #05806d;--color-green-700: #006d5d;--color-green-800: #005448;--color-green-900: #003c32;--color-blue-50: #dbf1ff;--color-blue-100: #ccebff;--color-blue-200: #c0e6ff;--color-blue-300: #80c6fb;--color-blue-400: #6daae7;--color-blue-500: #3d94ff;--color-blue-600: #2077e5;--color-blue-700: #045ca9;--color-blue-800: #004875;--color-blue-900: #1d3649;--color-purple-50: #f5e5ff;--color-purple-100: #f0d6ff;--color-purple-200: #eac7ff;--color-purple-300: #d7aaff;--color-purple-400: #ba8ff7;--color-purple-500: #af79dd;--color-purple-600: #9855d4;--color-purple-700: #734098;--color-purple-800: #5d327b;--color-purple-900: #412356;--color-pink-50: #ffe5ff;--color-pink-100: #ffd2ff;--color-pink-200: #ffc2ff;--color-pink-300: #ff9eee;--color-pink-400: #ef81ce;--color-pink-500: #d3689f;--color-pink-600: #c14180;--color-pink-700: #a02c6d;--color-pink-800: #7c1c58;--color-pink-900: #601146;--color-red-50: #ffe5ec;--color-red-100: #ffccd8;--color-red-200: #ffb8c9;--color-red-300: #ffa5b4;--color-red-400: #f7858e;--color-red-500: #ea6565;--color-red-600: #e12337;--color-red-700: #ad1625;--color-red-800: #8c101c;--color-red-900: #6e0a1e;--color-semantic-fg-primary: var(--color-primary-500);--color-semantic-fg-pressed: var(--color-primary-600);--color-semantic-fg-inverted: var(--color-static-white);--color-semantic-fg-strong: var(--color-static-black);--color-semantic-fg-normal: var(--color-gray-800);--color-semantic-fg-neutral: var(--color-gray-700);--color-semantic-fg-alternative: var(--color-gray-600);--color-semantic-fg-assistive: var(--color-gray-500);--color-semantic-fg-disabled: var(--color-gray-400);--color-semantic-fg-yellow: var(--color-yellow-500);--color-semantic-fg-lightgreen: var(--color-lightgreen-500);--color-semantic-fg-green: var(--color-green-500);--color-semantic-fg-blue: var(--color-blue-500);--color-semantic-fg-purple: var(--color-purple-500);--color-semantic-fg-pink: var(--color-pink-500);--color-semantic-fg-red: var(--color-red-500);--color-semantic-fg-black: var(--color-static-black);--color-semantic-fg-white: var(--color-static-white);--color-semantic-bg-normal: var(--color-gray-100);--color-semantic-bg-normal-hovered: var(--color-gray-50);--color-semantic-bg-normal-alternative: var(--color-gray-200);--color-semantic-bg-normal-assistive: var(--color-gray-50);--color-semantic-bg-normal-disabled: var(--color-gray-100);--color-semantic-bg-inverted: var(--color-gray-900);--color-semantic-bg-hovered: var(--color-gray-850);--color-semantic-bg-primary: var(--color-primary-500);--color-semantic-bg-primary-hovered: var(--color-primary-600);--color-semantic-bg-primary-weak: var(--color-primary-50);--color-semantic-bg-lightgreen: var(--color-lightgreen-50);--color-semantic-bg-yellow: var(--color-yellow-50);--color-semantic-bg-green: var(--color-green-50);--color-semantic-bg-blue: var(--color-blue-50);--color-semantic-bg-purple: var(--color-purple-50);--color-semantic-bg-pink: var(--color-pink-50);--color-semantic-bg-red: var(--color-red-50);--color-semantic-bg-black: var(--color-static-black);--color-semantic-bg-white: var(--color-static-white);--color-semantic-bg-week-primary: rgba(255, 96, 0, .08);--color-semantic-bg-week-primary-hovered: rgba(255, 96, 0, .16);--color-semantic-bg-week-neutral-dark: rgba(0, 0, 0, .08);--color-semantic-bg-week-neutral-dark-hovered: rgba(0, 0, 0, .16);--color-semantic-bg-week-neutral-light: rgba(255, 255, 255, .08);--color-semantic-bg-week-neutral-light-hovered: rgba(255, 255, 255, .16);--color-semantic-border-primary: var(--color-primary-500);--color-semantic-border-strong: var(--color-gray-800);--color-semantic-border-normal: var(--color-gray-300);--color-semantic-border-weak: var(--color-gray-200);--color-semantic-border-white: var(--color-static-white);--color-semantic-border-black: var(--color-static-black);--color-semantic-border-inverted: var(--color-gray-700);--color-semantic-border-inverted-strong: var(--color-gray-600);--color-semantic-info-negative: var(--color-red-600);--color-semantic-info-positive: var(--color-green-500);--color-semantic-info-black: var(--color-static-black);--color-semantic-info-white: var(--color-static-white)}@media(prefers-color-scheme:dark){:root{--background: #0a0a0a;--foreground: #ededed}}.storybook-button{display:inline-block;cursor:pointer;border:0;border-radius:3em;font-weight:700;line-height:1;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button--primary{background-color:#555ab9;color:#fff}.storybook-button--secondary{box-shadow:#00000026 0 0 0 1px inset;background-color:transparent;color:#333}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:16px}.action-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:all .2s ease;min-width:fit-content;white-space:nowrap}.action-button--xlarge{height:56px;padding:0 24px;font-size:17px;min-width:34px}.action-button--large{height:48px;padding:0 24px;font-size:17px;min-width:34px}.action-button--medium{height:36px;padding:0 20px;font-size:15px;min-width:34px}.action-button--small{height:28px;padding:0 16px;font-size:13px;min-width:30px}.action-button--primary.action-button--solid{background-color:var(--color-semantic-bg-primary);color:var(--color-semantic-fg-inverted)}.action-button--primary.action-button--solid:hover:not(:disabled),.action-button--primary.action-button--solid.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-primary-hovered)}.action-button--primary.action-button--solid:disabled,.action-button--primary.action-button--solid.action-button--disabled{background-color:var(--color-semantic-bg-normal-disabled);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.action-button--primary.action-button--outline{background-color:transparent;color:var(--color-semantic-fg-primary);border:1px solid var(--color-semantic-border-normal)}.action-button--primary.action-button--outline:hover:not(:disabled),.action-button--primary.action-button--outline.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.action-button--primary.action-button--outline:disabled,.action-button--primary.action-button--outline.action-button--disabled{color:var(--color-semantic-fg-disabled);border-color:var(--color-semantic-border-weak);background-color:var(--color-semantic-bg-white);cursor:not-allowed}.action-button--primary.action-button--ghost{background-color:transparent;color:var(--color-semantic-fg-primary)}.action-button--primary.action-button--ghost:hover:not(:disabled),.action-button--primary.action-button--ghost.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-primary-weak)}.action-button--primary.action-button--ghost:disabled,.action-button--primary.action-button--ghost.action-button--disabled{color:var(--color-semantic-fg-disabled);background-color:var(--color-semantic-bg-white);cursor:not-allowed}.action-button--neutral.action-button--solid{background-color:var(--color-semantic-bg-inverted);color:var(--color-semantic-fg-white)}.action-button--neutral.action-button--solid:hover:not(:disabled),.action-button--neutral.action-button--solid.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-inverted)}.action-button--neutral.action-button--solid:disabled,.action-button--neutral.action-button--solid.action-button--disabled{background-color:var(--color-semantic-bg-normal-disabled);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.action-button--neutral.action-button--outline{background-color:transparent;color:var(--color-semantic-fg-normal);border:1px solid var(--color-semantic-border-normal)}.action-button--neutral.action-button--outline:hover:not(:disabled),.action-button--neutral.action-button--outline.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.action-button--neutral.action-button--outline:disabled,.action-button--neutral.action-button--outline.action-button--disabled{color:var(--color-semantic-fg-disabled);border-color:var(--color-semantic-border-weak);background-color:var(--color-semantic-bg-white);cursor:not-allowed}.action-button--neutral.action-button--ghost{background-color:transparent;color:var(--color-semantic-fg-normal)}.action-button--neutral.action-button--ghost:hover:not(:disabled),.action-button--neutral.action-button--ghost.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.action-button--neutral.action-button--ghost:disabled,.action-button--neutral.action-button--ghost.action-button--disabled{color:var(--color-semantic-fg-disabled);cursor:not-allowed}.action-button--secondary.action-button--solid{background-color:var(--color-semantic-bg-normal);color:var(--color-semantic-fg-normal)}.action-button--secondary.action-button--solid:hover:not(:disabled),.action-button--secondary.action-button--solid.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.action-button--secondary.action-button--solid:disabled,.action-button--secondary.action-button--solid.action-button--disabled{background-color:var(--color-semantic-bg-normal-disabled);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.action-button--loading{position:relative;pointer-events:none}.action-button--loading .action-button__content{opacity:0}.action-button__content{display:inline-flex;align-items:center;gap:8px}.action-button__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center}.action-button__spinner-svg{width:20px;height:20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.action-button__spinner-circle{opacity:1}.action-button--primary.action-button--solid.action-button--loading{background-color:var(--color-semantic-bg-primary-hovered);color:var(--color-semantic-fg-inverted)}.action-button--primary.action-button--outline.action-button--loading{background-color:var(--color-semantic-bg-normal-hovered);color:var(--color-semantic-fg-primary)}.action-button--primary.action-button--ghost.action-button--loading{background-color:var(--color-semantic-bg-primary-weak);color:var(--color-semantic-fg-primary)}.action-button--neutral.action-button--solid.action-button--loading{background-color:var(--color-semantic-bg-inverted);color:var(--color-semantic-fg-white)}.action-button--neutral.action-button--outline.action-button--loading,.action-button--neutral.action-button--ghost.action-button--loading,.action-button--secondary.action-button--solid.action-button--loading{background-color:var(--color-semantic-bg-normal-hovered);color:var(--color-semantic-fg-normal)}.action-button__prefix-icon,.action-button__suffix-icon{display:inline-flex;align-items:center;flex-shrink:0}.action-button--small .action-button__prefix-icon,.action-button--small .action-button__suffix-icon{width:16px;height:16px}.action-button--medium .action-button__prefix-icon,.action-button--medium .action-button__suffix-icon{width:18px;height:18px}.action-button--large .action-button__prefix-icon,.action-button--large .action-button__suffix-icon{width:20px;height:20px}.action-button--xlarge .action-button__prefix-icon,.action-button--xlarge .action-button__suffix-icon{width:24px;height:24px}.action-button__label{display:inline-flex;align-items:center}.icon-button{display:inline-flex;align-items:center;justify-content:center;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;border:none;cursor:pointer;transition:all .2s ease;padding:0;flex-shrink:0}.icon-button--xlarge{width:56px;height:56px;border-radius:8px}.icon-button--large{width:48px;height:48px;border-radius:6px}.icon-button--medium{width:36px;height:36px;border-radius:4px}.icon-button--small{width:28px;height:28px;border-radius:4px}.icon-button__icon{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.icon-button--xlarge .icon-button__icon,.icon-button--large .icon-button__icon{width:24px;height:24px}.icon-button--medium .icon-button__icon{width:20px;height:20px}.icon-button--small .icon-button__icon{width:16px;height:16px}.icon-button--primary.icon-button--solid{background-color:var(--color-semantic-bg-primary);color:var(--color-semantic-fg-inverted)}.icon-button--primary.icon-button--solid:hover:not(:disabled),.icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-primary-hovered)}.icon-button--primary.icon-button--solid:disabled,.icon-button--primary.icon-button--solid.icon-button--disabled{background-color:var(--color-semantic-bg-normal-disabled);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.icon-button--primary.icon-button--outline{background-color:transparent;color:var(--color-semantic-fg-primary);border:1px solid var(--color-semantic-border-normal)}.icon-button--primary.icon-button--outline:hover:not(:disabled),.icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.icon-button--primary.icon-button--outline:disabled,.icon-button--primary.icon-button--outline.icon-button--disabled{color:var(--color-semantic-fg-disabled);border-color:var(--color-semantic-border-weak);background-color:var(--color-semantic-bg-white);cursor:not-allowed}.icon-button--primary.icon-button--weak{background-color:var(--color-semantic-bg-week-primary);color:var(--color-semantic-fg-primary)}.icon-button--primary.icon-button--weak:hover:not(:disabled),.icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-week-primary-hovered)}.icon-button--neutral.icon-button--solid{background-color:var(--color-semantic-bg-inverted);color:var(--color-semantic-fg-white)}.icon-button--neutral.icon-button--solid:hover:not(:disabled),.icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-inverted)}.icon-button--neutral.icon-button--solid:disabled,.icon-button--neutral.icon-button--solid.icon-button--disabled{background-color:var(--color-semantic-bg-normal-disabled);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.icon-button--neutral.icon-button--outline{background-color:transparent;color:var(--color-semantic-fg-normal);border:1px solid var(--color-semantic-border-normal)}.icon-button--neutral.icon-button--outline:hover:not(:disabled),.icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.icon-button--neutral.icon-button--outline:disabled,.icon-button--neutral.icon-button--outline.icon-button--disabled{color:var(--color-semantic-fg-disabled);border-color:var(--color-semantic-border-weak);background-color:var(--color-semantic-bg-white);cursor:not-allowed}.icon-button--neutral.icon-button--weak{background-color:var(--color-semantic-bg-week-neutral-dark);color:var(--color-semantic-fg-normal)}.icon-button--neutral.icon-button--weak:hover:not(:disabled),.icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-week-neutral-dark-hovered)}.icon-button--neutral.icon-button--weak.dark{color:var(--color-semantic-fg-white)}.icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),.icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(:disabled){background-color:#ffffff1a}.storybook-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);padding:15px 20px;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-header svg{display:inline-block;vertical-align:top}.storybook-header h1{display:inline-block;vertical-align:top;margin:6px 0 6px 10px;font-weight:700;font-size:20px;line-height:1}.storybook-header button+button{margin-left:10px}.storybook-header .welcome{margin-right:10px;color:#333;font-size:14px}.storybook-page{margin:0 auto;padding:48px 20px;max-width:600px;color:#333;font-size:14px;line-height:24px;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-page h2{display:inline-block;vertical-align:top;margin:0 0 4px;font-weight:700;font-size:32px;line-height:1}.storybook-page p{margin:1em 0}.storybook-page a{color:inherit}.storybook-page ul{margin:1em 0;padding-left:30px}.storybook-page li{margin-bottom:8px}.storybook-page .tip{display:inline-block;vertical-align:top;margin-right:10px;border-radius:1em;background:#e7fdd8;padding:4px 12px;color:#357a14;font-weight:700;font-size:11px;line-height:12px}.storybook-page .tip-wrapper{margin-top:40px;margin-bottom:40px;font-size:13px;line-height:20px}.storybook-page .tip-wrapper svg{display:inline-block;vertical-align:top;margin-top:3px;margin-right:4px;width:12px;height:12px}.storybook-page .tip-wrapper svg path{fill:#1ea7fd}
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 /*# sourceMappingURL=index.css.map */