/*전체 CSS*/

* {  
  margin:0;  /* 브라우저 기본 마진 리셋 */
  padding:0;  /* 브라우저 기본 패딩 리셋 */
  box-sizing: border-box;  /* 테두리까지 포함해서 박스 모델 너비로 계산 */
}

#container {
  width:100%;   /* 내용 전체의 너비 */
  margin:0px auto;  /* 내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */
}
#header{
  width:100%;  /* 부모 요소의 너비와 똑같게 */
  height:15vh;  /* 헤더의 높이 */
}
#title{
  height:10vh;
  color:white;
  background-color:#304b72;
  padding-left:10%;
  align-content: center;

}
#nav{
 height:5vh;
 padding-left:10%;
 align-content: center;
 box-shadow: 5px 5px 5px rgb(176, 176, 176);
}
.menu{
  padding-right: 20px;
  text-decoration:none;
  color:black;
}

#left{
  width:10%;  /* 사이드바의 너비 */
  float:left;  /* 왼쪽으로 플로팅 */
}
#right{
  width:10%;  /* 사이드바의 너비 */
  float:right;  /* 왼쪽으로 플로팅 */
}
#main {
  width:80%;  /* 본문의 너비 */
  height:85vh;  /* 본문의 높이 */
  padding-left:2vh; /*왼쪽 여백*/
  padding-top:2vh; /*위쪽 여백*/
  float:left;  /* 왼쪽으로 플로팅 */
}


/* ladder */

button:hover {
  background-color:lightgray;
}

.ladder-world {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.ladder-content {
  display: flex;
  width: 100%;
}

.ladder-function-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  margin-right: 20px;
  border-radius: 6px;
}

.ladder-minus-btn,
.ladder-plus-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-weight: bold;
  font-size: xx-large;
  margin-right: 10px;
  margin-left: 10px;
}

.ladder-ladder-count {
  font-weight: bold;
  font-size: xx-large;
  margin: 0 10px 0 10px;
  display: inline;
}

.ladder-count-con {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60vh;
  flex-direction: column;
}

.ladder-start-btn {
  width: 120px;
  height: 60px;
  font-size: x-large;
  margin-top: 30px;
  border-radius: 6px;
  font-weight: bold;
}

.ladder-draw-con {
  width: calc(100% - 220px);
  height: 70vh; /* 높이 조정 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.ladder-con-dis {
  display: none;
}

.ladder-top-con, .ladder-bot-con {
  height: 10vh; /* 높이 조정 */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ladder-canvas {
  background-color: white;
  height: 50vh; /* canvas 높이 조정 */
}

.ladder-next-btn, .ladder-result-btn, .ladder-reset-btn {
  margin: 10px;
  width:160px;
  height: 50px;
  font-size: large;
  font-weight: bold;
  border-radius: 6px;

}

.ladder-text-top, .ladder-text-bot {
  display: inline-block;
  width: 87px;
  height: 4vh;
  text-align: center;
  font-size: large;
  margin: 0 5px;
  background: transparent;
  border: 1px solid black; /* 필드 테두리 색을 검은색으로 설정 */
  transition: all .5s;
  color: lightgray; /* 기본값일 때 글자 색깔 */
}

.ladder-text-top:focus, .ladder-text-bot:focus, .ladder-result-btn:focus, .ladder-minus-btn:focus, .ladder-plus-btn:focus, .ladder-reset-btn:focus {
  outline: none;
}

.ladder-start-user-btn {
  background-color:lightgoldenrodyellow;
  padding-inline: 5px;
  margin-bottom: 5px;
  font-size: large;
  border-radius: 6px;

}
.ladder-start-user-btn:hover {
  background-color: rgb(239, 227, 47); /* 마우스를 올렸을 때 더 진한 색깔 */
}