:root {
  /* basic colors  */
  --black: #000;
  --white: #fff;

  /* nuetral  */
  --gray50: #f4f5f6;
  --gray100: #e6e8ea;
  --gray200: #cdd1d5;
  --gray300: #b1b8be;
  --gray400: #8a949e;
  --gray500: #6d7882;
  --gray600: #58616a;
  --gray700: #464c53;
  --gray800: #33363d;
  --gray900: #1d1d1d;

  /*primary*/
  --primary50: #e7f1ea;
  --primary100: #b4d2bf;
  --primary200: #8fbca0;
  --primary300: #5c9e75;
  --primary400: #3d8b5a;
  --primary500: #0c6e31;
  --primary600: #0b642d;
  --primary700: #094e23;
  --primary800: #073d1b;
  --primary900: #052e15;

  /*secondary*/
  --secondary50: #eaece8;
  --secondary100: #bfc3b8;
  --secondary200: #a0a696;
  --secondary300: #747e66;
  --secondary400: #596549;
  --secondary500: #303e1b;
  --secondary600: #2c3819;
  --secondary700: #222c13;
  --secondary800: #1a220f;
  --secondary900: #141a0b;

  /* Temple of Herbs color system*/
  --primary_light: #9bb420;
  --primary: #007832;
  --primary_variant: #284f23;

  --secondary_light: #f6f3e5;
  --secondary: #dfd6c5;
  --secondary_variant: #d1ad9f;

  --primary_option1: #fabe6a;
  --primary_option1_dark01: #d5a25a;
  --primary_option1_dark02: #b2874b;
  /* text colors */
  --textTitle: var(--gray900);
  --textBody: var(--gray700);
  --textDisabled: var(--gray500);

  /* back ground colors */
  --backgroundBase: var(--white);
  --backgroundLayer1: var(--gray50);
  --backgroundLayer2: var(--secondary_light);

  /* border colors */
  --borderActive: var(--primary500);
  --borderNormal: var(--gray600);
  /* --borderContents: var(--gray400); */
  --borderContents: var(--gray300);

  /* checkbox colors */

  /* button colors */
  --buttonPrimaryNormal: var(--primary500);
  --buttonPrimaryHover: var(--primary600);
  --buttonPrimaryPressed: var(--primary700);
  --buttonPrimaryDisabled: var(--buttonDisabledBg);

  --buttonSecondaryNormal: var(--primary50);
  --buttonSecondaryHover: var(--primary100);
  --buttonSecondaryPressed: var(--primary200);
  --buttonSecondaryDisabled: var(--buttonDisabledBg);

  --buttonNeutralNormal: var(--gray100);
  --buttonNeutralTextColor: var(--secondary900);

  --buttonTextHoverColor: var(--secondary50);
  --buttonTextPressedColor: var(--secondary100);
  --buttonTextTextNColor: var(--gray900);

  --buttonDisabledBg: #cdd1d5;
  /*secondary, gray,text*/

  /* input height */
  --inputTextHeight: 4rem;
  --inputRadioHeight: 4rem;

  /* input colors */

  /* COLORS  */
  --colorDangerSurface: #feecf0;
  --colorDangerBorder: #fcd4de;
  --colorDangerBase: #eb003b;
  --colorDangerText: #d50136;

  --colorInformationSurface: #e9f0ff;
  --colorInformationBorder: #d4e1ff;
  --colorInformationBase: #2768ff;
  --colorInformationTextr: #1f53cc;

  --alpha10: #e5e5e5;
  --alpha25: #bfbfbf;
  --alpha50: #808080;
  --alpha75: #404040;

  --shadowColor01: #00000005;
  --shadowColor02: #00000008;
  --shadowColor03: #00000012;
  --shadowColor04: #00000012;

  --shadowDarkColor: #40404028;
  /* FONT SIZES */
  /* 700 */

  --font-heading-L: 5rem;
  --font-heading-M: 4rem;
  --font-heading-S: 3.2rem;

  /* 700 */

  --font-title-XXL: 3.2rem;
  --font-title-XL: 2.5rem;
  --font-title-L: 2.1rem;
  --font-title-M: 1.9rem;
  --font-title-S: 1.7rem;
  --font-title-XS: 1.5rem;

  /* 700 400 */

  --font-body-M: 1.7rem;
  --font-body-L: 1.9rem;
  --font-body-S: 1.5rem;

  --font-detail-L: 1.7rem;
  --font-detail-M: 1.5rem;
  --font-detail-S: 1.3rem;

  --font-lable-L: 1.9rem;
  --font-lable-M: 1.7rem;
  --font-lable-S: 1.5rem;
  --font-lable-XS: 1.3rem;

  --font-links-L: 1.9rem;
  --font-links-M: 1.7rem;
  --font-links-S: 1.5rem;
  /* spacing system */
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: "pretendard", "Noto Sans KR", sans-serif; */
}

* {
  font-family: "DM Serif Text", "Poppins", "pretendard", "Noto Sans KR",
    sans-serif;
}
/* 
html {
  font-size: 62.5%;
} */

body {
  font-weight: 400;
  color: var(--textBody);
  font-size: var(--font-body-M);
  min-height: 100dvh;
  /* padding: 0rem 6.4rem; */
}
/* 
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
} */

/* header {
  background: #ffffff00;
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
} */

/* Tablets portrait (up to 992px) */
@media only screen and (max-width: 992px) {
  body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 576px) {
  html,
  body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
}