@font-face {
  font-family: "MYGENT UI";
  src: url("../assets/fonts/Pretendard-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "MYGENT UI";
  src: url("../assets/fonts/Pretendard-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/* Six base colors. Components use the semantic roles below. */
:root {
  --my-paper: #fbf9fa;
  --my-white: #ffffff;
  --my-ink: #3f353a;
  --my-muted: #736670;
  --my-line: #ded4db;
  --my-accent: #865565;
  --my-bg-page: var(--my-paper);
  --my-bg-surface: var(--my-white);
  --my-text: var(--my-ink);
  --my-text-secondary: var(--my-muted);
  --my-border: var(--my-line);
  --my-border-control: #9d8d96;
  --my-action: var(--my-accent);
  --my-action-hover: #704555;
  --my-action-pressed: #5c3745;
  --my-action-text: var(--my-white);
  --my-link: var(--my-action);
  --my-focus: var(--my-accent);
  --my-disabled-bg: #eee8ec;
  --my-disabled-text: #84767e;
  --my-success: #32684e;
  --my-success-bg: #edf5ef;
  --my-error: #a0394d;
  --my-error-bg: #fbf0f2;
  --my-backdrop: rgb(63 53 58 / .35);
  --my-chart-current: var(--my-muted);
  --my-chart-target: var(--my-accent);
  --my-chart-area: rgb(134 85 101 / .12);
  --my-chart-duration: 360ms;

  --my-font: "MYGENT UI", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --my-weight-body: 400;
  --my-weight-strong: 700;
  --my-type-display: clamp(2rem, 3.5vw, 3rem);
  --my-type-title: clamp(1.625rem, 2.5vw, 2rem);
  --my-type-heading: 1.375rem;
  --my-type-body: 1.0625rem;
  --my-type-label: 1rem;
  --my-type-caption: .875rem;
  --my-type-price: clamp(2.375rem, 3.1vw, 2.625rem);
  --my-type-price-unit: 1.25rem;
  --my-leading-title: 1.25;
  --my-leading-body: 1.75;
  --my-leading-compact: 1.5;
  --my-tracking-title: -.035em;
  --my-measure: 38rem;

  --my-space-1: .25rem;
  --my-space-2: .5rem;
  --my-space-3: .75rem;
  --my-space-4: 1rem;
  --my-space-5: 1.5rem;
  --my-space-6: 2rem;
  --my-space-7: 3rem;
  --my-space-8: 4rem;
  --my-space-9: 6rem;
  --my-section-space: clamp(3rem, 5vw, 5rem);
  --my-page-gutter: clamp(1rem, 4vw, 3rem);
  --my-page-width: 75rem;
  --my-purchase-width: 27rem;
  --my-control-height: 3rem;
  --my-radius-control: .5rem;
  --my-radius-surface: .75rem;
  --my-radius-dialog: 1rem;
  --my-shadow-dialog: 0 18px 60px rgb(63 53 58 / .14);
  --my-duration-fast: 140ms;
  --my-duration-panel: 220ms;
  --my-ease: cubic-bezier(.2, .75, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --my-duration-fast: 0ms; --my-duration-panel: 0ms; --my-chart-duration: 0ms; }
}