/* 중간 크기 */
@media (min-width: 425px) and (max-width: 912px)  {
  .bodyBar{
    padding: 120px 0px 20px 0px;
  }
  .courseTop {
    display: flex;
    width: 90%;
    justify-content: center;
    margin:auto;
  }
  #courseWriteURL{
    color: white;
  }
  
  .courseWrite {
    margin: 0px; 
    background-color: royalblue;
    padding: 10px;
    width: 110px;
    align-items: center;
    margin: 0px 10px 0px 10px;
    border-radius: 10px;
  }

  #selectSubject{
    margin-right: 25px;
    border-radius: 20px 20px 20px 20px;
    width:300px; 
    height: 50px; 
    font-size: larger;
  }
  
  .cards{
    padding: 10px;
  }
  .card {
    border: 4px solid gray;
    border-radius: 20px 20px 20px 20px;
    min-height: 300px;
    width: 80%;
    margin: 5px;
    /* position: relative; */
    text-align: left;
    font-family: arial;
  }
    /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 8px 8px 8px 8px rgba(0,0,0,0.3);
  }


  /* Add some padding inside the card container */
  .top {
    padding: 20px 20px 0px 30px;
    display: flex;
  }

  .subject{
    font-weight: 550;
    font-size: 22px;
    width: 15%;
  }

  .classcode{
    font-weight: 550;
    font-size: 22px;
    width: 20%;
  }

  .courseName{
    width: 35%;
  }
  h4.date{
    width:30%
  }
  p.date{
    font-size: 5px;
    width: 30%;
    margin: 0px;
  }

  .textBox{
    border: 2px solid gray;
    border-radius: 20px 20px 20px 20px;
    margin: auto;
    padding-left: 30px;
    padding-right: 30px;
    width: 90%;
    min-height: 100px;
  }
  .authors{
    padding-left: 50px;
    max-height: 30px;
  }

  h4.author{
    width: 400px;
    font-weight: 400;
    font-size: 20px;
    margin: 0px;
  }
  
  
  /* course comment */
  p.author{
    font-weight: 400;
    font-size: 16px;
    width: 40%;
    padding-left: 50px;
    padding-right: 20px;
    margin: 0px;
  }

  .comments{
    padding: 0px;
  }
  
  input {
    margin-left:10px;
    width: 90%;
    height: 40px;
  }

  .writeComment {
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    margin: auto;
  }
  .reply{
    width: 100%;
  }
  
  /* flex for update and delete buttons */
  .twoRow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: auto;
  }
  
  .updateAndDelete {
    padding-top: 30px;
    display: none;
    flex-direction: column;
  }
  
  .updateCourse, .deleteCourse {
    padding-top: 20px;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .commentDetail{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 30px;
  }
  .commentReplyBtn,
  .commentDeleteBtn,
  .commentEditBtn{
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .icon-text {
    padding-top: 20px;
    position: absolute;
      /* 텍스트를 아이콘 위에 표시하도록 조정 */
    left: 50%;
    
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    opacity: 0; /* 처음에는 텍스트 숨김 */
    transition: opacity 0.3s ease-in-out;
    font-size: small;
  }
  .commentBottom{
    width: 100%;
    
  }
  .courseCommentContent{
    font-size: small;
    padding-left: 30px;
    width: 95%;
    word-wrap: break-word;
    margin: 10px 0px 10px 0px;
    max-height: 300px;
  }

  .courseCommentEditBox{
    width: 80%;
  }
  .displayCommentBtn{
    width: 20%;
  }
  /* Heart button and Comment button in Course page */
  .heartCommentBtn {
    margin-left: 30px;
    display: flex;
  }
  .clickHeart, .clickComment{
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 1.5rem;
    color: #333;
  }

  /* comment edit input area*/
  .editArea{
    width:100%;
    display:none;
    align-items: center;
  }
  
  .editArea.display{
    display: flex;
    justify-content: center;
  }
  .editArea .editBox{
    width: 80%;
    resize:none;
    height: 100px;
  }
  .editBtns button{
    display:block;
  }
}