/*일반 게시판 형태*/
.post-simple-list{
    width:100%;
    margin-top : var(--spacing-sm);
    display: block;
    position: relative;
    background: white;
    box-shadow: 0 0 7px 0 rgba(0,0,0,.14);
    /*border-radius : 6px;*/
}

/* 테이블 상단 공통 */
.post-list-table thead th{
    border-top: 1px solid var(--main-item-border-color);
    padding: 0 8px;
    border-bottom: 1px solid var(--main-item-border-color);
    background: var(--secondary-color);
    color: white;
    text-align: center;
    font-weight: 600;
    height : 40px;
    vertical-align: middle; /* 수직 정렬을 중앙으로 설정합니다. */
    white-space : nowrap;
    overflow: hidden; /* 텍스트 잘라내기 */
}




/* 테이블 상단 중 제목과 작성자 컬럼 제외*/
.post-list-table th:not(.title, .profile){
    text-align: center;
    width: 65px;
}

/* 작성자 컬럼은 아래와 같이 별도로 */
.post-list-table th.profile{
    text-align: center;
    width: 120px;
}


.post-list-table tbody td {
    text-align: left;
    font-size: 16px;
    height : 50px;
    vertical-align: middle; /* 수직 정렬을 중앙으로 설정합니다. */
  /*  border-bottom : 1px solid var(--main-item-border-color);*/
}



/* 테이블 내용, 제목 컬럼 제외*/
.post-list-table tbody td:not(.title) {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--silver-text-color);
}




.post-list-table{
    margin: 0;
    width: 100%;
    border-top: thin solid var(--main-item-border-color);
    border-left: thin solid var(--main-item-border-color);
    border-right: thin solid var(--main-item-border-color);
    font-size: var(--text-base);
}

/*부모가 post-list-table이고 그 자식 중에 title인 것*/



.post-row{
    border-bottom: 1px solid var(--main-item-border-color);

}

.post-list-table .post-id{

}


.post-list-table .category{
    white-space: nowrap;
    font-weight: 600;
}

.post-list-table td.title{
    display: flex;
    align-items: center;
    padding-left : var(--spacing-base);
   /* min-width :
    max-width :*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*데스크탑 열에서 제목 링크 부분*/
.title-link{
    display : inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width : 400px;
    font-size: var(--text-md);
}

.title-link:hover{
    text-decoration: underline; /* 마우스 오버 시 밑줄 추가 */
    color: var(--text-hover-pink-color); /* 마우스 오버 시 텍스트 색상 변경 (예: 빨간색) */
}

.profile .profile-image{
    width : 25px;
    height : 25px;
    border: 1px solid var(--skinThumbBorder);
    border-radius: 50%;
    margin-right : var(--spacing-xs);
    vertical-align: middle; /* 수직 정렬을 중앙으로 설정합니다. */
}

.profile .nickName{
    color : var(--secondary-color);
    vertical-align: middle; /* 수직 정렬을 중앙으로 설정합니다. */
    white-space: nowrap;
}



.post-list-table .comments::before{
    content: "[";
    font-weight : 600;
    margin-left : var(--spacing-xs);
    color : red;
}

.post-list-table .comments{
    display : block; /*23.10.10 추가 */
    font-weight : 600;
    vertical-align: middle;
    color : red;
}

.post-list-table .comments::after{
    content: "]";
    font-weight : 600;
    color : red;
}

.new-post-tag {
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: var(--spacing-2xs) var(--spacing-xs);
  margin-left: var(--spacing-2xs);
  font-size : var(--text-xs);
  opacity: 0.8; /* 투명도 값을 원하는 값으로 조정 (0.0 ~ 1.0) */
}

.contents-has-picture{
    width : 20px;
    height : 20px;
    margin-left : var(--spacing-2xs);
    vertical-align: middle;
}

/*공통 - 모바일만 보여주는 항목인 경우 숨기기*/
.mobile-show{
    display : none;
}


@media (min-width: 960px) and (max-width: 1200px){

    /* 중간 크기 커뮤니티/공지사항 타이틀 길이 조절 */
    .title-link{
        max-width : 300px;
    }
}

/* 세번째 크기*/
@media (min-width: 768px) and (max-width: 960px){
    /* 세번째 크기 커뮤니티/공지사항 타이틀 길이 조절 */
    .title-link{
        max-width : 245px;
    }
}

/* 모바일 모드 */
@media (max-width: 767px){
    .post-list-table tbody td{
        border-bottom :  none;
    }

    /*모바일 테이블 첫행 숨기기 이름*/
    th[scope="col"]{
        display : none;
    }

    .post-list-table tbody td {
        height : 65px;
    }

    /* 모바일 커뮤니티 기본 로우 */
    tr.post-row{
        padding-left: var(--spacing-xs);
        cursor: pointer; /* 마우스 커서를 포인터로 변경하여 클릭 가능한 것임을 나타냅니다. */
        display : flex;
        height : 75px;
        width : 100%;
        align-items : center;
        position : relative;
        border-bottom :  1px solid var(--main-item-border-color);
    }

    /*모바일에서는 행 전체에 링크를 줘야하므로 */
    .link-mobile{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* 다른 요소 위로 레이어를 설정합니다. */
    }


    /* 모바일 카테고리 */
    td.category.custom-td {
      font-weight: 800;
      white-space: normal;
      margin-left: var(--spacing-2xs);
      margin-right: var(--spacing-sm);
      /*padding-left : var(--spacing-sm);*/
      width : 25px;
      justify-content : center;
      order: 1; /* 카테고리 첫 번째로 표시합니다. */
      display : flex;
      align-items : center;
    }


    /*모바일, 제목 기본*/
    td.title.custom-td {
      order: 2;
      height : auto;
      display : flex;
      align-items : center;
      position: relative;
      top: -15px;
      padding-left : 0;
      padding-top: 12px;
      width : calc(100% - 120px);
    }

    /*모바일, 제목 이미지 있는 경우*/
    td.title.custom-td.has-image {
      width : calc(100% - 110px);
    }


    /* 모바일 제목 2줄 표시 */
    .title-link{
       /* min-width : calc(300px - 30px);*/
       /* width :*/
        max-width : 560px;
        word-break: break-all;   /* 띄어쓰기 안하는 문제 때문에 추가함 */
        white-space: pre-line;
        word-wrap: break-word;
        max-width: 560px;
        display: -webkit-inline-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }


    .profile-div{
        display: flex;
        align-items: center;
    }

    /* 모바일 글쓴이 프로필 이미지 크기 25에서 20으로 줄임 */
    .profile .profile-image{
        width : 20px;
        height : 20px;
    }

    /* profile 요소의 스타일을 조정합니다. */
    td.profile.custom-td {
        order: 3;
        height : auto;
        display : flex;
        align-items : center;
        position: absolute;
        bottom: 7px;
        left: 60px;
    }

    .profile .nickName {
        color: var(--silver-text-color);
    }

    /* post-date 요소의 스타일을 조정합니다. */
    .post-date.mobile-show{
        padding-left : var(--spacing-xs);
        color: var(--silver-text-color);
    }

    td.image-thumbnail-box {
        order: 4;
        display : flex;
        align-items : center;
        position : absolute;
        right : 10px;
    }

    .image-thumbnail-box{
        width : 55px;
        height : 55px;
        overflow: hidden; /* 추가 */
    }

    .image-thumbnail{
        width : 55px;
        height : 55px;
        border-radius: 6px;
        object-fit: cover;
    }

    td.custom-td {
        border-bottom : none;
    }

    .view-count.mobile-show::before{
        font-family: "Font Awesome 6 Free";
        content : "\f06e";
        margin-left : var(--spacing-xs);
        margin-right : var(--spacing-xs);
        color: var(--silver-text-color);
        font-weight : 800;
    }


    .likes-count.mobile-show::before{
        font-family: "Font Awesome 6 Free";
        content : "\f004";
        margin-left : var(--spacing-xs);
        margin-right : var(--spacing-xs);
        color: var(--silver-text-color);
        font-weight : 800;
    }


    /* 마지막 td 요소에 padding-right를 적용합니다. */
    tr td:last-child {
      margin-right: 10px; /* 원하는 값으로 설정하세요. */
    }

    /*모바일에서는 숨기는 것들에 적용*/
    .only-desktop{
        display : none;
    }

    /* 모바일 - 모바일만 보여주는 항목*/
    .mobile-show{
        display : block;
    }
}