:root{
  --content-main : #273238;
  --content-sub : #808080;
  --content-disabled: #E6E6E6;
  --btn-active: #333333;
  --btn-hover: #1A1A1A;
  --btn-disabled: #CCCCCC;
  --btn-readonly: #B3B3B3;
  --btn-o-hover: #F5F5F5;
  --btn-o-selected: #EBEBEB;
  --line: #666666;
  --sub-content-bg: #D9D9D9;
  --point-b: #0000FF;
  --point-g: #00FF00;
  --point-r: #FF0000;
  --point-link: #2C96F5;
  --point-w: #FFFFFF;

  --border-basic: 0.15rem solid var(--line);
  --border-black: 0.15rem solid var(--btn-hover);

  --icon-s: 1.6rem;
  --icon-m: 2.0rem;
  --icon-l: 2.4rem;
  
  --font-display: 6.8rem;
  --font-xxl: 4.0rem;
  --font-xl: 3.2rem;
  --font-l: 2.8rem;
  --font-m: 2.0rem;
  --font-s: 1.6rem;
  --font-xs: 1.4rem;
  --font-xxs: 1.2rem;

  --font-bolder: 800;
  --font-bold: 700;
  --font-middle:600;
  --font-regular: 500;
  --font-normal: 400;

  --box-w-full: 100%;
  --box-w-half: 50%;
  --box-w-equally: 33.33333%;
  --box-w-equally-2: 16.66665%;

  --box-h-full: 100%;
  --box-h-half: 50%;
  --box-h-equally: 33.33333%;
  --box-h-equally-2: 16.66665%;

  --border-r-normal: 0.4rem;
  --border-r-round: 50%;

  --btn-p-icon: 1.0rem;
  --btn-p-s: .8rem 2.0rem;
  --btn-p-m: 1.0rem 2.4rem;
  --btn-p-l: 1.6rem 3.0rem;

  --filter-w: invert(99%) sepia(82%) saturate(2%) hue-rotate(241deg) brightness(106%) contrast(100%);
  --filter-r: invert(13%) sepia(98%) saturate(6798%) hue-rotate(2deg) brightness(95%) contrast(119%);
  --filter-g: invert(42%) sepia(85%) saturate(969%) hue-rotate(84deg) brightness(136%) contrast(115%);
  --filter-b: invert(7%) sepia(100%) saturate(6983%) hue-rotate(248deg) brightness(116%) contrast(145%);
}

/*모바일 대응을 위해 기본적인 폰트 사이즈 리셋후 body에 
margin, padding, width, height rem 사용으로 16px로 고정*/
html{
  font-size: 62.5%; 
}

body{
  position: relative;
}
body, *{
  font-family:'Segoe UI',-apple-system, system-ui, BlinkMacSystemFont, 
              Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: var(--font-s);
  font-weight: var(--font-normal);
}

:where(img, a, input, button){
  display: inline-block;
}

::-webkit-scrollbar{
  width: 0.3rem;
  height: 0.4rem;
  background: var(--btn-readonly);
}
::-webkit-scrollbar-thumb{
  margin: 0.2rem 0 0.2rem;
  background: var(--line);
}
::-webkit-scrollbar-button{
  width: 0;
}
::-webkit-scrollbar-track{
}
::-webkit-scrollbar-corner{
  background: var(--btn-readonly);
}

input[type="checkbox"]{
  appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  border: var(--border-basic);
  border-radius: var(--border-r-normal);
}
input[type="checkbox"]:checked{
  border: var(--border-basic);
  background: url('/img/icon/check.svg') no-repeat center;
  background-color: var(--btn-hover);
}
input[type="checkbox"]:indeterminate{
  border: var(--border-black);
  background: url('/img/icon/indenterminate.svg') no-repeat center;
  background-size: 10px;
}
input[type="radio"]{
  width: 1.6rem;
  height: 1.6rem;
  accent-color: var(--btn-hover);
}

input[type="text"]::placeholder{
  font-size: var(--font-s);
  color: var(--content-sub);
}

hr{
  width: 100%;
}

a{
  text-decoration: none;
}
a:visited{
  color: inherit;
}