/* 서브메뉴 컨테이너 */
.table-container {
    display: flex;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;


}



table {
    width: 100%;
    border-left:none;
    border-right:none;
    border-collapse:collapse;
    text-align: left;
}

/* 테이블 헤더 스타일 */
table th {
    background-color: #f4f4f4;
    text-align: center;
    padding: 12px;
    border-left: none;
    border-right: none;
}

table .desktop-table {
    border: 1px solid black; /* 테이블 외곽에 보더 추가 */
    border-collapse: collapse; /* 중복된 보더 제거 */
}

table th.number,
table td.number {
    width: 8%; /* 번호 열 */
}

table th.title,
table td.title {
    width: 58%; /* 제목 열 */
    text-align: left; /* 제목은 왼쪽 정렬 */
    overflow:hidden;
}

table th.writer,
table td.writer {
    width: 15%; /* 글쓴이 열 */
}

table th.date,
table td.date {
    width: 10%; /* 날짜 열 */
}

table th.views,
table td.views {
    width: 10%; /* 조회수 열 */
}
table td {
    padding: 12px;
    border-bottom: 1px solid #ddd; /* 가로 줄만 표시 */
    text-align: center; /* 기본적으로 가운데 정렬 */
    white-space: nowrap; /* 넘친 텍스트를 한 줄로 유지 */
    overflow: hidden; /* 넘친 부분은 숨김 */
    text-overflow: ellipsis; /* 말줄임표 추가 */
    font-size: 15px; /* 글씨 크기 20px로 설정 */
    border-left: none; /* 세로 줄 제거 */
    border-right: none; /* 세로 줄 제거 */
}

/* 테이블 데이터 스타일 */


table td.title {
    text-align: left; /* 제목은 왼쪽 정렬 */
    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
    overflow: hidden; /* 넘친 부분은 숨김 */
    text-overflow: ellipsis; /* 말줄임표 추가 */

}

table td.writer,
table td.date,
table td.views {
    text-align: right; /* 작성자, 작성일, 조회수는 오른쪽 정렬 */
}

table td.title a {
    text-decoration: none;
    color: #111;
    font-weight: bold;
    display: block;
    padding-left : 10px;
}

table tbody th{
    background : white;
}

.search-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.search-bar select, .search-bar input, .search-bar button {
    padding: 8px;
    margin-right: 10px;
    font-size: 14px;
}

.page-title {
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
    font-weight: bold;
}

/* 페이징 스타일 */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    list-style-type: none;
    padding: 0;
}

.pagination li {
    margin: 0 5px;
}

.pagination a,
.pagination strong {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    background-color: #ffffff;
    color: #3f3f3f;
    font-weight: bold;
    border: 2px solid #ccc;
    transition: background-color 0.3s, border-color 0.3s;
}

.pagination a:hover {
    background-color: #f2dbff;
    color: #000000;
    border-color: #000000;
}

.pagination strong {
    background-color: #000000;
    color: #ffffff;
    border-color: #797979;
}


/* 서브메뉴 컨테이너 */
.centera {
    display: flex;
    justify-content: right;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;


}

.edit-btn { background-color: #007bff;
    color: white; padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; margin-left: 20px; / Space between the pagination and button */ justify-content: center; display:grid;  }



/* Aside (좌우 여백을 위한 스타일) */
aside {
    width: 150px;
    margin: 0 20px;
    display: inline-block;
    vertical-align: top;
}
.title{
    font-size:19px;
}

 :root{
        --reply-notice:#d9534f;   /* 공지 (빨강) */
        --reply-hold:#c77f00;     /* 보류중 (-1) */
        --reply-progress:#555;    /* 답변대기중 (0) */
        --reply-done:#1F875D;     /* 답변완료 (1) */
        --reply-font:'Pretendard','Noto Sans KR',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      }
      .reply-badge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-family:var(--reply-font);
        font-weight:700;
        font-size:12px;
        line-height:1.1;
        letter-spacing:.02em;
        white-space:nowrap;
        vertical-align:middle;
        user-select:none;
        padding:.28rem .6rem;
        border-radius:9999px;   /* 캡슐형 */
        background:transparent;
        margin-right:6px;
        text-decoration:none;
        border:1.5px solid transparent;
      }
      .reply-badge--notice{   color:var(--reply-notice);   border-color:var(--reply-notice); }
      .reply-badge--hold{     color:var(--reply-hold);     border-color:var(--reply-hold); }
      .reply-badge--progress{ color:var(--reply-progress); border-color:#aaa; }
      .reply-badge--done{     color:var(--reply-done);     border-color:var(--reply-done); }


/* 반응형 스타일 */
@media (max-width: 768px) {
    table th, table td {
        font-size: 12px;
        padding: 8px;
    }

    table td {
        padding: 12px;
        border-bottom: 1px solid #ddd; /* 가로 줄만 표시 */
        text-align: center; /* 기본적으로 가운데 정렬 */
        white-space: nowrap; /* 넘친 텍스트를 한 줄로 유지 */
        overflow: hidden; /* 넘친 부분은 숨김 */
        text-overflow: ellipsis; /* 말줄임표 추가 */
        font-size: 15px; /* 글씨 크기 20px로 설정 */
        border-left: none; /* 세로 줄 제거 */
        border-right: none; /* 세로 줄 제거 */
    }

    table th
    {
        display : none;
    }


    .number{
        display:none;
    }

    .number{
        display:none;
    }

    tr .hie{
        height: 50px; /* Set height for table rows */
    }

    .title{
        font-size:12px;
    }
    .view {
        display: none;
    }

    table td{
        border-left:none;
        border-right:none;
        border-collapse:collapse;
    }

    .search-bar {
        flex-direction: column;
        align-items: center;
    }

    .search-bar select, .search-bar input, .search-bar button {
        margin-bottom: 10px;
        width: 100%;
        max-width: 300px;
    }
    .mobile-layout {
        display: block;
        padding: 15px;
        background-color: #f9f9f9; /* Light background for contrast */
        border-radius: 10px; /* Soft rounded corners */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        max-width: 100%;
    }
    .edit-btn {
        width: 100%;                 /* 버튼 너비를 100%로 설정 */
        background-color: transparent; /* 배경색 투명 */
        color: #000;                 /* 글씨 색상 검정 */
        font-weight: bold;           /* 글씨 굵기 */
        text-align: center;          /* 텍스트 가운데 정렬 */
        padding: 10px 0;             /* 위아래 여백 */
        font-size: 16px;             /* 글씨 크기 */
        border: 2px solid #000;      /* 검은색 테두리 */
        border-radius: 5px;          /* 테두리 둥글게 */
        cursor: pointer;             /* 마우스 오버 시 포인터 */
        transition: background-color 0.3s ease, color 0.3s ease; /* 부드러운 전환 */
        background:white;
        display: flex;               /* Flexbox로 정렬 */
        align-items: center;         /* 수직 중앙 정렬 */
        justify-content: center;     /* 수평 중앙 정렬 */
        box-sizing: border-box;      /* padding 포함된 크기 유지 */
        margin-left: 0px;
    }

    .edit-btn:hover {
        background-color: #f0f0f0;   /* 호버 시 연한 회색 배경 */
        color: #000;                 /* 글자 색상 유지 */
    }



    /* Each post styling */
    .post {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 15px; /* Space between posts */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Soft shadow for depth */
        transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animation for hover effect */
    }

    .post:hover {
        transform: translateY(-5px); /* Slight upward movement on hover */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Increased shadow on hover */
    }

    /* Title styling */
    .post .title {
        font-weight: bold;
        font-size: 1.1em;
        color: #333; /* Darker color for visibility */
        display: block;
        text-overflow: ellipsis; /* Ensure long titles are truncated */
        white-space: nowrap;
        overflow: hidden;
    }

    .mobile-layout a {
        text-decoration: none;
        color: #111;
        font-weight: bold;
        display: block;
    }
    .centera {
        display: flex;
        width:100%;
        justify-content: center;
        margin: 0;
        padding: 0;

    }
	
	    .centeran {
        display: flex; /* Flexbox 활성화 */
        width: 95%; /* 너비 설정 */
        justify-content: center; /* 수평 가운데 정렬 */
        align-items: center; /* 수직 가운데 정렬 */
        margin: 0 auto; /* 부모 컨테이너 내에서 가운데로 이동 */
    }




    /* Details row styling */
    .post .details {
        font-size: 0.9em;
        color: #777; /* Subtle grey for secondary information */
        line-height: 1.6;
    }



    /* Adjust spacing between elements for mobile */
    .mobile-layout .post {
        padding: 20px;
    }
	
	
}