:root {
      /* --background-color: #f7f7f7; */
      --background-color: white;
      /* background-color: white; */
      /*variables*/
      --title-color: black;
      --content-color: #777;
      --input-backgroundColor: white;
      --modal-background-color: white;
  }

  /* IE 미지원 */
  @media (prefers-color-scheme: dark) {
      :root {
          --background-color: #393a48;
          /*variables*/
          --title-color: #fafafa;
          --content-color: #393a48;
          --input-backgroundColor: #484b6b;
          --modal-background-color: #484b6b;
      }
  }


  html {
      color-scheme: light dark;
      width: 100%;
      margin: 0px;
      padding: 0px;
      font-size: 62.5%;
      /* font-size:10px; */
      box-sizing: border-box;
      position: relative;
      /* scroll-behavior: smooth; */
      background-color: var(--background-color);
  }

  body {
      width: 100%;
      margin: 0px;
      padding: 0px;
      font-size: 1.6em;
      font-family: 'Noto Sans KR', sans-serif;
      font-weight: 400;
      box-sizing: border-box;
      position: relative;
      /* background-color: var(--content-color); */
      color: var(--title-color);
  }

  footer,
  header,
  div,
  p,
  span,
  ul,
  li,
  input,
  label,
  textarea,
  button,
  a,
  textarea {
      font-size: 1.4rem;
  }

  a {
      font-size: 1.4rem;
      text-decoration: none;
      color: black;
  }


  p {
      line-height: 1.3em;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
      font-weight: 700;
      color: var(--title-color);
  }

  h5 {
      font-size: 1.8rem;
  }

  h4 {
      font-size: 2rem;
  }

  h3 {
      font-size: 2.2rem;
  }

  h2 {
      font-size: 2.4rem;
  }

  h1 {
      font-size: 2.6rem;
  }

  em {
      font-style: normal;
      padding: 0.2em;
      font-size: smaller;
  }

  input {
      background-color: var(--input-backgroundColor);
      color: var(--title-color);
      outline: none;
  }



  input:focus {
      background-color: var(--input-backgroundColor);
      color: var(--title-color);
  }

  input:hover {
      background-color: var(--input-backgroundColor);
      color: var(--title-color);
  }

  ::placeholder {
      color: gray;
  }

  textarea {
      background-color: var(--input-backgroundColor);
      color: var(--title-color);
  }


  .date-input-field {
      max-width: 7rem;
  }


  figure {
      padding: 0px;
      margin: 0px;
  }

  .tox-tinymce {
      z-index: 0 !important;
  }

  summary {
      color: var(--title-color);
  }

  summary p {
      color: var(--title-color);
  }

  @media (prefers-color-scheme: dark) {
      a {
          color: white;
      }
  }