/* Global styles */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: #f4f8ff;
    color: #111827;
}
p {
  overflow: hidden;
  word-wrap: break-word;
  white-space: normal;
}
*{
                    font-family: 'Pretendard', sans-serif;
}
/* Container */
.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 1.5rem;
}

/* Header */
h3 {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Forms and inputs */
input[type="text"], input[type="password"], textarea {
    max-width: 96% !important;
    padding: 0.75rem; /* 12px */
    border: 0px solid #d1d5db;
    border-radius: 1rem; /* 6px */
    margin-bottom: 1rem;
    font-size: 1rem; /* 16px */
    background-color: #f9fafb;
    color: #111827;
    min-height: 25px;
    width: 100%;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: #ffffff;
}

/* Buttons */
button {
    display: inline-block;
    padding: 0.5rem 1rem; /* 8px 16px */
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: #ffffff;
    background-color: #3b82f6;
    border: none;
    border-radius: 10px; /* 6px */
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}

button:hover {
    background-color: #2563eb;
}

button[disabled] {
    background-color: #3b82f6;
    cursor: not-allowed;
}

/* Post and comments */
.post, .comment {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 0.375rem; /* 6px */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
}

.post h5, .comment h5 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.post p, .comment p {
    font-size: 1rem; /* 16px */
    color: #6b7280;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.pagination button {
    margin: 0 0.25rem;
}

/* Admin sections */
.hidden {
    display: none;
}

.show {
    display: block !important;
}

/* Responsive design */
@media (max-width: 640px) {
    .container {
        padding: 1rem;
    }

    h3 {
        font-size: 1.5rem; /* 24px */
    }

    input[type="text"], input[type="password"], textarea, button {
        font-size: 0.875rem; /* 14px */
    }

    .post h5, .comment h5 {
        font-size: 1.125rem; /* 18px */
    }

    .post p, .comment p {
        font-size: 0.875rem; /* 14px */
    }
}

/* Utility classes */
.text-center {
    text-align: center;
}

.font-bold {
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
}

.bg-white {
    background-color: #ffffff;
}

.bg-gray-100 {
    background-color: #f4f8ff;
}

.bg-blue-500 {
    background-color: #3b82f6;
}

.text-white {
    color: #ffffff;
}

.rounded-md {
    border-radius: 0.375rem; /* 6px */
}

.shadow-md {}

.mb-4 {
    margin-bottom: 1rem; /* 16px */
}

.mb-6 {
    margin-bottom: 1.5rem; /* 24px */
}

.mb-8 {
    margin-bottom: 2rem; /* 32px */
}

.mt-2 {
    margin-top: 0.5rem; /* 8px */
}

.mt-4 {
    margin-top: 1rem; /* 16px */
}

.mt-8 {
    margin-top: 2rem; /* 32px */
}

#notices-container {
  background: white;
  padding: 1rem;
  border-radius: 1.5rem;
}
#posts-container {
  border-radius: 1.5rem;
}
.flex.justify-between, #admin-login-section, #new-post-form{
  background: #fff;
  padding: 1rem;
}
#new-post-form input:not(#is_secret), #new-post-form textarea{
    width: 96%; 
}

h5 {
  font-weight: bold !important;
  color: black !important;
  margin-top: 2rem !important;
}

.pagination button {
    background-color: #9ca3af; /* 기본 색상 */
    color: white;
    padding: 0.70rem 1rem;
    margin: 0 0.25rem;
    border: none;
    border-radius: 10rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pagination button:hover:not([disabled]) {
    background-color: #3b82f6; /* hover 시 색상 */
}

.pagination button[disabled] {
    background-color: #3b82f6; /* 비활성화된 버튼의 색상 */
    cursor: not-allowed;
}


.container.mx-auto.mt-8.flex.justify-end {
  box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1);
  background: white;
  padding: 1rem;
  text-align: center;
}
#comments-section {
  margin-top: 2rem;
  background: white;
  padding: 1rem;
  border-radius: 1.5rem;
}
.flex.justify-between {
  margin-top: 1rem;
  border-radius: 1rem;
}
#admin-login-section {
  text-align: center;
}
#new-post-form {
  text-align: center;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus{
    background-color:aliceblue
}

#admin-login-btn {
  background: white;
  color: #3b82f6;
  border: 1px solid #3b82f6;
  margin-bottom: 1rem;
}
h3{
    font-size:1.1rem !important;
}
.items-center span:not(.text-gray-500 span){
    font-size: 1.1rem!important;
}
button span{
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
}

.post-detail {
  background: white;
  padding: 1rem;
  border-radius: 1.5rem;
}
#new-notice-btn {
  background: white;
  color: #3b82f6;
  border: 1px solid #3b82f6;
}

#pagination {
  text-align: center;
}
.pagination-button {
  margin-left: 0.3rem;
  border-radius: 10rem;
  padding: 0.66rem 1rem;
  background-color: #9ca3af;
}


/* 추가한 CSS를 유지하면서 필요한 스타일 추가 */

#new-post-form input[type="text"], #new-post-form input[type="password"], #new-post-form textarea {
    width: 100%; /* 100% 너비로 설정 */
}


.flex.mb-4 > input[type="text"] {
    width: 48%;
    margin-right: 1%;
}

.hidden {
    display: none;
}

.show {
    display: block !important;
}

/* 관리자 로그인 섹션 스타일 */
#admin-login-section {
    text-align: center;
    margin-top: 2rem;
    border-radius: 1.5rem;
}

#admin-banner {
  text-align: center;
  background-color: #3b82f6;
  color: white;
}

#new-notice-form {
  background: white;
  padding: 1rem;
  border-radius: 1.5rem;
}
.notice-font{
    font-size:1.5rem;
    font-weight: 700;
    text-align:left;
}
#loading-spinner {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* 가장 위에 표시되도록 */
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 게시글 로드 전, 500px의 스켈레톤을 미리 차지 */
#posts-container {
    min-height: 500px;
}

/* 스켈레톤 스타일 */
.skeleton {
    background-color: #fff;
    width: 100%;
    height: 500px;
    border-radius: 1.5rem;
}

/* 로딩바 스타일 */
.loading-bar {
    width: 0%;
    height: 7px;
    background: linear-gradient(to right, #2f7fff, #5B9AFF, #aecdff);
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.3s ease;
    border-radius: 1.5rem;
}

/* 로딩 중인 페이지의 컨테이너 */
.loading-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.flex.mb-4 {
  display: flex;
}
.swal2-show {
  border-radius: 1.5rem!important;
  box-shadow: 0 10px 30px rgba(90, 144, 225, 0.1);
}
div:where(.swal2-container) button:where(.swal2-styled) {
  padding: 0.75rem 1.5rem!important;
  border-radius: 10px !important;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
  background-color: #3b82f6!important;
}
.justify-between .flex.items-center {
  max-width: 80%;
}


@media(max-width:500px){
    
.justify-between .flex.items-center {
  max-width: 70%;
}
}
@media(max-width:300px){
    
.justify-between .flex.items-center {
  max-width: 60%;
}
}
.material-icons{
    font-size: 20px!important;
}

#search-container input {
  width: 87%;
}
#search-container {
  background: white;
  padding: 1rem;
  border-radius: 1.5rem;
  margin-bottom: 1rem;
}

#search-container button{
  padding: 1rem;
  border-radius: 1rem;
}
@media(max-width:992px){
  #search-container input {
    width: 80%;
  }
}
@media(max-width:500px){
  #search-container input {
    width: 70%;
  }
}
@media(max-width:350px){
  #search-container input {
    width: 60%;
  }
}
.text-primary {
  margin-top:1rem;
  color: #3b82f6;
  text-decoration: none;
}