/* /public/assets/global.css */

:root {
  --font-family:
    system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Arial,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  
  --color-red-1:           #862121;
  --color-yellow-1:        #DFBA80;
  --color-yellow-2:        #DA8953;
  --color-yellow-3:        #AF6636;
  --color-green-1:         hsl(144, 9%, 39%);
  --color-green-2:         hsl(144, 13%, 24%);
  --color-green-3:         hsl(144, 17%, 19%);
  --color-teal-1:          hsl(207, 26%, 50%);
  --color-teal-2:          hsl(207, 30%, 35%);
  --color-teal-3:          hsl(207, 34%, 30%);
  --color-gray-1:          #F5F5F5;
  --color-gray-2:          #E1E1E1;
  --color-gray-3:          #363636;
  --color-gray-4:          #222222;

  --color-point-1:         var(--color-red-1);
  --color-point-2:         var(--color-yellow-1);
  --color-point-3:         var(--color-yellow-2);
  --color-point-4:         var(--color-yellow-3);
  --color-muted-1:         var(--color-gray-3);
  --color-bg-1:            var(--color-gray-4);
  --color-text-1:          var(--color-gray-1);
  --color-text-2:          var(--color-gray-2);
  --color-text-3:          rgb(255 255 255 / 0.64);
  --color-text-4:          rgb(255 255 255 / 0.32);

  --font-size-1: .75rem;
  --font-size-2: .875rem;
  --font-size-3: 1rem;
  --font-size-4: 1.0625rem;
  --font-size-5: 1.1875rem;

  --height-1: 44px;
  --height-2: 48px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  --radius-1: .25rem;
  --radius-2: .5rem;
  --radius-3: .75rem;

  --z-upper-1: 2001;
  --z-upper-2: 2002;
  --z-upper-3: 2003;

  --shadow-1: 0 3px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.02);
  --shadow-2: 0 3px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  color: var(--color-text-2); font-family: var(--font-family); font-weight: 300;
  background-color: var(--color-bg-1);
}
html {
  font-size: 16px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-size: 1.1875rem; line-height: 1.55;
}
img, video {
  display: block;
  max-width: 100%; height: auto;
}
input, textarea {
  color: inherit; font: inherit;
  background: transparent;
}
button, [type="button"], [type="submit"] {
  color: inherit; font: inherit; line-height: 1;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; justify-content: center; align-items: center;
  border: 0;
  background: none;
}
button:focus-visible {
  outline-offset: 2px; outline: 2px dotted var(--color-muted-1);
}