/* review.css — 상품 리뷰 관련 스타일
 *
 * 기존 jh1004 디자인 토큰 사용:
 *   --jh-bg, --jh-line, --jh-accent, --sub, --accent-price 등
 *   구체 변수는 :root / common.css 참조
 */

/* ═══════════════════════════════════════════════════
 *  누락된 c-thumb 사이즈 (리뷰 전용 추가)
 *  기존 mypage.css 에는 --64, --74 만 존재
 *  (c-thumb--64 는 write.php 에서 mypage.css 없이 쓰이므로 여기도 추가)
 * ═══════════════════════════════════════════════════ */
 .c-thumb--56,
 .c-thumb--64,
 .c-thumb--72 {
   display: block;
   border-radius: 10px;
   overflow: hidden;
   background: #f0f0f0;
   flex-shrink: 0;
 }
 .c-thumb--56 { width: 56px; height: 56px; }
 .c-thumb--64 { width: 64px; height: 64px; }
 .c-thumb--72 { width: 72px; height: 72px; }
 .c-thumb--56 img,
 .c-thumb--64 img,
 .c-thumb--72 img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 /* ═══════════════════════════════════════════════════
  *  공통 별점 표시 (review_stars_html PHP 헬퍼와 페어)
  * ═══════════════════════════════════════════════════ */
 .c-stars {
   display: inline-flex;
   gap: 1px;
   font-size: var(--s, 16px);
   line-height: 1;
   vertical-align: middle;
 }
 .c-stars__on  { color: #ffb93e; }
 .c-stars__off { color: #d9d9d9; }


 /* ═══════════════════════════════════════════════════
  *  리뷰 작성 페이지 (/review/write.php)
  * ═══════════════════════════════════════════════════ */
 .p-review { padding-bottom: 40px; }

 .c-review-error {
   padding: 60px 20px 40px;
   text-align: center;
   color: #666;
 }
 .c-review-error .material-symbols-outlined {
   font-size: 48px; color: #ccc; display: block; margin-bottom: 12px;
 }
 .c-review-error p { margin: 0 0 20px; font-size: 15px; }

 /* 상품 정보 카드 */
 .c-review-product {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 16px;
   background: #fff;
   border-bottom: 1px solid #eee;
 }
 .c-review-product__info { flex: 1; min-width: 0; }
 .c-review-product__vendor { font-size: 12px; color: #888; margin-bottom: 2px; }
 .c-review-product__name  { display: block; font-size: 15px; line-height: 1.4; }
 .c-review-product__options { font-size: 12px; color: #666; margin-top: 4px; }

 /* 폼 */
 .c-review-form {
   background: #fff;
   padding: 8px 0;
 }
 .c-review-form .c-field {
   padding: 14px 16px;
   border-bottom: 1px solid #f0f0f0;
 }
 .c-review-form .c-field:last-child { border-bottom: none; }

 /* 리뷰 전용 추가 스타일 (기존 qna.css 의 c-field / c-chip 은 그대로 상속) */
 .c-field__required { color: #e63946; margin-left: 2px; }
 .c-field__help.is-warn { color: #e63946; }

 /* 별점 선택 */
 .c-rating-picker {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
 }
 .c-rating-picker__star {
   border: none; background: transparent; padding: 4px;
   font-size: 36px;
   line-height: 1;
   color: #d9d9d9;
   cursor: pointer;
   transition: color 0.1s, transform 0.05s;
 }
 .c-rating-picker__star:hover { transform: scale(1.1); }
 .c-rating-picker__star.is-on { color: #ffb93e; }
 .c-rating-picker__label {
   margin-left: 8px;
   font-size: 13px;
   color: #666;
   min-height: 20px;
 }

 /* 사진 업로드 */
 .c-photo-uploader { display: flex; flex-direction: column; gap: 10px; }
 .c-photo-uploader__btn {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 10px 16px;
   border: 1px dashed #bbb;
   border-radius: 6px;
   background: #fafafa;
   color: #666;
   font-size: 13px;
   cursor: pointer;
   align-self: flex-start;
 }
 .c-photo-uploader__list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
   gap: 8px;
 }
 .c-photo-preview-item {
   position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #f0f0f0;
 }
 .c-photo-preview-item img { width: 100%; height: 100%; object-fit: cover; }
 .c-photo-preview-item__remove {
   position: absolute; top: 4px; right: 4px;
   width: 24px; height: 24px;
   border: none; border-radius: 50%;
   background: rgba(0,0,0,0.6); color: #fff;
   display: flex; align-items: center; justify-content: center;
   cursor: pointer;
 }
 .c-photo-preview-item__remove .material-symbols-outlined { font-size: 16px; }

 .c-review-form__actions {
   display: flex; gap: 10px;
   padding: 20px 16px;
   background: #fff;
 }
 .c-review-form__actions .c-btn { flex: 1; }

 /* 안내 */
 .c-review-notice {
   padding: 16px 20px;
   color: #888; font-size: 12px; line-height: 1.7;
 }
 .c-review-notice p { margin: 0; }


 /* ═══════════════════════════════════════════════════
  *  PDP 리뷰 섹션 (product/index.php 에 삽입)
  * ═══════════════════════════════════════════════════ */
 .c-pdp-reviews {
   background: #fff;
   padding: 20px 16px;
   margin-top: 8px;
 }
 .c-pdp-reviews__head {
   display: flex; justify-content: space-between; align-items: baseline;
   margin-bottom: 16px;
 }
 .c-pdp-reviews__head h2 { margin: 0; font-size: 17px; font-weight: 600; }
 .c-pdp-reviews__head h2 small { font-weight: normal; color: #888; font-size: 13px; margin-left: 6px; }
 .c-pdp-reviews__writebtn {
   padding: 6px 12px; border: 1px solid #ff6b35; color: #ff6b35;
   border-radius: 4px; font-size: 13px; background: #fff;
 }

 /* 평균 별점 + 분포 */
 .c-review-summary {
   display: flex; gap: 20px; align-items: center;
   padding: 16px;
   background: #fafafa; border-radius: 8px;
   margin-bottom: 16px;
 }
 .c-review-summary__avg {
   display: flex; flex-direction: column; align-items: center;
   min-width: 90px;
 }
 .c-review-summary__avg-num {
   font-size: 32px; font-weight: 700; color: #333; line-height: 1;
 }
 .c-review-summary__avg-stars { margin: 4px 0; }
 .c-review-summary__avg-total { font-size: 12px; color: #888; }

 .c-review-summary__dist { flex: 1; }
 .c-review-summary__dist-row {
   display: flex; align-items: center; gap: 8px;
   font-size: 12px; margin-bottom: 3px;
 }
 .c-review-summary__dist-row > span:first-child { width: 20px; color: #666; }
 .c-review-summary__dist-bar {
   flex: 1; height: 6px; background: #e8e8e8; border-radius: 3px; overflow: hidden;
 }
 .c-review-summary__dist-bar-fill { height: 100%; background: #ffb93e; }
 .c-review-summary__dist-row > span:last-child { width: 30px; text-align: right; color: #888; }

 /* 필터/정렬 */
 .c-review-controls {
   display: flex; gap: 8px;
   padding: 12px 0;
   overflow-x: auto; -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
 .c-review-controls::-webkit-scrollbar { display: none; }
 .c-review-controls select, .c-review-controls button {
   flex-shrink: 0;
   padding: 6px 12px;
   border: 1px solid #ddd; background: #fff;
   border-radius: 4px; font-size: 13px; color: #555;
 }
 .c-review-controls button.is-on {
   background: #333; color: #fff; border-color: #333;
 }

 /* 리뷰 카드 */
 .c-review-list { display: flex; flex-direction: column; }
 .c-review-card {
   padding: 16px 0;
   border-top: 1px solid #f0f0f0;
 }
 .c-review-card:first-child { border-top: none; }
 .c-review-card__head {
   display: flex; justify-content: space-between; align-items: center;
   margin-bottom: 6px;
 }
 .c-review-card__user {
   display: flex; align-items: center; gap: 8px;
   font-size: 13px; color: #333; font-weight: 500;
 }
 .c-review-card__date { font-size: 12px; color: #999; }
 .c-review-card__rating {
   display: flex; align-items: center; gap: 8px;
   margin-bottom: 8px;
 }
 .c-review-cate {
   display: inline-block;
   padding: 2px 8px;
   background: #f0f0f0; color: #666;
   border-radius: 3px; font-size: 11px;
 }
 .c-review-card__options {
   font-size: 11px; color: #888; margin-bottom: 6px;
 }
 .c-review-card__subject {
   font-size: 14px; font-weight: 600; margin-bottom: 4px;
 }
 .c-review-card__contents {
   font-size: 13px; line-height: 1.6; color: #333;
   margin: 0;
   white-space: pre-wrap; word-break: break-all;
 }
 .c-review-card__photos {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
   gap: 6px;
   margin-top: 10px;
 }
 .c-review-card__photos img {
   width: 100%; aspect-ratio: 1; object-fit: cover;
   border-radius: 6px; background: #f0f0f0;
   cursor: pointer;
 }
 .c-review-card__reply {
   margin-top: 10px;
   padding: 12px;
   background: #fff7f0; border-left: 3px solid #ff6b35;
   border-radius: 4px;
 }
 .c-review-card__reply strong { display: block; font-size: 12px; color: #ff6b35; margin-bottom: 4px; }
 .c-review-card__reply p      { margin: 0; font-size: 13px; line-height: 1.6; color: #333; }
 .c-review-card__reply small  { display: block; margin-top: 4px; font-size: 11px; color: #888; }

 .c-review-card__helpful {
   display: inline-flex; align-items: center; gap: 4px;
   margin-top: 10px;
   padding: 4px 10px;
   border: 1px solid #ddd; border-radius: 20px;
   background: #fff; font-size: 12px; color: #666;
   cursor: pointer;
 }
 .c-review-card__helpful:hover { border-color: #bbb; }
 .c-review-card__helpful .material-symbols-outlined { font-size: 14px; }

 .c-review-empty {
   padding: 40px 20px; text-align: center; color: #888;
 }

 .c-review-loadmore {
   display: block; width: 100%;
   margin-top: 16px; padding: 12px;
   border: 1px solid #ddd; background: #fff;
   border-radius: 6px; font-size: 14px;
 }


 /* ═══════════════════════════════════════════════════
  *  마이페이지 내 리뷰 (/member/reviews.php)
  * ═══════════════════════════════════════════════════ */
 .c-tab-badge {
   display: inline-block;
   margin-left: 4px;
   padding: 1px 7px;
   min-width: 18px;
   background: #ff6b35; color: #fff;
   border-radius: 9px; font-size: 11px; font-weight: 600;
   line-height: 16px; text-align: center;
 }

 /* 작성 가능 리스트 */
 .c-review-writable-list { display: flex; flex-direction: column; }
 .c-review-writable-item {
   display: flex; align-items: center; gap: 12px;
   padding: 14px 16px;
   border-top: 1px solid #f0f0f0;
 }
 .c-review-writable-item:first-child { border-top: none; }
 .c-review-writable-item__link {
   display: flex; align-items: center; gap: 10px;
   flex: 1; min-width: 0;
 }
 .c-review-writable-item__info { flex: 1; min-width: 0; }
 .c-review-writable-item__vendor { font-size: 11px; color: #888; margin-bottom: 2px; }
 .c-review-writable-item__info strong {
   display: block; font-size: 14px; line-height: 1.4;
   overflow: hidden; text-overflow: ellipsis;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
 }
 .c-review-writable-item__meta { font-size: 11px; color: #999; margin-top: 3px; }

 /* 내 리뷰 리스트 */
 .c-my-review-list { list-style: none; padding: 0; margin: 0; }
 .c-my-review-item {
   padding: 16px;
   border-top: 1px solid #f0f0f0;
 }
 .c-my-review-item:first-child { border-top: none; }
 .c-my-review-item__link {
   display: flex; align-items: center; gap: 10px;
   padding-bottom: 10px;
   border-bottom: 1px dashed #eee; margin-bottom: 10px;
 }
 .c-my-review-item__body { /* 내용 컨테이너 — 구조 목적 */ }
 .c-my-review-item__name { flex: 1; min-width: 0; }
 .c-my-review-item__name small { display: block; font-size: 11px; color: #888; }
 .c-my-review-item__name strong {
   display: block; font-size: 13px; margin-top: 2px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .c-my-review-item__rating {
   display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
 }
 .c-my-review-item__date { font-size: 11px; color: #999; margin-left: auto; }
 .c-my-review-item__subject { display: block; font-size: 14px; margin-bottom: 4px; }
 .c-my-review-item__contents {
   margin: 0; font-size: 13px; line-height: 1.6;
   white-space: pre-wrap; word-break: break-all;
 }
 .c-my-review-item__photos {
   display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px;
   margin-top: 8px;
 }
 .c-my-review-item__photos img {
   width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #f0f0f0;
 }
 .c-my-review-item__reply {
   margin-top: 10px;
   padding: 10px;
   background: #fff7f0; border-left: 3px solid #ff6b35; border-radius: 4px;
 }
 .c-my-review-item__reply strong { display: block; font-size: 12px; color: #ff6b35; }
 .c-my-review-item__reply p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }
 .c-my-review-item__reply small { display: block; margin-top: 4px; font-size: 11px; color: #888; }

 .c-my-review-item__actions { margin-top: 10px; text-align: right; }
 .c-btn--xs { padding: 4px 10px; font-size: 12px; }
 .c-my-review-item__actions .c-btn--line {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
}