@media (max-width: 768px) { /* mobile ver */
    .horizontal-bar {
    width: 100%;
    height: 5.5%;
    background-color: whitesmoke;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .horizontal-bar ul {
      list-style: none;
      display: flex;
      margin: 0;
      padding: 0;
      align-items: center;
      justify-content: center;
    }

    .horizontal-bar li {
      padding: 0 0.8%;
    }

    .horizontal-bar a {
      text-decoration: none;
      color: black;
      padding: 10px;
      border-bottom: 2px solid transparent;
      transition: all 0.3s ease;
    }

    .horizontal-bar a:hover {
      background-color: #f0f0f0;
      border-radius: 5px;
    }
    body {
      margin: 0;
      padding: 0;
    }

           

    .content {
      margin-top: 70px; /* 가로 바 높이 + 여유 공간 */
      text-align: center;
      color: whitesmoke;
    }

    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      font-family: 'suite_light';
      background-color: whitesmoke; /* 배경색 추가로 가독성 향상 */
      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    }
}



body
        {
            background-image:url('thumb.png');
            background-color: #1D1E23; /* 흑색 */
            font-family: 'suite_medium';
            
        }
/* 멜론 링크 전용 스타일 - 링크 텍스트만 작성하면 아이콘이 자동 표시됨 */
.melon-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: whitesmoke !important;
}
.melon-link::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url('image/melon.png') no-repeat center center / contain;
}
.melon-link:link,
.melon-link:visited {
  color: whitesmoke !important;
}
.melon-link:hover,
.melon-link:active,
.melon-link:focus {
  color: whitesmoke !important;
}
        /*.image{margin: 0 0 0 30px;}
        .text{margin: 30px 30px;}*/
        a:link {text-decoration: none; color:black;}
        a:visited {text-decoration: none; color: black;}
        a:hover {text-decoration: none; color: #361278;}
        a:active {text-decoration: none; color: #361278;}
        
@font-face {
    font-family: "suite_medium";
    src: url(font/suite_medium.ttf);
}

@media (min-width:769px) { /* desktop ver */
  .horizontal-bar {
    width: 300px;
    height: 100vh;
    background-color: whitesmoke;
    position: fixed;
    top: 0;
    left: 0;
  }
  .content{
    margin-left:300px;
    padding:20px;
    color: whitesmoke;
  } /*content의 왼쪽에 margin 설정하여 사이드바에 가리지 않도록 함. color 하얀색으로 지정*/
  .horizontal-bar nav ul {
      list-style: none;
      padding: 0;
  }
  
  .horizontal-bar nav li {
      margin: 0;
  }
  
  .horizontal-bar nav a {
      text-decoration: none;
      color: black;
      display: block;
      padding: 10px;
      border-bottom: 1px solid #ccc;
  }
  
  .horizontal-bar nav a:hover {
      background-color: #F0F0F0;
  }

}

.footer {
    position: fixed;
    top: 95%;
    width: 100%;
    text-align: center;
    font-family: 'suite_light';
    font-size: 13px;
  }