@charset "UTF-8";

:root {
  --gray50: #FAFAFA;
  --gray100: #F5F5F5;
  --gray200: #EEEEEE;
  --gray250: #E8E8E8;
  --gray300: #E0E0E0;
  --gray400: #BDBDBD;
  --gray500: #94969B;
  --gray600: #757575;
  --gray700: #616161;
  --gray800: #424242;
  --gray900: #212121;

 /* Red */
  --error50: #FFEBEE;
  --error100: #FFCDD2;
  --error200: #EF9A9A;
  --error300: #E57373;
  --error400: #F7556D;
  --error500: #ED344F;
  --error600: #D0102C;
  --error700: #D32F2F;
  --error800: #C62828;
  --error900: #B71C1C;


  /* Red */
  --red50: #FFEBEE;
  --red100: #FFCDD2;
  --red200: #EF9A9A;
  --red300: #E57373;
  --red400: #EF5350;
  --red500: #F44336;
  --red600: #E53935;
  --red700: #D32F2F;
  --red800: #C62828;
  --red900: #B71C1C;
  --reda100: #FF8A80;
  --reda200: #FF5252;
  --reda400: #FF1744;
  --reda700: #D50000;
  --tck400: #ED344F;
  --tck500: #D0102C;

  /* Orange */
  --orange50: #FBE9E7;
  --orange100: #FFCCBC;
  --orange200: #FFAB91;
  --orange300: #FF8A65;
  --orange400: #FF7043;
  --orange500: #FF5722;
  --orange600: #F4511E;
  --orange700: #E64A19;
  --orange800: #D84315;
  --orange900: #BF360C;
  --orangea100: #FF9E80;
  --orangea200: #FF6E40;
  --orangea400: #FF3D00;
  --orangea700: #DD2C00;

  --white: #FFFFFF;
  --black: #000000;

  --red300: #F7556D;
  --red400: #ED344F; 
  --red500: #D0102C;

  --purple400: #BC54F0;
  --purple500: #A91BF1;

  --violet500: #6D38D1;

  --indigo400: #6B56F5;
  --indigo500: #5736EC;

  --blue400: #36A1F7;
  --primary400: #36A1F7;
  --blue500: #2685F6;
  --primary: #2685F6;
  --primary500: #2685F6;

  --sky400: #68DFE9;
  --sky500: #26D0E0;
  --sky600: #0095A3;

  --green400: #73DF72;
  --green500: #38B935;
  --green600: #0FA30C;
  --green700: #038000;

  --lime400: #E3F06C;
  --lime500: #CFDF37;

  --mustard400: #FCD66C;
  --mustard500: #F2AB27;
  --mustard600: #E18700;
  

  /* Blue */
  --blue50: #E3F2FD;
  --blue100: #BBDEFB;
  --blue200: #90CAF9;
  --blue300: #64B5F6;
  --blue600: #1E88E5;
  --blue700: #1976D2;
  --blue800: #1565C0;
  --blue900: #0D47A1;
  --primary50: #E3F2FD;
  --primary100: #BBDEFB;
  --primary200: #90CAF9;
  --primary300: #64B5F6;
  --primary600: #1E88E5;
  --primary700: #1976D2;
  --primary800: #1565C0;
  --primary900: #0D47A1;

  --bluegray50: #f2f4fd;
  --bluegray100: #e4e7f5;
  --bluegray200: #d0d4e7;
  --bluegray300: #b4bad5;
  --bluegray400: #929bc2;
  --bluegray500: #6d7cb3;
  --bluegray600: #5362a0;
  --bluegray700: #38498d;
  --bluegray800: #1b2c6c;
  --bluegray900: #0c194c;
} 

/* box sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* default  */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
b, u, i,
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,
nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* IOS 대응, text 크기 조절 방지  */
html {
    -webkit-text-size-adjust: none;  
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    font-size: 62.5%;
}

input, button {
    appearance: auto;
    border-radius: 0;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select::-ms-expand {
    display: none;
}

/* remove list styles */
ol, ul {
  list-style: none;
}

/* remove quotes from blockquotes and q elements */
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
}

/* body defaults */
body {
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: 'Pretendard Variable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--white100);
  color: var(--black100);;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scrollbar-gutter: stable;
}

/* anchor styles */
a {
  color: inherit;
  text-decoration: none;
}

/* button, input, textarea, select reset */
button,
input,
select,
textarea {
  font: inherit;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

button {
  cursor: pointer;
}
button:disabled{
  cursor: default;
}

hr {
  width: 100%;
  height: 1px;
  background: var(--gray100);
  border: none;
}


/* reset images */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* table */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* textarea  */
textarea {
  resize: vertical;
}

/* hidden elements */
[hidden] {
  display: none !important;
}

/* ie input스타일 */
input::-ms-check {
  display: none;
}

select::-ms-expand {
  display: none;
}

input[type=checkbox] {
  display: none;
  cursor: pointer;
}

input[type=radio] {
  display: none;
  cursor: pointer;
}
/* 기본 스크롤바 스타일 */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*:hover {
  scrollbar-color: var(--gray250) transparent;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
}
*::-webkit-scrollbar-track {
  background-color: transparent;
  border: 0;
  border-top: 1px solid transparent;
}
*::-webkit-scrollbar-thumb {
  min-height: 40px;
  border: 4px solid transparent;
  border-radius: 10px;
  background-color: transparent;
  background-clip: padding-box;
}
*:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*:hover::-webkit-scrollbar-thumb {
  background-color: var(--gray250);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}