@charset "utf-8";


:root {
    --main-color: #9333ea;
    --main-light: #f3e8ff;
    --gray-border: #e0e0e0;
    --gray-text: #959595;
}

#bv_review_section {max-width:1200px;min-width: 1200px; margin:50px auto;padding:20px; }
.bv_review_title { font-size:36px; font-weight:700;display: block;margin:30px 0 60px;text-align: center }

.bv_review_photo_wrap { margin-bottom:40px; overflow:hidden; }
.bv_review_photo_slider { display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:10px; }
.bv_review_photo_item { flex:0 0 auto; width:180px; height:120px; border-radius:6px; overflow:hidden; cursor:pointer; }
.bv_review_photo_item img { width:100%; height:100%; object-fit:cover; border:1px solid #e3e3e3; }

.bv_review_topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; flex-wrap:wrap; gap:10px; }
.bv_review_search_form {width: 500px;}
.bv_review_search_form .search-box {position: relative;display: flex;align-items: center;width: 100%;}
.bv_review_search_form input[type="text"] {flex: 1;padding: 8px 36px 8px 12px;border: 1px solid #ddd;border-radius: 6px;background-color: rgba(255, 255, 255, 0.1);color: #333;outline: none;height: 50px;}
.bv_review_search_form input[type="text"]::placeholder {color: #aaa;}
.bv_review_search_form .search-btn {position: absolute;right: 8px;background: transparent;border: none;cursor: pointer;color: #666;font-size: 18px;padding: 4px;}
.bv_review_search_form .search-btn:hover {color: #000;}


.bv_review_write_btn { background:#ec0474; color:#fff; padding:8px 15px; border-radius:4px; text-decoration:none; font-weight:500; transition:0.2s; }
.bv_review_write_btn:hover { background:#c3025f; }

.bv_review_list_wrap { display:flex; flex-direction:column; gap:35px;border-top: 1px solid #ddd;padding-top: 15px; }
.bv_review_item { border-bottom:1px solid #ddd; padding-bottom:25px; }

/* 상단 */
.bv_review_top { display:flex; justify-content:flex-start; align-items:center;gap:30px;width: 100%;}
.bv_review_badge {width:80px; height:80px; border-radius:50%;background:#8c39ff; color:#fff;margin: 0 30px;display:flex; align-items:center; justify-content:center;font-weight:700; font-size:16px;}
.bv_review_info {display:flex;flex-direction:row;flex-basis: 70%;align-items: flex-start;justify-content: space-between}
.bv_review_info span {color:#555;font-size: 16px;line-height:1.4; }
.bv_review_info strong { font-size:18px; font-weight:700; color:#222; }
.bv_review_edit_wrap a {display:inline-block;background: transparent;color: #8c39ff;border: 1.5px solid #8c39ff;;font-size:14px;font-weight:600;padding:8px 14px;border-radius:6px;text-decoration:none;transition:0.2s;}
.bv_review_edit_wrap a:hover {background: #f6f0ff;}
/* 본문 */
.bv_review_body { margin-left:12%; margin-top:10px; }
.star { color:#ffc107; font-style: normal; }
.star-empty { color:#ddd;font-style: normal; }

.bv_review_content { background:#f9f9f9;margin-left: 30px;height: 300px;border-radius:15px;font-size: 14px;padding:20px; color:#333; line-height:1.6; margin-top:10px; }

.bv_review_thumb_list { display:flex; flex-wrap:wrap; gap:10px; margin-top:15px;margin-left: 30px; }
.bv_thumb_item {position: relative;width: 140px;height: 100px;border-radius: 6px;overflow: hidden;cursor: pointer;flex: 0 0 auto;}
.bv_thumb_item video, .bv_thumb_item img {width: 100%;height: 100%;object-fit: cover;}

.bv_review_photo_slider {display: flex;flex-wrap: nowrap;gap: 12px;overflow-x: auto;padding-bottom: 10px;}
.bv_review_photo_item {flex: 0 0 auto;border-radius: 10px;overflow: hidden;position: relative;background: #000;}
.bv_review_photo_item img, .bv_review_photo_item video {width: 100%;height: 100%;object-fit: cover;}

.bv_video_wrap .bv_video_play_btn {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;opacity: 0.9;transition: opacity 0.2s;}
.bv_video_wrap:hover .bv_video_play_btn {opacity: 1;}


/* 공통 썸네일 스타일 */
.bv_review_more {border-radius: 10px;overflow: hidden;position: relative;width: 180px;height: 120px;background: #000;background: rgba(0,0,0,0.6);display: flex;align-items: center;justify-content: center;text-align: center;}
.bv_review_more_inner {display: flex;flex-direction: column;align-items: center;justify-content: center;}
.bv_review_more_inner strong {display: block;font-size: 44px;font-weight: 500;color: #fff;}
.bv_review_more_btn {display: inline-block;background: none;color: #fff;font-weight: 600;font-size: 18px;}
.bv_review_more_btn:hover {color: #fff;border-color: #fff;}

.video-icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;font-size: 20px;background: rgba(0,0,0,0.5);border-radius: 50%;width: 32px;height: 32px;display: flex;justify-content: center;align-items: center;}

.bv_review_paging { display: flex;justify-content: center;align-items: center; margin-top:40px; }

.empty_list { text-align:center; color:#999; padding:50px 0; }

.total{display:flex; align-items:baseline; gap:8px;font-size:16px; color:#222; margin:10px 0 16px;}
.total span{font-size:18px; font-weight:800; color:#8c39ff;line-height:1; letter-spacing:0.5px;}
/* 모달 */
#bv_modal_overlay {display:none;position:fixed;top:0; left:0; width:100%; height:100%;background:rgba(0,0,0,0.8);justify-content:center; align-items:center;z-index:9999;}
#bv_modal_overlay img {max-width:90%; max-height:90%;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.5);}

.bv_review_modal {display: none;position: fixed;overflow:hidden;inset: 0;z-index: 9999;background: rgba(0, 0, 0, 0.85);backdrop-filter: blur(3px);justify-content: center;align-items: center;padding: 40px;}
.bv_review_modal_content {overflow: hidden;position: relative;background: #fff;border-radius: 8px;max-width: 1200px;width: 90%;max-height: 90vh;padding: 20px 30px 40px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);}
.bv_modal_header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 25px;}
.bv_modal_header h3 {font-size: 20px;font-weight: 700;color: #7b2cbf;margin: 0;}
.bv_modal_close {font-size: 32px;color: #555;cursor: pointer;transition: color 0.2s;}
.bv_modal_close:hover {color: #000;}
.bv_modal_gallery_wrap {position: relative;width: 100%;max-height: 70vh;overflow: hidden;display: flex;justify-content: center;}
.bv_modal_gallery {height: 650px;margin-bottom: 20px;}
.bv_modal_gallery .jspPane {flex-wrap: wrap;display: flex;gap: 10px;align-items: flex-start;align-content: flex-start;}
.bv_modal_gallery img,
.bv_modal_gallery video {width: 180px;height: 180px;object-fit: cover;border-radius: 6px;transition: transform 0.2s ease;}

.jspVerticalBar {width: 6px !important;right: 3px;background: transparent;}
.jspTrack {background: rgba(162, 93, 220, 0.2);border-radius: 3px;}
.jspDrag {background: #8c39ff!important;border-radius: 3px;width: 6px;transition: background 0.2s ease, transform 0.2s ease;}
.jspDrag:hover {background: #8c39d4;transform: scaleX(1.1);}
.jspArrow {display: none !important;}

#bv_review_modal .jspContainer {padding-right: 8px;}


.pg_wrap {clear: both;float: left;display: inline-block;}
.pg_wrap:after {display: block;visibility: hidden;clear: both;content: "";}
.pg {text-align: center;}

/* 기본 페이지 버튼 */
.pg_page,
.pg_current {display: inline-block;vertical-align: middle;border: 1px solid var(--gray-border);background: #f8f8f8;color: var(--gray-text);font-size: 1.083em;height: 32px;line-height: 30px;min-width: 32px;padding: 0 8px;border-radius: 6px;transition: all 0.2s ease;}
.pg_page:hover {background-color: var(--main-light);border-color: var(--main-color);color: var(--main-color);text-decoration: none;}
.pg_current {background: var(--main-color);border-color: var(--main-color);color: #fff;font-weight: bold;}

.pg_start { background-image: url('../img/btn_first.gif'); }
.pg_prev  { background-image: url('../img/btn_prev.gif'); }
.pg_next  { background-image: url('../img/btn_next.gif'); }
.pg_end   { background-image: url('../img/btn_end.gif'); }

.pg_start,
.pg_prev,
.pg_next,
.pg_end {text-indent: -9999px;overflow: hidden;background-color: #f8f8f8;background-position: 50% 50%;background-repeat: no-repeat;border: 1px solid var(--gray-border);width: 32px;height: 32px;border-radius: 6px;transition: background-color 0.2s ease, border-color 0.2s ease;}
.pg_start:hover, .pg_prev:hover, .pg_next:hover, .pg_end:hover {background-color: var(--main-light);border-color: var(--main-color);}