@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbit&display=swap');

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
}

body {
  background: #efefef;
}

/* 기본 스타일 */
header {
  width: 100%;
  height: auto;
  background: linear-gradient(45deg, aqua, royalblue);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0px;
  box-sizing: border-box;
}



header #form1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: none; /* 테두리 제거 */
    box-shadow: none; /* 그림자 제거 */
    padding: 0; /* 패딩 제거 */
    margin: 0 auto; /* 중앙 정렬 */	

}

/* 인풋 필드 스타일 */
header #form1 input[type="text"],
header #form1 input[type="password"] {
    width: 25%;
    padding: 8px;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

/* 로그인 버튼 스타일 */
header #form1 input[type="submit"] {
    padding: 8px;
    background-color: #007bff;
    border: 1px solid white;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
	width: 20%
}

header #form1 input[type="submit"]:hover {
    background-color: #0056b3;
}

/* 에러 메시지 스타일 */
header #form1 p {
    color: red;
    font-size: 12px;
    margin-top: 10px;
}

header #form1 a span{
    color: #fff; /* 글자 색상을 흰색으로 설정 */
	font-size: 14px;
}

	

header .person {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 수직 중앙 정렬을 위해 추가 */
  width: 100%;
  margin-bottom: 10px;
}





/* 큰 화면에서는 header를 왼쪽에 고정 */
@media screen and (min-width: 1200px) {
  header {
    width: 400px;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: linear-gradient(45deg, aqua, royalblue);
    align-items: flex-start; /* 아이템을 왼쪽 정렬 */
  }

header h1 {
  position: absolute; /* 위치를 지정하기 위해 absolute 사용 */
  top: 30%; /* 상단에서 30% 아래에 위치 */
  left: 50%; /* 좌우 중앙에 위치 */
  transform: translateX(-50%); /* 요소의 너비 절반만큼 왼쪽으로 이동하여 중앙 정렬 */
  margin: 0;
  flex-shrink: 0;
  z-index: 2; /* h1이 다른 요소보다 위에 오도록 설정 */
}

header h1 a {
  font: bold 30px/1 "Orbit";
  color: #fff !important; /* 흰색 글자색 지정 */
  letter-spacing: 1px;
  text-decoration: none; /* 하이퍼링크 밑줄 제거 */
}


header .menu {
  position: absolute; /* 위치를 지정하기 위해 absolute 사용 */
  top: 50%; /* h1 아래에 위치 */
  left: 50%; /* 좌우 중앙에 위치 */
  transform: translateX(-50%); /* 요소의 너비 절반만큼 왼쪽으로 이동하여 중앙 정렬 */
  display: flex; /* 링크 요소 자체를 flex로 설정 */
  align-items: center; /* 링크 내 아이콘과 텍스트를 수직 중앙 정렬 */
  z-index: 1; /* menu가 h1 아래에 오도록 설정 */
}

header .menu a {
  margin-right: 20px; /* 각 항목 간의 간격 조정 */
  color: #fff; /* 글자 색상을 흰색으로 설정 */
  text-decoration: none; /* 밑줄 제거 */
}

  header .menu a span{
	  font-size: 16px;
  }

header .menu a:last-child {
  margin-right: 0; /* 마지막 항목의 오른쪽 여백 제거 */
}


header .menu a:hover {
    text-decoration: underline; /* 호버 시 밑줄 표시 */
}



  main {
    margin-left: 400px;
    padding: 20px;
  }

        /* board.php에서 main에 대한 스타일 정의 */
        main.board {
            margin-left: 400px; /* header 너비만큼 왼쪽에 여백을 줌 */
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            width: calc(100% - 400px); /* 전체 너비에서 header 너비를 뺀 값 */
        }
        main.write {
            margin-left: 400px; /* header 너비만큼 왼쪽에 여백을 줌 */
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            width: calc(100% - 400px); /* 전체 너비에서 header 너비를 뺀 값 */
        }
        main.edit {
            margin-left: 400px; /* header 너비만큼 왼쪽에 여백을 줌 */
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            width: calc(100% - 400px); /* 전체 너비에서 header 너비를 뺀 값 */
        }
        main.view {
            margin-left: 400px; /* header 너비만큼 왼쪽에 여백을 줌 */
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            width: calc(100% - 400px); /* 전체 너비에서 header 너비를 뺀 값 */
        }
        main.board_detail {
            width: calc(100% - 420px); /* 헤더 넓이 고려 */
            margin-left: 420px; /* 헤더 넓이와 동일하게 설정 */
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }



}

        main.board h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        main.board table {
            width: 100%;
            border-collapse: collapse;
        }

        main.board table th, main.board table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }

        main.board table th {
            background-color: #007bff;
            color: white;
        }

        main.board table tr:hover {
            background-color: #f1f1f1;
        }

        main.board .new-post-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        main.board .new-post-button:hover {
            background-color: #218838;
        }  

        main.write h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        main.write form {
            display: flex;
            flex-direction: column;
        }

        main.write form input[type="text"],
        main.write form textarea {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
            font-size: 16px;
        }

        main.write form input[type="submit"] {
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        main.write form input[type="submit"]:hover {
            background-color: #0056b3;
        }

        main.edit h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        main.edit form {
            display: flex;
            flex-direction: column;
        }

        main.edit form input[type="text"],
        main.edit form textarea {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
            font-size: 16px;
        }

        main.edit form input[type="submit"] {
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        main.edit form input[type="submit"]:hover {
            background-color: #0056b3;
        }

        main.view h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        .comment-section {
            margin-top: 30px;
        }

        .comment-section h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .comment-section ul {
            list-style: none;
            padding: 0;
        }

        .comment-section li {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }

        .comment-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }

        .comment-form input[type="submit"] {
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .comment-form input[type="submit"]:hover {
            background-color: #0056b3;
        }


        .board_detail h1 {
            font-size: 28px;
            color: #333;
            margin-bottom: 20px;
        }

        .board_detail p {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .board_detail a {
            color: #007bff;
            text-decoration: none;
        }

        .board_detail a:hover {
            text-decoration: underline;
        }






/* 작은 화면을 위한 스타일 */
@media screen and (max-width: 1199px) {
  header {
    flex-direction: column;
    align-items: center; /* 중앙 정렬 */
    padding: 20px;
  }

  header h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }

header h1 a {
  font: bold 25px/1 "Orbit";
  color: #fff !important; /* 흰색 글자색 지정 */
  letter-spacing: 1px;
  text-decoration: none; /* 하이퍼링크 밑줄 제거 */
}

  header .menu {
    justify-content: center; /* 중앙 정렬 */
    margin-top: 10px;
  }
header .menu a {
  margin-right: 20px; /* 각 항목 간의 간격 조정 */
  color: #fff; /* 글자 색상을 흰색으로 설정 */
  text-decoration: none; /* 밑줄 제거 */
}

  header .menu a span{
	  font-size: 16px;
  }  

        main.board {
            width: 90%;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        main.write {
            width: 90%;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

       main.edit {
            width: 90%;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
		
        main.view {
            width: 90%;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }		

        main.board_detail {
            width: 90%;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             border-radius: 8px;
       }

  
}




@media screen and (max-width: 799px) {
  header h1 {
    font-size: 20px;
    margin-bottom: 8px;
  }
  header .menu {
    flex-direction: row;
    align-items: center; /* 중앙 정렬 */
  }
  header .menu-item {
    margin-bottom: 5px;
  }
  

  
  
}

@media screen and (max-width: 469px) {
header #form1 {
    display: flex;
    flex-direction: row; /* 가로 배열 */
    align-items: center;
    justify-content: flex-start;
    background-color: transparent; /* 배경색 제거 */
    border: none; /* 테두리 제거 */
    box-shadow: none; /* 그림자 제거 */
    padding: 0; /* 패딩 제거 */
    margin: 0 auto; /* 중앙 정렬 */
}


  header #form1 input[type="text"],
  header #form1 input[type="password"] {
    width: 25%;
    padding: 8px;
    font-size: 12px;
  }

  header #form1 input[type="submit"] {
    width: 20%;
	padding: 8px;
    font-size: 12px;
  }

  header .menu a span{
	  font-size: 15px;
  }

  
}



main {
  margin-left: 400px;
  min-height: 600px;
  padding: 20px;
}

main ul {
  width: 100%;
  margin-bottom: 10px;
  margin-right: 20px;
}
main ul::after {
  content: "";
  display: block;
  clear: both;
}
main ul li {
  float: right;
  margin-right: 20px;
  width: 80px;
  height: 26px;
}
main ul li a {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  font: bold 10px/26px "Orbit";
  color: #aaa;
  letter-spacing: 1px;
  text-align: center;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}
main ul li.on a {
  background: linear-gradient(45deg, aqua, cornflowerblue);
  color: #fff;
  box-shadow: 0px 5px 20px rgba(0, 255, 255, 0.5);
}
main section {
  width: 100%;
}
main section::after {
  content: "";
  display: block;
  clear: both;
}
main section article {
  width: 20%;
  float: left;
  overflow: hidden;
  padding: 12px;
}
main section article .inner {
  width: 100%;
  background: #fff;
  padding: 14px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}
main section article .inner img {
  width: 100%;
}
main section article .inner h2 {
  font: bold 11px/1 "Orbit";
  letter-spacing: 1px;
  color: #444;
  margin-top: 15px;
  margin-bottom: 5px;
}
main section article .inner p {
  font: 10px/1.2 "arial";
  color: #777;
  margin-bottom: 15px;
}

/* 더 작은 화면을 위한 스타일 */
@media screen and (max-width: 899px) {
  main section article {
    width: 25%;
  }
}

@media screen and (max-width: 699px) {
  main section article {
    width: 50%;
  }
}
@media screen and (max-width: 469px) {
  main section article {
    width: 50%;
  }
}






main {
  margin-left: 400px;
  min-height: 600px;
  padding: 20px;
}

main ul {
  width: 100%;
  margin-bottom: 10px;
  margin-right: 20px;
}
main ul::after {
  content: "";
  display: block;
  clear: both;
}
main ul li {
  float: right;
  margin-right: 20px;
  width: 80px;
  height: 26px;
}
main ul li a {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  font: bold 10px/26px "Orbit";
  color: #aaa;
  letter-spacing: 1px;
  text-align: center;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}
main ul li.on a {
  background: linear-gradient(45deg, aqua, cornflowerblue);
  color: #fff;
  box-shadow: 0px 5px 20px rgba(0, 255, 255, 0.5);
}
main section {
  width: 100%;
}
main section::after {
  content: "";
  display: block;
  clear: both;
}
main section article {
  width: 20%;
  float: left;
  overflow: hidden;
  padding: 12px;
}
main section article .inner {
  width: 100%;
  background: #fff;
  padding: 14px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}
main section article .inner img {
  width: 100%;
}
main section article .inner h2 {
  font: bold 11px/1 "Orbit";
  letter-spacing: 1px;
  color: #444;
  margin-top: 15px;
  margin-bottom: 5px;
}
main section article .inner p {
  font: 10px/1.2 "arial";
  color: #777;
  margin-bottom: 15px;
}


main .artwork-details {
    width: 90%;
    margin: 20px auto;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

main .artwork-image img {
    max-width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

main h1 {
    font-size: 24px;
    color: #333;
}

main p {
    font-size: 16px;
    color: #666;
}


main .comments-section {
    margin-top: 20px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

main .comments-section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

main .comments-section ul ul {
    padding-left: 20px; /* 답글 들여쓰기 */
    margin-top: 10px;   /* 답글 간격 추가 */
}

main .comments-section ul li {
    margin-bottom: 10px; /* 댓글 간격 조정 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    display: block;
    width: calc(100% - 20px); /* 댓글 박스가 화면에 맞게 커지도록 설정 */
    position: relative;
    overflow: visible; /* 댓글 내용에 따라 박스가 커지도록 설정 */
    word-wrap: break-word; /* 긴 단어가 박스 밖으로 넘치지 않도록 설정 */
    box-sizing: border-box; /* 패딩과 테두리를 포함한 전체 크기를 설정 */
    min-height: 50px; /* 최소 높이 설정 */
    height: auto; /* 높이를 자동으로 설정 */
}

main .comments-section ul li .comment-header {
    font-weight: bold;
    margin-bottom: 5px;
}

main .comments-section ul li .comment-body {
    margin-bottom: 5px;
    color: #333;
}

main .comments-section ul li .comment-footer {
    font-size: 0.9em;
    color: #555;
    margin-top: 10px; /* 답글 링크와의 간격 조정 */
	
}

main .comments-section ul li .reply-link {
    font-size: 0.8em;
    color: #007bff;
    cursor: pointer;
    display: inline-block;
    margin-top: 5px;
    width: calc(100% - 90%);

}


main .comment-form textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
}

main .reply-form textarea {
    width: 80%;
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
}

main .comment-form input[type="submit"] {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
}

main .comment-form input[type="submit"]:hover {
    background-color: #0056b3;
}



main .grid {
    position: relative;
}

main .article {
    width: 25%; /* 각 항목의 너비 */
    margin-bottom: 10px;
}






@media screen and (max-width: 1199px) {
  main {
    margin-left: 0px;
  }
}
@media screen and (max-width: 899px) {
  main section article {
    width: 25%;
  }
}

@media screen and (max-width: 699px) {
  main section article {
    width: 50%;
  }
}
@media screen and (max-width: 469px) {
  main section article {
    width: 50%;
  }
}

/*# sourceMappingURL=style.css.map */