.Review {
    align-items: flex-start; /* 수직 상단 정렬 */
    margin: 20px; /* 전체 여백 */
    padding-bottom: 20px; /* 하단 여백 */
    border-bottom: 1px solid #ccc; /* 리뷰 구분을 위한 경계선 */
}

/* 마지막 리뷰의 경계선 제거 */
.real-cont > .Review:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.Review .content {
    flex: 1; /* 본문 내용이 가변적으로 크기를 조정 */
    margin-right: 20px; /* 본문과 이미지 사이의 여백 */
}

.Review a {
    text-decoration: none; /* 링크 밑줄 제거 */
    color: inherit; /* 링크의 색상을 부모 요소의 색상으로 설정 */
}

.title {
    font-size: 18px; /* 제목 글꼴 크기 조정 */
    font-weight: bold; /* 제목 굵게 */
    margin-bottom: 8px; /* 제목과 본문 사이 간격 */
    display: block; /* 블록 요소로 설정하여 margin-bottom 작동하게 함 */
}

.content p {
    font-size: 16px; /* 본문 폰트 크기 */
    color: #555; /* 본문 색상 */
    display: -webkit-box; /* 플렉스 박스 사용 */
    -webkit-box-orient: vertical; /* 세로 방향으로 설정 */
    overflow: hidden; /* 넘치는 부분 숨김 */
    -webkit-line-clamp: 3; /* 최대 3줄 표시 */
    max-height: 4.5em; /* 3줄 높이 설정 (1.5em * 3) */
    line-height: 1.5em; /* 줄 높이 설정 */
}

.image {
    width: 300px; /* 이미지 너비 */
    height: 200px; /* 이미지 높이 */
    object-fit: cover; /* 비율에 맞게 이미지 크기 조정 */
}

/* '후기 더보기' 버튼을 위한 스타일 */
.load-more-button {
    display: block; /* 버튼을 블록 요소로 만들어 전체 폭 차지 */
    margin: 0px auto; /* 위 아래 마진 설정 및 가운데 정렬 */
    padding: 10px 20px; /* 패딩 추가하여 버튼 크기 조정 */
    background-color: #fff; /* 배경색 흰색 */
    color: #333; /* 글자색 */
    border: 1px solid #333; /* 테두리 색상 */
    border-radius: 5px; /* 둥근 모서리 */
    text-align: center; /* 텍스트 가운데 정렬 */
    text-decoration: none; /* 링크 아래 줄 제거 */
    font-weight: bold; /* 글자 두껍게 */
    width: 200px; /* 버튼 너비 설정 */
    transition: background-color 0.3s; /* 배경 색상 변경 시 애니메이션 */
}

.load-more-button:hover {
    background-color: #333; /* 호버 시 배경색 변경 */
    color: #fff; /* 호버 시 글자색 변경 */
}

.link-wrapper {
    display: flex; /* 플렉스 박스를 사용하여 수평 정렬 */
    text-decoration: none; /* 링크 아래 줄 제거 */
    color: inherit; /* 링크의 색상을 부모 요소의 색상으로 설정 */
}

.link-wrapper:hover {
    color: inherit; /* 호버 시 색상 변경 방지 */
}

.content p {
    font-weight: normal; /* 본문 텍스트의 두께를 일반으로 설정 */
    color: #555; /* 본문 색상 재설정 */
}

.hashtags {
    display: flex; /* 플렉스 박스를 사용하여 해시태그를 가로로 정렬 */
    margin-top: 5px; /* 본문과 해시태그 사이 여백 */
}
.hashtag {
    /*background-color: #e0e0e0; /* 해시태그 배경 색상 */
    /*border-radius: 20px; /* 둥근 모서리 */
    padding: 5px 10px; /* 내부 여백 */
    /*margin-right: 5px; /* 해시태그 사이 간격 */
    font-size: 14px; /* 폰트 크기 */
    color: #333; /* 글자 색상 */
    font-weight: bold; /* 굵은 글씨 */
}

/* 모바일 화면에서의 스타일 조정 */
@media (max-width: 768px) { /* 768px 이하에서 적용 */
    .link-wrapper {
        flex-direction: column; /* 세로 방향으로 쌓이게 설정 */
    }

    .Review .content {
        margin-right: 0; /* 모바일에서는 오른쪽 여백 제거 */
        margin-bottom: 20px; /* 이미지와의 간격을 위해 하단 여백 추가 */
    }

    .image {
        width: 100%; /* 모바일에서는 이미지 너비를 100%로 설정 */
        height: auto; /* 비율 유지 */
    }
}

