* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
}

p,
h1,
h2,
h3,
ul {
  margin: 0;
}

@font-face {
  font-family: "Yeongdeok Snow Crab";
  src: url("../fonts/Yeongdeok_Snow_Crab.ttf");
}

.main-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 20px;
}

.main-header {
  padding: 18px 24px 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.main-header .select-student {
  border: none;
  background: none;
  color: #000;
  font-family: Lato;
  font-size: 14.427px;
  font-style: normal;
  line-height: normal;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.logout-btn {
  border: none;
  background: none;
  color: #000;
  font-family: Lato;
  font-size: 14.427px;
  font-style: normal;
  line-height: normal;
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}

.main-nav {
  padding: 8px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.main-nav .main-nav-item, .word-nav-item,
.homework-nav-item, .monthly-result-nav-item {
  padding: 2px;
  color: #000;
  text-align: center;
  font-family: Lato;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}

.main-nav .main-nav-item.active, .word-nav-item.active,
.homework-nav-item.active, .monthly-result-nav-item.active {
  font-weight: 600;
  border-bottom: 1.5px solid var(--Edu_Connect_Pink, #e71e73);
}

.heading_aa {
  color: #000;
  font-family: Lato;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.heading_aa::before {
  content: "";
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none"><g filter="url(%23filter0_d_598_30437)"><path d="M14 7L2 13.9282L2 0.0717964L14 7Z" fill="%23662583"/></g><defs><filter id="filter0_d_598_30437" x="0.684243" y="0.0722656" width="14.6315" height="16.487" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1.31576"/><feGaussianBlur stdDeviation="0.657878"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_598_30437"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_598_30437" result="shape"/></filter></defs></svg>');
  height: 16px;
  width: 16px;
  display: inline-block;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* 부모 요소의 높이 설정 */
  display: flex;
  flex-direction: column; /* 세로 방향 레이아웃 */
}

.main-footer {
  margin-top: auto; /* 컨텐츠가 적을 경우, footer를 하단으로 밀기 */
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: #000;
  font-family: Lato, sans-serif;
  font-size: 6px;
  font-weight: 500;
  line-height: 1.55;
}

.main-footer__logo {
  flex: 0 0 auto;
}

.main-footer__content {
  min-width: 0;
}

.main-footer p {
  margin: 0;
  overflow-wrap: anywhere;
}

.main-footer .copyright {
  margin-top: 8px;
}

@media (max-width: 390px) {
  .main-footer {
    gap: 12px;
    padding: 16px;
  }

  .main-footer__logo img {
    width: 88px;
    height: auto;
  }
}