: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;
	}
}