@charset "utf-8";

.modal_re_wrap {background-color: rgba(0, 0, 0, 0.5); width: 100%; font-family: 'Pretendard'; position: fixed; top: 0; left: 0; height: 100vh; z-index: 999;}
.modal_re_wrap {display: none;}

.modal_re_box {background-color: #f5f5f5; width: 70%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 50px;}

/* --- 모달 제목 --- */
.re_title_wrap { margin-bottom: 20px;}
.re_title_wrap h2 {margin-bottom: 20px; font-size: 24px; color: #333; text-align: left; padding-bottom: 0;}
/* .re_title_wrap p {font-weight: 400; font-size: 20px; color: #333; margin-bottom: 10px; color: #4c4c4c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} */
.re_title_wrap p {display: none;}
.re_title_wrap img {object-fit: cover;}

.customer_wrap {display: flex; flex-direction: column; gap: 10px;}
.customer_wrap .customer {display: flex; align-items: center; gap: 30px;}
.customer_wrap .customer .re_score i {margin-right: 3px;}
.customer_wrap .customer .customer_name {font-size: 18px;}
.customer_wrap .customer .customer_name i {font-weight: 600;}
.customer_wrap .re_score img {width: 20px;}
.customer_wrap .re_date {color: #777; font-size: 18px; position: relative;}

.customer_wrap .re_date::before {content: ""; display: block; width: 1px; height: 18px; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); background-color: #979797;}

/* --- 모달 본문 --- */
.re_content_wrap {background-color: white;  padding: 30px;}
.re_content_wrap ul.re_content_box {display: flex; gap: 10px; height: 100%;}
.re_content_wrap li.re_photo {width: 100%;}
/* li.re_photo .photo_mainwrap {position: relative; height: 100%;} */
li.re_photo .photo_mainwrap {display: flex; gap: 10px; flex-direction: column; justify-content: space-between; height: 100%;}
/* .photo_mainwrap .photo_main {position: absolute; width: 100%; height: 80%; top: 0; left: 50%; transform: translateX(-50%); text-align: center;} */
.photo_mainwrap .photo_main { width: 100%;
    height: 100%;
    /* height: 280px; */
    text-align: center; position: relative;}

.photo_mainwrap .photo_main img {width: 100%; height: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* .photo_mainwrap .photo_thumb {display: flex; gap: 10px; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; bottom: 0;} */
.photo_mainwrap .photo_thumb {display: flex; gap: 10px;width: 100%;}

.photo_mainwrap .photo_thumb .thumb {width: 60px; height: 60px; position: relative; cursor: pointer;}
.photo_mainwrap .photo_thumb .thumb::before {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: inherit; height: inherit; background-color: #000; opacity: .3;}
.photo_mainwrap .photo_thumb .thumb:hover::before {opacity: 0;}
.photo_mainwrap .photo_thumb .thumb img {height: 100%; width: 100%;}

.re_content_wrap li:nth-of-type(2) {width: 100%; height: 100%;}
.re_content_wrap span.review_title {padding-left: 10px;}
.re_content_wrap span {font-size: 22px; display: block; border-bottom: 1px solid #c4c4c4; padding-bottom: 10px;}
.re_content_wrap p {font-size: 20px; color: #333; overflow-y: scroll; 
    /* height: 88%; */
    height: 300px;
    padding: 10px;}


/* 리뷰 수정삭제버튼 */
.rebtn_wrap {display: flex; gap: 10px; justify-content: flex-end; padding: 15px 0;}
.rebtn_wrap .btn {padding: 10px 15px; border-radius: 5px; font-size: 14px;}
.rebtn_wrap #review_modify_btn .btn {color: #888;}
.rebtn_wrap #review_delete_btn .btn {color: #ff5f5f;}


/* --- 모달 닫기 버튼 --- */
.btn_close {position: absolute; right: 0; top: 0; cursor: pointer; padding-right: 16px; padding-top: 16px;}
.btn_close i {font-size: 36px; color: #373737;}


/* --------- 1024px --------- */
@media screen and (max-width: 1024px) {
    .modal_re_box {width: 90%; padding: 20px;}
    /* .re_content_wrap {height: 350px;} */
    .re_content_wrap p {font-size: 16px;}
    .re_title_wrap h2 {font-size: 22px;}
    .re_title_wrap p {font-size: 18px;}
    .re_content_wrap span.review_title {font-size: 20px;}
}

/* --------- 960px --------- */
@media screen and (max-width: 960px) {
    .re_content_wrap p {height: 250px;}

    .rebtn_wrap .btn {padding: 8px 12px;}
} 


/* --------- 768px --------- */
@media screen and (max-width: 768px) {
    .re_title_wrap h2 {font-size: 20px;}
    .re_title_wrap p {font-size: 16px;}
    .customer_wrap .customer .customer_name {font-size: 14px;}
    .customer_wrap .customer .re_date i {font-size: 14px;}
    .re_content_wrap {padding: 20px;}
    .re_content_wrap strong {font-size: 18px;}
    .re_content_wrap p {font-size: 16px; height: 200px;}
    .re_content_wrap li.re_photo {width: 100%;}
    .customer_wrap .re_date {font-size: 14px;}
    .btn_close i {font-size: 24px;}
    

}

/* --------- 600px --------- */
@media screen and (max-width: 600px) {
    .re_content_wrap ul.re_content_box {flex-direction: column;}
    .re_content_wrap span.review_title {font-size: 16px;}
    .re_content_wrap p {font-size: 14px; height: 160px;}
    .btn_close i {font-size: 20px;}
    li.re_photo .photo_mainwrap {height: 200px; flex-direction: row;}

}

/* --------- 500px --------- */
@media screen and (max-width: 500px) {
    /* .re_content_wrap ul.re_content_box { gap: 45px;} */
    li.re_photo .photo_mainwrap {height: 180px; flex-direction: column;}
    .re_content_wrap p {height: 130px;}

    .rebtn_wrap {gap: 5px;}
    .rebtn_wrap .btn {font-size: 12px;}
}


/* --------- 420px --------- */
@media screen and (max-width: 420px) {
    .modal_re_box {width: 300px; padding: 20px;}
    .re_title_wrap h2 {font-size: 16px;}
    .re_title_wrap p {font-size: 14px;}
    .customer_wrap .customer .customer_name {font-size: 14px;}
    .customer_wrap .customer .re_date i {font-size: 14px;}
    .re_content_wrap strong {font-size: 16px;}
    .re_content_wrap p {font-size: 14px;}
    .btn_close i {font-size: 18px;}

    
    li.re_photo .photo_mainwrap {height: 170px; flex-direction: column;}
    .re_content_wrap p {height: 90px;}

    .customer_wrap .customer {flex-direction: column; align-items: flex-start; gap: 0;}
    .customer_wrap .re_date::before {display: none;}
    .customer_wrap .re_score img {width: 15px;}
    .customer_wrap {gap: 0;}
}

/* --------- 375px --------- */
@media screen and (max-width: 375px) {
    .modal_re_box {width: 260px;}
    /* .re_content_wrap ul.re_content_box {gap: 10px;} */

}