/* /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:        #A85f2E;
  --color-green-1:         hsl(166, 16%, 39%);
  --color-green-2:         hsl(166, 20%, 24%);
  --color-green-3:         hsl(166, 24%, 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:          #F6F6F6;
  --color-gray-2:          #E2E2E2;
  --color-gray-3:          #373737;
  --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.66);
  --color-text-4:          rgb(255 255 255 / 0.33);
  --color-text-5:          rgb(255 255 255 / 0.22);

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

  --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 1px 5px rgba(0,0,0,.15);
  --shadow-2: 0 2px 7px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.02);
  --shadow-3: 0 3px 9px 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);
  overflow-x: clip;
}
html {
  font-size: 16px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-size: 1.1875rem; /* 19px */
  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;
}
a:focus-visible,
button:focus-visible {
  outline-offset: 2px; outline: 2px dotted rgba(255,255,255,.12);
}

.sc-visually-hidden {
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  border: 0;
  clip: rect(0,0,0,0);
}