@font-face {
  font-family: 'NanumSquare';
  src : url('NanumSquare_acR.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'NanumSquare';
  src : url('NanumSquare_acB.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'NanumSquare';
  src : url('NanumSquare_acEB.ttf') format('truetype');
  font-weight: 900;
}

body {
  font-size: 15pt;
  font-family: 'NanumSquare';
  padding: 5px;
}

#title {
  position:static;
  font-size: 8pt;
  padding: 3px;
  padding-top: 8px;
  color: #be2f2f;
  font-weight: 500;
}

#subjectTitle {
  position:static;
  font-size: 17pt;
  font-weight: 900;
  display: inline-block;
  padding: 2px;
  padding-bottom: 10px;
}

#isLecting{
  position: static;
  display: inline-block;
  font-size:13px;
}

#bookmarkButton {
  display: inline-block;
  text-align: right;
  font-weight: 900;
}

/* 체크박스 숨기기 */
.star-checkbox input[type="checkbox"] {
  display: none; /* 기본 체크박스 숨김 */
}

/* 커스텀 별 스타일 */
.star-checkbox .star {
  position: static;
  font-size: 25px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  color: black;
}

/* 체크박스가 체크되었을 때 채워진 별로 변경 */
.star-checkbox input[type="checkbox"]:checked + .star::before {
  content: '★';
}

/* 체크박스가 체크되지 않았을 때 빈 별로 표시 */
.star-checkbox input[type="checkbox"] + .star::before {
  content: '☆';
}

#canvas {
  /* Remove explicit width and height to let the aspect ratio handle sizing */
  width: auto;
  height: auto;

  /* Set maximum dimensions based on the viewport, maintaining the aspect ratio */
  max-width: calc((100vh - 20px) * 1.5);
  max-width: 100%; /* Ensure it doesn't exceed the container's width */
  max-height: calc(100vh - 150px);

  border-radius: 10px;
  outline: solid 1px grey;

  /* Maintain the 2:3 aspect ratio */
  aspect-ratio: 2 / 3;
  box-sizing: border-box;
}

#tab {
  position: fixed;
  left: 0%;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  height: 70%;
  top: 94%;
  background: white;
  
  border-radius: 15px;
  box-shadow: 0px 0px 15px #00000044;
  border-color: black;
  border-width: 3px;
  outline: solid 1px rgba(128, 128, 128, 0.39);
  
  transition: top 0.3s;
}

/*챗지피티 피셜 : 단순히 .active를 하고 tab에 그 속성을 추가해도 움직이지 않은데, 이는 선택지 특이성 때문
그니까 클래스는 id보다 특이성이 낮기 떄문에, 적용이 안됨
따라서 tab 위 active를 덧붙히는 방식으로 특이성을 높임 (특이성이란 단어가 진짜로 있는진 모름)
지식+1 */
#tab.active {
  top: 30%;
}

#building{
  font-family: 'NanumSquare';
  background-color: white;
  border-radius: 7px;
  padding: 3px;

  
}

#lect{
  font-family: 'NanumSquare';
  background-color: white;
  border-radius: 7px;
  padding: 3px;
}

#select{
  padding-bottom: 10px;
}

#switchText{
  font-size: 10pt;
}

.fav{
  font-family: 'NanumSquare';
  font-weight: 900;
  font-size: 14px;
  outline: solid 1px rgba(128, 128, 128, 0.39);
  border-radius: 10px;
  margin-top: 10px;
  
  box-shadow: 0px 2px 3px #00000022;
  padding: 5px;
}

#info{
  position: absolute;
  bottom: 0;
  font-family: 'NanumSquare';
  font-weight: 500;
  font-size: 10px;
  color: #666666;
  margin-bottom: 10px;
  text-align: center;
  width: calc(100% - 20px);
  
  
}