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

:root {
  --font-family: Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, San Francisco, Roboto, Segoe UI, sans-serif;
  
  --color-red-1:           #862121;
  --color-yellow-1:        #AD6A3D;
  --color-yellow-2:        #DFBA80;
  --color-gray-1:          #292929;
  --color-gray-2:          #474747;
  --color-green-1:         #2E352E;
  --color-green-2:         #4D5347;
  --color-brown-1:         #36302E;
  --color-brown-2:         #504642;

  --color-point-1:         var(--color-red-1);
  --color-point-2:         var(--color-yellow-1);
  --color-bg-1:            var(--color-gray-1);
  --color-muted-1:         var(--color-gray-2);
  --color-text-1:          #F2F2F2;
  --color-text-2:          rgb(255 255 255 / 0.55);
  --color-text-3:          rgb(255 255 255 / 0.30);

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

  --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);
  --shadow-3: 0 3px 10px rgba(0,0,0,.35), inset 0 0 0 0 rgba(255,255,255,.03);

  --nudge-1: 0;
  --nudge-2: 0;
  --nudge-3: 0;

  --optical-stage-shift: 0vh;

  --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);

  --kb-safe: 0px;
}

@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    :root {
      --nudge-1: .1rem;
      --nudge-2: .15rem;
      --nudge-3: .2rem;
    }
  }
}

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

html, body {
  height: 100%;
  color: var(--color-text-1); font-family: var(--font-family);
  background-color: var(--color-bg-1);
}
html {
  height: -webkit-fill-available;
  font-size: 16px; line-height: 1.5;
}
body {
  min-height: 100vh; min-height: -webkit-fill-available;
  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"] {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; justify-content: center; align-items: center;
  border: 0; background: none;
  color: inherit; font: inherit; line-height: 1;
}
button:focus-visible {
  outline-offset: 2px; outline: 2px dotted var(--color-muted-1);
}