@import url("./navbar.css");
@import url("./sidebar.css");
@import url("./main.css");
@import url("./qna.css");
@import url("./result.css");
@import url("./home.css");
@import url("./choices.css");
@import url("./qna.css");
@import url("./animation.css");
@import url("./loading.css");

body {
  -ms-overflow-style: none;
}

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

/* ===== 변수 구간 ===== */

:root {
  --color-main: #a4a5cc;
  --color-sub: #d6d6ff;
  --color-dark: #75769b;
  --color-emph: #f10f5f;
  --color-text: #281812;

  --color-light-bg: whitesmoke;

  --font-code: "Nanum Gothic Coding", monospace;

  --font-size-title: 44px;
  --font-size-subtitle: 32px;
  --font-size-tag: 26px;
  --font-size-larger: 20px;
  --font-size-text: 18px;

  --height-toolbar: 68px;
}

/* ===== 리셋 구간 ===== */

body {
  margin: 0;
  font-family: "Do Hyeon", sans-serif;

  /* 개발용 설정 */
  /* min-height: 150vh; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: normal;
  margin: 0;
}

p {
  margin: 0;
}

strong,
em {
  font-weight: inherit;
  font-style: normal;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

dl {
  margin: 0;
}
dd {
  margin: 0;
  display: inline;
}

figure {
  margin: 0;
}

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

th {
  font-weight: normal;
}

address {
  font-style: inherit;
}

.qnaSection {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  width: 100%;
}

h2 {
  color: #145ccc;
  text-align: center;
  font-size: 38px;
}
.question {
  background-color: #fff;
  border-radius: 8px;
  width: 96%;
  padding: 1.2em;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
label {
  display: block;
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: bold;
}
#usage {
  font-size: 32px;
}

select,
input[type="range"] {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.question span {
  font-size: 20px;
}
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.checkbox-group label {
  display: flex;
  align-items: center;
  font-weight: normal;
}
input[type="checkbox"] {
  margin-right: 5px;
}
.submit-btn {
  background-color: #145ccc;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 32px;
  display: block;
  width: 100%;

  transition: background-color 0.3s;
}
.submit-btn:hover {
  background-color: #2980b9;
}
#budget-output {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
  font-size: 32px;
}

#gameLabel {
  display: block;
  font-size: 32px;
  margin: 0;
  font-weight: bold;
}