/* html/body/h 태그같은 HTML 기본 스타일 */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-16);
  color: hsl(var(--color-black));
  line-height: var(--lh-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--lh-tight);
  font-weight: inherit;
}

p {
  line-height: var(--lh-body);
}

img {
  max-width: 100%;
  height: auto;
  display:block;
}

em {
  font-style: normal;
}

strong {
  font-weight: var(--fw-700);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid hsl(var(--color-accent));
  outline-offset: 2px;
}

html.not-scroll,
html.not-scroll body {
  overflow: hidden;
}

/* ===========================================================
   ICON
=========================================================== */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-size: var(--text-20);
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
}

.material-symbols {
  font-family: 'Material Symbols Outlined';
  font-size: var(--text-20);
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-size: var(--text-20);
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 1,
    'opsz' 20;
}

.material-symbols-outlined,
.material-symbols,
.material-symbols-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}