@charset "utf-8";

:root {
	/* custom */
	--size-loading-icon:       		   90px;
	--size-site-max-width:     		   1500px;
	--size-site-min-width:     		   1300px;
	--size-site-header-height: 		   90px;
	--size-header-menu-button-height:  28px;
	--size-main-about-image-height:	   440px;
	--size-main-products-image-height: 490px;
	--size-main-progress-image-height: 490px;

	/* font family */
	--font-light: 'Pretendard-Light';
	--font-regular: 'Pretendard-Regular';
	--font-bold: 'Pretendard-Bold';
	--font-regular-point: 'GowunBatang-Regular';
	--font-bold-point: 'GowunBatang-Bold';

	/* font size */
	--font-4xs:  13px;
	--font-3xs:  14px;
	--font-2xs:  15px;
	--font-xs:   16px;
	--font-s:    17px;
	--font-m:    20px;
	--font-l:    24px;
	--font-xl:   27px;
	--font-2xl:  29px;
	--font-3xl:  36px;
	--font-4xl:  48px;
	--font-5xl:  68px;
	--font-6xl:  80px;

	/* line height */
	--line-flat:   1;
	--line-tight:  1.3;
	--line-normal: 1.5;
	--line-wide:   1.7;
	--line-loose:  1.9;

	/* size */
	--size-8xs:  4px;
	--size-7xs:  8px;
	--size-6xs:  12px;
	--size-5xs:  15px;
	--size-4xs:  20px;
	--size-3xs:  24px;
	--size-2xs:  32px;
	--size-xs:   40px;
	--size-s:    48px;
	--size-m:    60px;
	--size-l:    72px;
	--size-xl:   88px;
	--size-2xl:  104px;
	--size-3xl:  120px;
	--size-4xl:  144px;
	--size-5xl:  168px;
	--size-6xl:  200px;

	/* radius */
	--radius-s: 5px;
	--radius-m: 7px;

	/* border */
	--border-s: 1px;

	/* z index */
	--zindex-sticky:    200;
	--zindex-overlay:   300;
	--zindex-loading:   600;

	/* layout */
	--size-sticky-offset:    138px; /* header-height(90) + size-s(48) */
	--size-brand-nav-width:  220px;
	--size-brand-ceo-img:    300px;

	/* color brand */
	--color-site-brand:      #2B2018;
	--color-site-line:       rgba(76, 54, 38, 0.12);
	--color-header-blur-bg:  rgba(250, 245, 238, 0.72);

	/* color text */
	--color-text:          #1D1814;
	--color-text-sub:	   #54504A;
	--color-text-disabled: #8B8178;

	/* color surface */
	--color-site-bg:       #F3EADF;
	--color-site-bg-soft:  #FAF5EE;

	/* color border */
	--color-border: #8B8178;
	--color-border-black: #1D1814;

	/* color overlay */
	--color-overlay-white: rgba(255, 255, 255, 0.9);
}