@charset "utf-8";
:root {
    --bg-color: #0f0b12;
    --input-bg: rgba(0, 0, 0, 0.5);
    --cont-color: #fff;
    --cont-text1: rgba(255,255,255,0.7);
    --cont-text2: rgba(255,255,255,0.5);
    --cont-text3: rgba(255,255,255,0.3);
    --line-color: rgba(255,255,255,0.5);
    --point-color: #4E2FC1;
    --sub-color: #e68f44;
}
.light-mode {
  --bg-color: #ffffff;
  --input-bg: rgba(255, 255, 255, 0.5);
  --cont-color: #333;
  --cont-text1: #555;
  --line-color: #ccc;
  --point-color: #4E2FC1;  /* 동일하게 유지하거나 더 밝게 조정 가능 */
  --sub-color: #d16700;
}
/* 기본서체 */
@font-face {
  font-family: "Pretendard-Regular";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
    font-family: 'YESMyoungjo-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/YESMyoungjo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SBAggroB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html{
  font-size: 16px;
}
html,
body {
  line-height: 1.2;
  font-family: "Pretendard-Regular";
  overflow-x: hidden;
  color: var(--cont-color);
}
body{background-color: var(--bg-color);}
#body{background-image: url(/img/bg.png);}
li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
i {
  font-style: normal;
}
h1 {
  font-family: "SBAggroB";
  font-weight: normal;
}
h2,h3,h4,h5 {
  font-weight: normal;
}
button {
  background: inherit;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  cursor: pointer;
}

@media screen and (max-width: 1280px) {
  html{font-size: 15px;}
}


@media screen and (max-width: 1024px) {
  html{font-size: 14px;}
}

@media screen and (max-width: 480px) {
    html{font-size: 13px;}
}