@charset "utf-8";

.use-box { 
	background:#fafafa; 
	margin: 0;
    margin-bottom: 60px;
    padding: 40px 50px;
    border: 0;
    border-radius: 13px;
    background-color: #f4f4f4;
}
.use-box .row {
    position: relative;
    display: flex;
    margin: 0;
}
.use-box .col-sm-3 {
    width: 20.1%;
    padding: 0;
}
.use-box .col-sm-3 + .col-sm-3 {
    margin-left: 2.6%;
}
.use-box .col-sm-3.review_input {
    width: 54.6%;
}
.use-box .col-sm-3.btn_search {
    position: absolute;
    right: 0%;
    width: 50px;
    margin-left: 0;
}
.use-box .form-group {
    margin-bottom: 0;
}
.use-box .form-group .input-sm {
    height: 50px;
    padding: 0 15px;
    border: 0;
    border-bottom: 1px solid #0c0c0c;
    line-height: 50px;
    font-size: 18px;
    color: #0c0c0c;
    -webkit-box-shadow: 0 0 0 #fff;
    box-shadow: 0 0 0 #fff;
    background: transparent url(/img/arr_sort.png) no-repeat 95% 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.use-box .form-group select.input-sm {
    cursor: pointer;
}
.use-box .review_input .form-group .input-sm {
    background: transparent none;
}
.use-box .form-group .btn {
    padding: 14px 0;
    border: 0;
    background-color: transparent;
}
.use-box .form-group .btn:focus {
    outline: none;
}
.review_total.div-box-light {
    margin-bottom: 60px;
    padding: 0;
    font-size: 22px;
    color: var(--main-box-font-color);
    border-left: 0;
    text-align: center;
    background-color: transparent;
}
.review_total b {
    font-weight: 500;
}

.review_list.use-media .media {
    margin: 0;
    margin-bottom: 0;
    padding: 30px 0;
    border-bottom: 1px solid #d7d7d7;
}
.review_list.use-media .media:first-child {
    border-top: 1px solid #d7d7d7;
}
.review_list .media .photo {
    margin-right: 26px;
}
.review_list .media .photo a {
    display: block;
}
.review_list .media .photo img {
	border-radius: 12px;
	width: 64px;
	height: 64px;
	object-fit: cover;
	display:inline-block;
}
.review_list .media .photo .photo_noimg {
    border-radius: 12px;
    background: rgb(245, 245, 245);
    width: 64px;
    height: 64px;
    color: rgb(143, 143, 143);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.review_list .media .photo .photo_noimg svg {
    width: 28px;
    height: 28px;
}
.review_list .media .review_tit {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 16px;
    color: var(--main-box-font-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: 1.2;
    height: 1.2em;
}
.review_list.use-media .media .media-info {
    padding: 0;
    padding-bottom: 15px;
    line-height: 1;
    color: var(--main-box-font-color3);
}
.review_list .media-info > div {
    display: inline-block;
    margin-left: 10px;
    padding-left: 18px;
    font-size: 14px;
    color: var(--main-box-font-color4);
}
.review_list .media-info .fa-star {
    font-size: 14px;
    color: var(--main-box-point-color);
}
.review_list .media-info .review_id {
    background: url(/img/icon_nickname.png) no-repeat 0 50%;
}
.review_list .media-info .review_date {
    background: url(/img/icon_date.png) no-repeat 0 50%;
}
.review_list .media .media-body .media-content {
    padding-bottom: 16px;
}
.review_list .media-content .text-muted {
    font-size: 14px;
    color: var(--main-box-font-color2);
}
.review_list .media .media-heading {
    padding-left: 16px;
    background: url(/img/icon_item.png) no-repeat 0 50%;
    line-height: 1;
	margin:0;
}
.review_list .media .media-heading .text-muted {
    font-size: 14px;
    line-height: 1.3;
    color: var(--main-box-font-color2);
}
.use-none {
	/* 배경 없음 — 부모 .use-media.review_list가 이미 카드 배경(흰색/#f9f9f9)을 제공(위 규칙 참조),
	   여기서 추가 배경을 넣으면 카드 안에 또 다른 사각형이 겹쳐 보인다(승민 지시 검토 후 제외). */
	margin: 0;
	font-size: var(--fp-empty-text-size, 14px);
	padding: var(--fp-empty-pad-desktop, 192px) 0; /* [EmptyStateTokens] 마이페이지 빈상태 전역 통일 — point.php 2배 확대 기준값 */
}
.use-none img {
	width: var(--fp-empty-icon-size, 41px);
	display: block;
	margin: 0 auto var(--fp-empty-gap, 14px);
}

@media (max-width: 991px) {
	.use-none { padding: var(--fp-empty-pad-mobile, 96px) 0; } /* [EmptyStateTokens] 모바일값 */
}

.use-media .div-title-wrap { margin:0px; }
.use-media .media .media-body { padding-left:0px; }
.use-media .media .media-info .sp { display:inline-block; width:20px; text-align:center; font-size:11px; color:#888; }
.use-media .media .media-content p { margin:0px; padding:0px; }

/* ===== 2026-08 (주)파이브센스_FIVESENSES.Corp. 리뷰 상세페이지(itemuseview.php) 모달급 재정비 2차 =====
   1차(카드 3개 분리, 플랫 그레이)는 상품상세 리뷰 모달(ajax.itemreviewmodal.php, css/modal.css .rv_modal)과
   부양감·레이아웃 차이가 커서 재작업. 헤드+본문을 모달처럼 갤러리(좌)|텍스트(우) 2단 구성의 흰 카드 1개로 합치고,
   그림자로 부양감을 준다(그림자 값은 같은 마이페이지 영역 기존 팝업 rest.css .mypage_cancle_box 미러링).
   로컬 변수는 디자인시스템 --fp-* 토큰 값을 미러링(프론트 페이지는 --fp-* 미로드) */
.rv_view,
.rv_view_nav,
.rv_view_actions {
	--rv-radius-card: 26px;      /* 카드 radius(디자인시스템 --fp-rc) 미러링 */
	--rv-radius-inner: 13px;     /* 내부 요소 radius(디자인시스템 --fp-ri) 미러링 */
	--rv-surface-soft: #f7f7f7;  /* 서피스 soft 배경(디자인시스템 --fp-surface-soft) 미러링 */
	--rv-hairline: #ececec;      /* 구분선(디자인시스템 --fp-hairline) 미러링 */
	--rv-shadow: 0 8px 24px rgba(149, 157, 165, 0.20);
}
.rv_view { width: 100%; }

.rv_view_main {
	background: #fff;
	border: 1px solid var(--rv-hairline);
	border-radius: var(--rv-radius-card);
	box-shadow: var(--rv-shadow);
	padding: 40px;
	margin-bottom: 20px;
}
.rv_view_con { display: flex; align-items: flex-start; gap: 32px; }
.rv_view_con--no_gallery { display: block; }

.rv_view_gallery { flex: none; width: 320px; }
.rv_view_gallery_big {
	border-radius: var(--rv-radius-inner);
	overflow: hidden;
	background: var(--rv-surface-soft);
}
.rv_view_gallery_big img { width: 100%; height: 240px; object-fit: cover; display: block; }
.rv_view_gallery_thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rv_view_gallery_thumb {
	display: block;
	width: 56px; height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--rv-surface-soft);
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 150ms ease, opacity 150ms ease;
}
.rv_view_gallery_thumb:hover { opacity: 0.85; }
.rv_view_gallery_thumb.active { border-color: var(--main-box-point-color); }
.rv_view_gallery_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rv_view_text { flex: 1; min-width: 0; }
.rv_view_top { padding-bottom: 24px; border-bottom: 1px solid var(--rv-hairline); }
.rv_view_star { margin-bottom: 10px; }
.rv_view_star .rv_view_star_icon,
.rv_view_item_meta .rv_view_item_star {
	/* font-awesome.min.css .fa{font:...14px/1 FontAwesome !important}가 font-size를 !important로 강제 —
	   특이도 문제가 아니라 !important라 일반 규칙으론 못 이김. 부모 체이닝(0,2,0)+!important로 확실히 16px 고정 */
	color: var(--main-box-point-color);
	font-size: 16px !important;
	letter-spacing: 1px;
}
.rv_view_title {
	margin: 0 0 16px;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--main-font-color);
	letter-spacing: -0.3px;
	word-break: keep-all;
}
.rv_view_writer { display: flex; align-items: center; gap: 14px; }
.rv_view_writer_photo {
	flex: none;
	display: block;
	width: 48px; height: 48px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid var(--rv-hairline);
}
.rv_view_writer_info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rv_view_writer_name {
	font-size: 14px;
	font-weight: 600;
	color: var(--main-font-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rv_view_writer_date { font-size: 13px; color: var(--main-box-font-color3); }

.rv_view_bottom { padding-top: 24px; color: var(--main-box-font-color); font-size: 15px; }
.rv_view_bottom img { width: auto; height: auto; max-width: 100%; }
.rv_view_bottom p { padding: 0; margin: 0; font-size: 15px; line-height: 1.7; }

.rv_view_reply { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rv-hairline); }

.rv_view_item {
	background: #fff;
	border: 1px solid var(--rv-hairline);
	border-radius: var(--rv-radius-inner);
	padding: 20px 24px;
	margin-bottom: 30px;
}
.rv_view_item_label {
	font-size: 13px;
	font-weight: 600;
	color: var(--main-box-font-color3);
	margin-bottom: 14px;
}
.rv_view_item_body { display: flex; align-items: center; gap: 16px; }
.rv_view_item_photo {
	flex: none;
	width: 56px; height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--rv-surface-soft);
}
.rv_view_item_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv_view_item_photo_noimg {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	color: rgb(143, 143, 143);
}
.rv_view_item_photo_noimg svg { width: 22px; height: 22px; }
.rv_view_item_info { min-width: 0; }
.rv_view_item_name {
	display: block;
	font-weight: 600;
	font-size: 15px;
	color: var(--main-font-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rv_view_item_meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-size: 13px;
	color: var(--main-box-font-color3);
}

/* 이전/다음 리뷰 — 상품상세 모달(rv_btn_sec)과 동일하게 동일 상품 리뷰 사이 이동 제공(승민 3차 요청) */
.rv_view_nav { display: flex; gap: 8px; margin: 0 0 20px; }
.rv_view_nav_btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border-radius: var(--rv-radius-inner);
	background: var(--rv-surface-soft);
	color: var(--main-font-color);
	font-size: 14px;
	font-weight: 500;
	transition: background 150ms ease;
}
.rv_view_nav_btn:hover { background: #ececec; }

/* 하단 액션바 — FAQ 게시판(board.php?bo_table=faq) 글보기의 .btn.btn-board 톤 통일(승민 3차 요청)
   좌우 그룹 분리 없이 한 줄 나열(목록/뒤로가기/프린트/수정/삭제 순, 승민 4차 요청) — 폭 부족 시 flex-wrap으로 다음 줄로 자연스럽게 넘김 */
.rv_view_actions { display: flex; align-items: center; gap: 6px; margin: 0 0 30px; flex-wrap: wrap; }
.rv_view_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	border: 0;
	transition: background 150ms ease, color 150ms ease;
}
.rv_view_btn--outline {
	background: var(--rv-surface-soft);
	color: #5d5d5d;
}
.rv_view_btn--outline:hover { background: #ececec; }
.rv_view_btn--primary {
	background: #111;
	color: #fff !important;
}
.rv_view_btn--primary:hover { background: #333; }

@media all and (max-width:991px) {
	.rv_view_con { flex-direction: column; }
	.rv_view_gallery { width: 100%; }
	.rv_view_gallery_big img { height: 200px; }
}

@media all and (max-width:460px) {
	.rv_view_main { padding: 20px; border-radius: var(--rv-radius-inner); }
	.rv_view_item { padding: 16px 18px; }
	.rv_view_title { font-size: 18px; }
	.rv_view_writer_photo { width: 36px; height: 36px; border-radius: 8px; }
	.rv_view_bottom,
	.rv_view_bottom p { font-size: 14px; }
	.rv_view_gallery_big img { height: 160px; }
	.rv_view_item_body { gap: 12px; }
	.rv_view_nav_btn { height: 44px; font-size: 13px; }
	.rv_view_btn { height: 40px; padding: 0 12px; }
}

/* �亯 */
.ans-content { padding:0px 15px 15px; }
.ans-content img { width:auto; height:auto; max-width:100%; }
.ans-content p { padding:0; margin:0; line-height:22px; }


@media (max-width:991px) {
    .use-box {
        margin-bottom: 30px;
        padding: 20px;
        border-radius: 6px;
    }

    .use-box .row {
        flex-wrap: wrap;
    }

    .use-box .col-sm-3 {
        width: 47%;
    }
    .use-box .col-sm-3 + .col-sm-3 {
        margin-left: 6%;
    }
    .use-box .col-sm-3.review_input {
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
    }
    .use-box .col-sm-3.btn_search {
        bottom: 0;
        right: 0;
        width: 40px;
    }
    .use-box .form-group .input-sm {
        height: 30px;
        padding: 0 10px;
        line-height: 30px;
        font-size: 12px;
        background-size: 9px;
    }
    .use-box .form-group .btn {
        padding: 8px 0;
        line-height: 12px;
    }
    .use-box .form-group .btn img {
        display: inline-block;
        width: 14px;
    }
    .review_total.div-box-light {
        margin-bottom: 10px;
        font-size: 14px;
    }
    .review_list.use-media .media {
        padding: 15px 0;
    }
    .review_list .media .photo {
        margin-right: 15px;
        width: 80px;
        height: 80px;
    }
    .review_list .media .review_tit {
        margin-bottom: 3px;
        font-size: 14px;
    }
    .review_list.use-media .media .media-info {
        padding-bottom: 7px;
    }
    .review_list .media-info > div {
        margin-left: 7px;
        padding-left: 14px;
        font-size: 12px;
    }
    .review_list .media-info .fa-star {
        font-size: 12px !important;
    }
    .review_list .media-info .review_id,
    .review_list .media-info .review_date {
        background-size: 12px;
    }
    .review_list .media .media-body .media-content {
        padding-bottom: 7px;
    }
    .review_list .media-content .text-muted {
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        line-height: 1.2;
    }
    .review_list .media-content .text-muted .text-muted {
        display: none;
    }
    .review_list .media .media-heading {
        background-position: 0 25%;
    }
    .review_list .media .media-heading .text-muted {
        font-size: 13px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        height: 1.2em;
    }
}
/* ===== 2026-08 (주)파이브센스_FIVESENSES.Corp. 마이페이지 디자인 통일(주문내역 톤) — 마이페이지 경유(mypage=1) 시에만 적용, 직접 진입 시엔 기존 그대로 ===== */
.mypage_entry_content .use-media.review_list {
    background-color: #fff;
    border-radius: 17px;
    padding: 24px 30px 6px;
}
@media (max-width: 991px) {
    .mypage_entry_content .use-media.review_list {
        padding: 16px 16px 2px;
        border-radius: 13px;
    }
}

/* 리스트 바깥 위/아래 테두리만 제거(카드와 카드 사이 구분선은 유지) — 마이페이지 경유 스코프 한정 */
.mypage_entry_content .review_list.use-media .media:first-child {
    border-top: none;
}
.mypage_entry_content .review_list.use-media .media:last-child {
    border-bottom: none;
}

/* ===== 2026-08 (주)파이브센스_FIVESENSES.Corp. 전체 리뷰(직접진입) 배경+라운딩 카드 적용 — 좌측메뉴(wing)만 없을 뿐 카드 톤은 마이페이지 경유와 동일 계열.
   위 .mypage_entry_content 스코프 규칙이 클래스 3개(specificity 상위)라 마이페이지 경유 시엔 그대로 흰 카드로 오버라이드됨(회귀 없음) ===== */
.use-media.review_list {
    background-color: #f9f9f9;
    border-radius: 17px;
    padding: 24px 30px 6px;
}
@media (max-width: 991px) {
    .use-media.review_list {
        padding: 16px 16px 2px;
        border-radius: 13px;
    }
}
.review_list.use-media .media:first-child {
    border-top: none;
}
.review_list.use-media .media:last-child {
    border-bottom: none;
}