/* 전체 컨테이너 크기 */
.post-container {
    margin :var(--spacing-base) auto;
    padding : var(--spacing-base) var(--spacing-base);
    width: 100%;
    max-width: var(--container-width);
}

.community-main-contents{
    width : 100%;
    max-width : 64rem;
}

.post-area {
    margin: var(--spacing-base) auto;
    padding: 0 var(--spacing-base) var(--spacing-xl) var(--spacing-base);
    width: 100%;
    max-width: var(--container-width);
    border: thin solid var(--main-item-border-color);
    background: white;
    border-radius: 6px;
}

.post-container .top-line{
    border-top : 6px solid #008960;
}

/* simpleSalePost와 communityPost 모두 반영해야함 시작 */
.ck-editor__editable {
    height: 50vh;

    max-width : 1200px;
    min-width: 250px;
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: auto; /* 가로 스크롤은 없애지 않고 필요하면 자동 */
}

.ck-editor{
    height: 50vh;
    width: 75vw;
    max-width : 1200px;
    min-width: 250px;
}

.ck.ck-toolbar, .ck-toolbar_grouping{
    max-width : 1200px;
    min-width: 250px;
    width: 80vw;

}

.ck-content img{
    width : 100%;
    max-width: 750px !important; /* 필요시 최대 높이 설정 */
    height: auto !important;    /* 원본 비율 유지 */
}
/* simpleSalePost와 communityPost 모두 반영해야함 끝 */

/**/
.form-group{
    display : flex;
    align-items: center;
    flex-wrap : wrap;  /*줄바꿈*/
    white-space: nowrap; /* 텍스트 줄 바꿈 방지 */
    overflow: hidden; /* 텍스트가 요소를 넘어가면 숨김 */
    text-overflow: ellipsis; /* 넘어간 텍스트를 ...으로 표시 */
    /*width : 95%;*/
    padding : var(--spacing-base) 0;
    border-bottom : thin solid var(--main-item-border-color);
}

/*23.12.27 추가*/
/*게시물 작성할 때, 필수 항목 표시*/
.asterisk-dot-icon{
    margin-left : var(--spacing-2xs);
    color : var(--must-red);
    width : 16px;
}


.input-title{
    width: 15%;
    max-width : 20vw;
    display: inline-block;
    padding-left: var(--spacing-base);
   /* border-right : thin solid var(--main-item-border-color);*/
}


.input-text{
    display: inline-block;
    line-height: 30px;
    align-items: center;      /*박스 내 수직 정렬 중앙으로*/
    width: 70%;
    min-height : var(--text-box-height-base);
    padding-left : var(--spacing-sm);
    white-space: nowrap;         /* 줄 바꿈 금지 */
    overflow: hidden;            /* 넘친 부분 감춤 */
    text-overflow: ellipsis;     /* ... 표시 */
}

/*띄어쓰기가 없을 때는 AND 조건*/
.input-text.editable{
    border: thin solid var(--main-item-border-color);
    border-radius: var(--border-radius-xs);
    background : var(--input-text-background-color);
}


/* 데스크탑 제목 영역 */
.title_section.community-board{
    padding-top : var(--spacing-lg);
    padding-bottom : var(--spacing-lg);
    padding-left : var(--spacing-base);
}


/* 공통 카테고리 */
.community-category {
    font-weight: 400;
    font-size: var(--text-xs);
    display: inline-flex;
    align-items:center;
    background-color: var(--disabled-color);
    color: var(--silver-text-color);
    padding: 0px 8px;
    border-radius: var(--border-radius-xs);
    margin-bottom: var(--spacing-2xs);
    height:24px;
}


/*데스크탑 제목 */
.title_text.community-board{
    font-size : var(--text-lg);
    font-weight : 600;
    display : block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 데스크탑 작성자 정보 영역 */
.info-section.community-board{
    padding: var(--spacing-base) 0;
    display: flex;
    align-items: center;
    gap : var(--spacing-base);
    flex-wrap: wrap;
    row-gap: var(--spacing-xs);
}

.category-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: nowrap !important;
}

.category-section > * {
    flex-shrink: 0;
}

.post-area .author-profile{
    display: flex;
    align-items: center;
    flex-wrap: wrap;   /* 크기가 줄어들 때 자동으로 줄 바꿈 */
    border-bottom: 1px solid var(--main-item-border-color);
    padding: var(--spacing-base) var(--spacing-base);
    gap: var(--spacing-xs);
}

.post-area .profile-image-nickName{
    display: flex;
    align-items: center;
}


/* 데스크탑 프로필 사진 */
.post-area .profile-image{
    width : 32px;
    height : 32px;
    border: 1px solid var(--skinThumbBorder);
    border-radius: 50%;
    margin-right : var(--spacing-xs);
}

.post-area .header-divider {
    color: var(--silver-text-color);
}

/*공통*/
.post-area #post_time{
    color : var(--silver-text-color);
    font-size : var(--text-sm);
    font-weight: 400;
}


.info-section.community-board .count-area{
    display: flex;
    gap: var(--spacing-base);
    align-items: center;
}

.count-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--light-grey); /* 기존 silver-text-color보다 연하게 */
}

.wish-count-item svg {
    color: var(--red);
    opacity: 0.7; /* 하트 아이콘도 살짝 연하게 */
}

.count-item .meta-icon {
    width: 24px;
    height: 24px;
    opacity: 0.8; /* 아이콘 자체 투명도 조절 */
}

.count-item span {
    font-size: var(--text-base);
    color: var(--light-grey);
}



/* 입력 값 오류 있을 때 */
.invalid-input {
  border: 3px solid red;
}


.contents-area{
    padding-left: var(--spacing-lg);
    padding-top : var(--spacing-2xl);
    padding-bottom : var(--spacing-2xl);
    margin-bottom : var(--spacing-2xl);
    word-wrap : break-word;
}

/* 좋아요, 링크 이동, 공유하기 */


#like_button.unfilled {
    font-weight: 400;
}




/* 목록, 수정, 삭제 버튼 일렬 오른쪽 끝 */
.button-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top   : var(--spacing-base);
}

.button-inner-container{
    gap : var(--spacing-sm);
}

.image-list{
    display: flex;
    align-items: center;
    display: block;
    table-layout: fixed;
    text-align: center;   /*플러스 아이콘 가운데 정렬*/
}


/*이미지 리스트 내 요소 하나*/
.image-list .register-image{
    display : flex;
    justify-content: center;
    align-items: center;
    border : medium dotted var(--main-item-border-color);
    width : 360px;
    height : 360px;
    box-sizing: border-box;  /* 테두리 크기를 포함하여 크기 계산 */
    cursor : pointer;
    background : var(--input-text-background-color);
}

.image-list .register-image i{
    font-size : var(--icon-xl);
    color : var(--secondary-color);
}


/* 게시물 내용 중 링크가 있을 때 */
.contents-box .external-link:hover{
    text-decoration: underline; /* 마우스 오버 시 밑줄 추가 */
    color: var(--text-hover-pink-color); /* 마우스 오버 시 텍스트 색상 변경 (예: 빨간색) */
}

/*에디터 입력창 위아래 여백 주기*/
.contents-editor-box{
    padding-top : var(--spacing-xl);
    padding-bottom : var(--spacing-xl);
}


/*모바일 기기*/
@media (max-width: 767px){
    /*모바일 입력 타이틀 크기 15%-> 30%*/
    .input-title{
        width: 30%;
    }

    /* 모바일 게시물 바깥 영역 */
    .post-area{
        padding: 0 var(--spacing-base) var(--spacing-xl) var(--spacing-base);
    }

    .post-area .author-profile {
        padding: var(--spacing-sm) var(--spacing-sm);
        display: flex;
        flex-wrap : nowrap;
        align-items: center;
        gap: var(--spacing-xs) ;
    }

    .post-area .header-divider {
        display : none;
    }


    .profile-image-nickName,
    .post-time {
        display: inline-flex;
        align-items: center;
    }


    /* 모바일 커뮤니티 게시물 상단 제목 영역 */
    .title_section.community-board {
        padding-top: var(--spacing-base);
        padding-bottom: var(--spacing-base);
        padding-left: var(--spacing-sm);
    }

    /* 모바일 커뮤니티 타이틀 */
    .title_text.community-board{
        word-break: break-all;   /* 띄어쓰기 안하는 문제 때문에 추가함 */
        white-space: pre-line;
        word-wrap: break-word;
        display: -webkit-inline-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 모바일 커뮤니티 게시물 작성 시간*/
    .info-section.community-board #post_time{
        margin-top : var(--spacing-sm);
    }

    /* 모바일 커뮤니티 게시물 좋아요 수 등 */
    .info-section.community-board .count-area {
        margin-top: 0;
    }

    /*모바일 메인 이미지 크기*/
    .image-list .register-image{
        width: 35vw;
        height: 35vw;
        aspect-ratio: 1/1;
        min-width: 140px;
        max-width: 360px;
    }

    .contents-area{
        padding-left : 0;
        padding-top : var(--spacing-lg);
        padding-bottom : var(--spacing-lg);
        word-wrap : break-word;
    }

}