@import url('layout.css');
@import url('menu.css');
@import url('gnb.css');
@import url('jumbotron.css');
@import url('button.css');
@import url('tab.css');
@import url('input.css');
@import url('badge.css');
@import url('card.css');
@import url('overlays.css');
@import url('selection.css');
@import url('text.css');
@import url('loading.css');

:root {
  --jumbotron-font: 'Poppins';
  --main-font: 'Pretendard';

  --primary-300: #DBEFFF;
  --primary-500: #0096f6;
  --primary-550: #1871DE;
  --primary-600: #0062C3;
  --primary-700: #1D356D;
  --primary-900: #001a2a;

  --secondary-500: #09dd8d;
  --gradient-50: linear-gradient(100.28deg, #0096F6 13.51%, #09DD8D 117.47%);
  --gradient-100: linear-gradient(97.24deg, #0085D8 -7.33%, #00CC7F 135.18%);

  --gray-50: #F5F6F7;
  --gray-100: #F2F3F5;
  --gray-200: #ECEEF1;
  --gray-300: #e6e9ed;
  --gray-400: #D8DBE1;
  --gray-500: #949AA6;
  --gray-600: #8791A3;
  --gray-700: #696F7C;
  --gray-800: #323741;
  --gray-900: #1E2127;
  --main-black: #010101;
  --main-white: #ffffff;

  --semantic-error: #F05050;

  --shadow-sm: 2px 2px 12px 0px rgba(1, 1, 1, 0.08);
  --shadow-md: 6px 6px 30px 0px rgba(1, 1, 1, 0.12);
  --shadow-xs: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --shadow-lg: 8px 8px 40px 0px rgba(0, 0, 0, 0.16);


}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(../../../assets/fonts/Pretendard-SemiBold.woff2) format('woff2'), url(../../../assets/fonts/Pretendard-SemiBold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(../../../assets/fonts/Pretendard-Light.woff2) format('woff2'), url(../../../assets/fonts/Pretendard-Light.woff) format('woff');
}
@font-face {
	font-family: 'Poppins';
	font-weight: 600;
	font-display: swap;
	src: local('Poppins SemiBold'), url(../../../assets/fonts/Poppins-SemiBold.woff2) format('woff2'), url(../../../assets/fonts/Poppins-SemiBold.woff) format('woff');
}

/* reset css */
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, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
  color: var(--main-black);
  font-family: var(--main-font), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Open Sans', 'Helvetica Neue', sans-serif;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  padding: 0;
  object, svg, img {
    cursor: pointer !important;
  }
}
textarea {
  resize: none;
  border: none;
  background-color: transparent;
  outline: none;
}
* {
  font-family: var(--main-font);
  box-sizing: border-box;
}

button, a {
  .blind {
    width: 1px;
    height: 1px;
    opacity: 0;
  }
}


::-webkit-scrollbar {
  width: 12px; /* 세로 스크롤바 너비 */
  height: 12px; /* 가로 스크롤바 높이 */
}
::-webkit-scrollbar-track {
  background: var(--main-white); 
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background: var(--gray-400); 
  border-radius: 6px;
  border: 3px solid var(--main-white); 
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

.is-pc {
  display: none;
}
@media (min-width: 1024px) {
  .is-pc {
    display: block;
  }
  .is-mo {
    display: none;
  }
}