/* 작성자 닉네임 */
.author{
    white-space : nowrap;
    cursor : pointer;
}

.author:hover{
    text-decoration : underline;
}

/*23.10.12 게시물 기본내용*/
.description-post{
    background-color : var(--input-text-background-color);
    padding : var(--spacing-xl) var(--spacing-lg);
    margin-top : var(--spacing-xl);
    margin-bottom : var(--spacing-xl);
    border : 1px solid var(--main-item-border-color);
}


/* 좋아요, 링크 이동, 공유하기  시작 read HTML 공통*/
.social-button-wrap{
    margin-top : var(--spacing-base);
    margin-bottom : var(--spacing-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-button{
    color: white;
    background-color: var(--secondary-color);
    border-color: #555;
    border-radius: var(--border-radius-base);
    font-size : var(--text-md);
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25);
    width: 133px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 15px;
    margin : 0 var(--spacing-2xs);
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    transition: background-color 0.3s ease-in-out;
}

.social-button:hover{
    transform : scale(1.05);
    background-color: var(--secondary-hover-color);
}

.column > .shop-now-wrap{
    margin-top : var(--spacing-base);
    display: flex;
    align-items: center;        /*수직 중앙 정렬*/
    justify-content: center;    /*수평 중앙 정렬*/
}


.shop-now-wrap{
    display : flex;
    align-items: center;        /*수직 중앙 정렬*/
    justify-content: center;    /*수평 중앙 정렬*/
}

.shop-now-button{
    color: white;
    background-color: var(--green-button-color);
    /*border-color: #555;*/
    border-radius: 12px;
    font-size : var(--text-md);
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25);
    width: 100%;
    display: inline-block;
    padding: 20px 25px;
    margin : 0 var(--spacing-2xs);
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
}


.shop-now-button:hover{
    box-shadow : 0 0 0 1px var(--green-button-hover-color);
    background-color: var(--green-button-hover-color);
}

/* 클릭 시 눌리는 듯한 효과 */
.active-button:active {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 3px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(2px); /* 눌리는 듯한 움직임 */
}


/*링크를 100%로 만들어야 텍스트 외 클릭 시에도 링크로 연결됨*/
.shop-now-link{
    display : block;
    width : 100%;
    max-width: 400px;
    text-align: center; /* Optional: Center the text */
    height : 100%;
}


#like_icon, #share_icon{
    margin-right : var(--spacing-xs);
}

#like_count {
    margin-left: var(--spacing-xs);
}

.social-button svg{
    width : 1.5rem;
    height : 1.5rem;
}

#like_icon.unfilled {
    color: white;
}

#like_icon.wished {
    color: red;
}


/* 좋아요, 공유하기 버튼 등 끝 */

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

/* 구글 배너 광고 */
.wide-banner-ads{
    width : 100%;
    height : 120px ;
    padding : var(--spacing-sm) 0 var(--spacing-sm) 0;
    overflow : hidden;
    /*background-color : green;*/
}


/* 게시물 리스트 하단 구글 배너 광고 */
.wide-banner-ads.list-bottom-ads{
    margin-top : var(--spacing-3xl);
}

/* 게시글 내용 중 이미지 */
.ckeditor-contents img{
    width: 100%;
    max-width: 750px;
}





@media (max-width: 767px){

    /* 모바일 소셜 버튼 */
    .social-button-wrap{
        margin-top : var(--spacing-lg);
    }

    /*모바일 버젼 소셜 버튼 크기*/
    .social-button{
        font-size : var(--text-sm);
        width: 25vw;
        max-width : 150px;
        padding: var(--spacing-sm) 0;
        margin : 0 var(--spacing-2xs);

    }

    /* 모바일 버젼에서 shop-now 버튼 */
    .shop-now-wrap{
        /*background-color : var(--primary-color);*/
        position: sticky;
        bottom: 10px;
        /*background-color: white;*/ /* You may need to adjust this based on your design */
        z-index: 1; /* You may need to adjust this based on your layout */
    }


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



}