/*--- base ---*/
@-ms-viewport {
    width: device-width;
}

@o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

:root {
	/*
	  size start
    */
	--max-wrapper-w: 1920px;
	--max-w: 1440px;
	--max-product-w: 1200px;
	--main-px: 60;
	--header-h: 86px;
	--footer-h: 406px;
	--tab-bar-h: 64px;
	--breadcrumb-h: 50px;

	/* size */
	--spacing: 2px;
	--spacing-2: 4px;
	--spacing-3: 8px;
	--spacing-4: 12px;
	--spacing-5: 16px;
	--spacing-6: 20px;
	--spacing-7: 24px;
	--spacing-8: 32px;
	--spacing-9: 40px;
	--spacing-10: 48px;

	/* radius */
	--radius: 6px;
	--radius-2: 8px;
	--radius-3: 10px;
	--radius-4: 12px;
	--radius-5: 16px;
	--radius-6: 100%;  /* full */
	/*
	  size end
    */

	/*
	  font start
    */
	--font-paperlogy: "Paperlogy";

	/* font-size */
	--text-heading-4xl: 60px;
	--text-heading-3xl: 48px;
	--text-heading-2xl: 40px;
	--text-heading-xl: 36px;
	--text-heading-lg: 28px;
	--text-heading-md: 24px;
	--text-heading-sm: 20px;
	--text-heading-xs: 18px;
	--text-body-xl: 18px;
	--text-body-lg: 16px;
	--text-body-md: 14px;
	--text-body-sm: 12px;
	--text-body-xs: 10px;

	/* letter-spacing */
	--letter-spacing-ratio: -0.002%;  /* -0.2% */
	/*
	  font end
    */

	/*
	  color start
    */
    /* exclude color */
	--blue-050: #F5F7FA;  /* Description */
	--blue-100: #E4ECFF;  /* Description */
	--blue-200: #C8DCFF;  /* Description */
	--blue-300: #AEC9FF;  /* Description */
	--blue-400: #7AA1FF;  /* Description */
	--blue-500: #598AFF;  /* Description */
	--blue-600: #1C56FF;  /* main color */
	--blue-700: #123ECC;  /* Description */
	--blue-800: #0A31A8;  /* main color, CTA */
	--blue-900: #0D2A8A;  /* a bit darker than the main */
	--blue-950: #0B235B;  /* thicker than the main */

    --gray-100: #F8F8F8;  /* bg: card, placeholder */
    --gray-200: #E8E8E8;  /* disabled bg, stroke */
	--gray-250: #D1D1D1;  /* between disabled bg and disabled text */
    --gray-300: #BBBBBB;  /* disabled text, icon */
    --gray-400: #999999;  /* sub icon */
    --gray-500: #666666;  /* sub text */
    --gray-600: #333333;  /* main text, icon */
    --gray-600-a-20: #33333333;  /* opacity 20 */
    --gray-700: #111111;  /* black */

	--real-black-a-06: #0000000F;

	--black: var(--gray-700);
	--white: #FFFFFF;

	/* main color */
	--logo: #1A2C72;
	--primary: var(--blue-600);  /* main color */
	--secondary: var(--blue-800);  /* main color, hover, emphasis(강조) */

    /* alarm  color */
	--red-text: #D61111;  /* error, badge text */
	--red-bg: #FBD8DC;  /* badge bg */
	--yellow: #FEDA4A;  /* bookmark, star */

    /* etc  color */
	--green-050: #EFF7F1;  /* green bg */
	--green-500: #54A93F;  /* breen text, icon */
	--tesllon-care-green: #00A84D;  /* tesllon care green */
	--jb-green: #51E3A4;  /* Description */
	--jb-blue: #007AFF;  /* Description */

	/* 활용 */
	--text-primary: var(--gray-600);
	--text-secondary: var(--gray-500);
	--text-third: var(--gray-400);
	--text-placeholder: var(--gray-100);
	--text-disabled: var(--gray-300);

	--color-icon: var(--gray-600);
	--color-sub-icon: var(--gray-400);
	--color-disabled-icon: var(--gray-300);

	--color-stroke: var(--gray-200);

	--color-bg-card: var(--gray-100);
	--color-disabled-bg: var(--gray-200);

	--color-scrollbar-track: #DDDDDD;
	--color-scrollbar-thumb: #99999980;
	--color-scrollbar-thumb-hover: #99999999;
;

	/*
	  color end
    */

	/* box-shadow: x y blur spread rgba() */
    --shadow-option-list: 0 1px 8px 0px rgba(0, 0, 0, 0.07);
    --shadow-top-menu: 0 7px 10px 0px rgba(0, 0, 0, 0.1);
    --shadow-bottom-menu: 0 -2px 10px 1px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 10px 0px rgba(0, 0, 0, 0.1);
    --shadow-fab: 0 4px 15px 0px rgba(0, 0, 0, 0.1);

	/* transition */
	--transition: 0.2s ease-in-out;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,input,textarea,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button {
    /*font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;*/
	font-family: var(--font-paperlogy), -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* base */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    word-break: keep-all;
	/* body-md: start */
	font-size: var(--text-body-md);
	font-weight: 400;
	line-height: 1.4285;  /* 20px */
	letter-spacing: calc(var(--text-body-md) * var(--letter-spacing-ratio));
	/* body-md: end */
    color: var(--text-primary);
    user-select: none;
}

html, body {
	width: 100%;
    /* overflow-x: hidden; */
}

body::-webkit-scrollbar {
    display: none;
}

body {
	min-width: 280px;
	min-height: 100vh;
	background: var(--white);
	font-family: var(--font-paperlogy), -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	font-size: var(--text-body-md);
	font-weight: 400;
	line-height: 1.4285;  /* 20px */
	letter-spacing: calc(var(--text-body-md) * var(--letter-spacing-ratio));
	color: var(--text-primary);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

main {
	min-height: calc(100vh - var(--footer-h));
	margin: 0 auto;
	padding: 0 var(--main-px);
	padding-top: var(--header-h);
}

::selection {
    background-color: var(--primary);
    color: var(--white);
}

a,
a:link,
a:visited {
    text-decoration: none;
    transition: var(--transition);
    color: inherit;
}

ul,
ol,
li,
dl {
    list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

p {
	margin-bottom: 0;
}

b {
    font-weight: 700;
}

button {
    border: none;
	background: none;
	text-decoration: none;
    cursor: pointer;
}

/* typography */
.heading-4xl {
	font-size: var(--text-heading-4xl);  /* 60px */
	font-weight: 600;
	line-height: 1.1333;  /* 68px */
}
.heading-3xl {
	font-size: var(--text-heading-3xl);  /* 48px */
	font-weight: 600;
	line-height: 1.1666;  /* 56px */
}
.heading-2xl {
	font-size: var(--text-heading-2xl);  /* 40px */
	font-weight: 600;
	line-height: 1.2;  /* 48px */
}
.heading-xl {
	font-size: var(--text-heading-xl);  /* 36px */
	font-weight: 600;
	line-height: 1.1111;  /* 40px */
}
.heading-lg {
	font-size: var(--text-heading-lg);  /* 28px */
	font-weight: 600;
	line-height: 1.2857;  /* 36px */
}
.heading-md {
	font-size: var(--text-heading-md);  /* 24px */
	font-weight: 600;
	line-height: 1.166;  /* 28px */
}
.heading-sm {
	font-size: var(--text-heading-sm);  /* 20px */
	font-weight: 600;
	line-height: 1.2;  /* 24px */
}
.heading-xs {
	font-size: var(--text-heading-xs);  /* 18px */
	font-weight: 600;
	line-height: 1.3333;  /* 24px */
}
.body-xl {
	font-size: var(--text-body-xl);  /* 18px */
	font-weight: 400;
	line-height: 1.3333;  /* 24px */
}
.body-lg {
	font-size: var(--text-body-lg);  /* 16px */
	font-weight: 400;
	line-height: 1.5;  /* 24px */
}
.body-md {
	font-size: var(--text-body-md);  /* 14px */
	font-weight: 400;
	line-height: 1.4285;  /* 20px */
}
.body-sm {
	font-size: var(--text-body-sm);  /* 12px */
	font-weight: 400;
	line-height: 1.3333;  /* 16px */
}

.font-500 {
	font-weight: 500;
}

.text-primary {
	color: var(--text-primary);
}
.text-secondary {
	color: var(--text-secondary);
}
.text-third {
	color: var(--text-third);
}

.full {
	width: 100%;
}
.ml-1 {
	margin-left: var(--spacing-2);
}
.gap-8 {
	gap: calc(var(--spacing-2) * 8);
}

/* mobile */
@media (max-width: 767px) {
	:root {
		--header-h: 64px;
		--footer-h: calc(491px + var(--tab-bar-h));
	}
}

/* 세로 스크롤바 */
*::-webkit-scrollbar {
	width: 4px;
}

*::-webkit-scrollbar-track {
	background: var(--color-scrollbar-track);
	border-radius: 2.5px;
}

*::-webkit-scrollbar-thumb {
	background: var(--color-scrollbar-thumb);
	border-radius: 2.5px;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--color-scrollbar-thumb-hover);
}

/* 가로 스크롤바 */
*::-webkit-scrollbar:horizontal {
	height: 4px;
}

*::-webkit-scrollbar-track:horizontal {
	background: var(--color-scrollbar-track);
	border-left: 0;
	border-radius: 2.5px;
}

*::-webkit-scrollbar-thumb:horizontal {
	background: var(--color-scrollbar-thumb);
	border-left: 0;
	border-radius: 2.5px;
}

/* scrollbar utilities */
.scrollbar-gutter {
	scrollbar-gutter: stable;
}

.scrollbar-hide {
	-ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
	display:none;
}