@layer ll-service-extension.base {
  .ll-service-extension {
    --ll-se-color-surface-canvas: #f6f6f6;
    --ll-se-color-surface-raised: #ffffff;
    --ll-se-color-surface-subtle: #fcfcfc;
    --ll-se-color-text-primary: #202020;
    --ll-se-color-text-secondary: #5e5e5e;
    --ll-se-color-text-muted: #7a7a7a;
    --ll-se-color-border: #dbdbdb;
    --ll-se-color-border-strong: #bdbdbd;
    --ll-se-color-accent-soft: #eeffc2;
    --ll-se-color-accent: #84d63a;
    --ll-se-color-accent-strong: #3fae4c;
    --ll-se-color-focus: #3d82e8;
    --ll-se-color-danger: #dc3b4d;
    --ll-se-color-danger-soft: #fdebed;
    --ll-se-color-success: #16b364;
    --ll-se-color-success-soft: #e6f8ee;
    --ll-se-color-warning: #ef6820;
    --ll-se-color-warning-soft: #fdefe7;
    --ll-se-color-info: #7a5af8;
    --ll-se-color-info-soft: #f1edfe;

    --ll-se-font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
    --ll-se-font-size-xs: 0.75rem;
    --ll-se-font-size-sm: 0.875rem;
    --ll-se-font-size-md: 1rem;
    --ll-se-font-size-lg: 1.125rem;
    --ll-se-line-height-tight: 1.35;
    --ll-se-line-height-body: 1.6;

    --ll-se-space-1: 0.25rem;
    --ll-se-space-2: 0.5rem;
    --ll-se-space-3: 0.75rem;
    --ll-se-space-4: 1rem;
    --ll-se-space-5: 1.25rem;
    --ll-se-space-6: 1.5rem;
    --ll-se-space-8: 2rem;
    --ll-se-space-10: 2.5rem;
    --ll-se-space-12: 3rem;
    --ll-se-space-16: 4rem;

    --ll-se-radius-sm: 0.5rem;
    --ll-se-radius-md: 0.75rem;
    --ll-se-radius-lg: 1rem;
    --ll-se-radius-pill: 999px;
    --ll-se-shadow-raised: 0 0.625rem 1.875rem rgb(21 21 21 / 10%);
    --ll-se-shadow-dialog: 0 1.5rem 4rem rgb(21 21 21 / 18%);

    --ll-se-motion-duration-fast: 120ms;
    --ll-se-motion-duration-normal: 200ms;
    --ll-se-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

    --ll-se-z-base: 0;
    --ll-se-z-sticky: 20;
    --ll-se-z-dropdown: 40;
    --ll-se-z-popover: 50;
    --ll-se-z-backdrop: 80;
    --ll-se-z-dialog: 90;
    --ll-se-z-toast: 110;

    isolation: isolate;
    min-inline-size: 0;
    color: var(--ll-se-color-text-primary);
    background: var(--ll-se-color-surface-canvas);
    font-family: var(--ll-se-font-family);
    font-size: var(--ll-se-font-size-md);
    line-height: var(--ll-se-line-height-body);
  }

  .ll-service-extension *,
  .ll-service-extension *::before,
  .ll-service-extension *::after {
    box-sizing: border-box;
  }

  .ll-service-extension :where(button, input, select, textarea) {
    font: inherit;
  }

  .ll-service-extension :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 0.1875rem solid var(--ll-se-color-focus);
    outline-offset: 0.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer ll-service-extension.base {
    .ll-service-extension *,
    .ll-service-extension *::before,
    .ll-service-extension *::after {
      scroll-behavior: auto;
      transition-duration: 0.01ms;
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
    }
  }
}