/* No photo review state */
.yj24-prv-empty{
  width:100%;
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#999;
  font-size:14px;
}

#yj24-photo-review,#yj24-photo-review *{box-sizing:border-box}
#yj24-photo-review img{max-width:100%;height:auto;display:block}

/* ✅ JS가 넣는 CSS 변수 기본값(초기 fallback) */
#yj24-photo-review{--yj24-cols:5;--yj24-gap:12px}

.yj24-prv{margin:18px auto 22px;padding:18px}
.yj24-prv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.yj24-prv-title{font-size:14px;letter-spacing:.28em;font-weight:800;color:#111}
.yj24-prv-sub{font-size:12px;color:#777;margin-top:4px}
.yj24-prv-sort{display:flex;gap:6px;margin-left:auto;justify-content:flex-end}
.yj24-sort-btn{padding:6px 10px;font-size:12px;border:1px solid rgba(0,0,0,.15);background:#fff;border-radius:999px;cursor:pointer}
.yj24-sort-btn.is-active{background:#111;color:#fff;border-color:#111}

/* nav overlay */
.yj24-prv-nav{position:absolute;inset:0;z-index:20;pointer-events:none}
.yj24-prv-btn{position:absolute;top:30%;transform:translateY(-50%);pointer-events:auto;width:44px;height:84px;border:0;border-radius:10px;background:rgba(0,0,0,.28);color:#fff;font-size:28px;line-height:64px;cursor:pointer;transition:background .2s ease,opacity .2s ease}
@media(max-width:768px){.yj24-prv-btn{top:20%}}
#yj24PrvPrev{left:0} #yj24PrvNext{right:0}
.yj24-prv-btn:hover{background:rgba(0,0,0,.65)}
.yj24-prv-btn:disabled{opacity:.25;cursor:not-allowed}

/* viewport */
.yj24-prv-viewport{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;touch-action:pan-y}

/* track */
.yj24-prv-track{display:flex;width:100%;will-change:transform;transform:translateX(0);transition:transform .45s ease}
.yj24-prv-panel{flex:0 0 100%;width:100%}

/* ✅ Cards row: LIMIT(cols) 기반으로 꽉 채움 */
.yj24-prv-row{display:flex;gap:var(--yj24-gap);width:100%;justify-content:flex-start}
.yj24-prv-card{flex:0 0 calc((100% - (var(--yj24-cols) - 1) * var(--yj24-gap)) / var(--yj24-cols));min-width:0;padding:5px}

.yj24-card{background:#fff;overflow:hidden;padding:5px}
.yj24-img-wrap img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;cursor:pointer}
.yj24-review{margin-top:6px}
.yj24-text{font-size:14px;line-height:1.2;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}

/* stars */
.yj24-stars{margin-bottom:6px}
.yj24-stars-svg{display:inline-flex;align-items:center;gap:2px}
.yj24-star{width:20px;height:20px;display:block}
.yj24-star-wrap.is-on .yj24-star path{fill:#FFC107}
.yj24-star-wrap.is-off .yj24-star path{fill:rgba(255,193,7,.25)}
.yj24-star-score{font-size:13px;font-weight:700;color:#333;margin-left:6px}
#yj24-modal .yj24-star-score{color:#fff}

.yj24-date{margin-top:6px;font-size:11px;color:#999;text-align:right}

/* paging */
.yj24-prv-paging{margin-top:12px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.yj24-page-btn{min-width:34px;height:34px;padding:0 10px;border-radius:10px;border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer;font-size:12px}
.yj24-page-btn.is-active{background:#111;color:#fff;border-color:#111}
.yj24-page-ellipsis{height:34px;display:flex;align-items:center;padding:0 6px;color:#888;font-size:12px}

/* width */
#yj24-photo-review{width:100%;max-width:85vw;margin:18px auto 22px}
@media (max-width:768px){#yj24-photo-review{max-width:90vw}}

/* modal */
.yj24-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:9999}
.yj24-modal-inner{position:relative;background:transparent;padding:0;border-radius:0;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;gap:10px}
@media (max-width:768px){.yj24-modal-inner{max-height:70vh}}
.yj24-modal-close{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:18px;line-height:34px;cursor:pointer;z-index:2}
.yj24-modal-close:hover{background:rgba(0,0,0,.7)}
.yj24-modal-inner img{width:auto;max-width:90vw;max-height:calc(90vh - 180px);border-radius:12px;object-fit:contain;display:block}
@media (max-width:768px){.yj24-modal-inner img{max-height:calc(70vh - 180px)}}
.yj24-modal-meta{color:#fff;text-align:left;padding:0 4px}
.yj24-modal-stars{margin-top:2px}
.yj24-modal-prod{margin-top:6px;font-size:13px;font-weight:700;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yj24-modal-sub{margin-top:6px;font-size:12px;color:rgba(255,255,255,.85);display:flex;gap:6px;align-items:center}
.yj24-dot{opacity:.7}
.yj24-modal-review{margin-top:6px;font-size:13px;color:rgba(255,255,255,.92);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;word-break:keep-all;min-height:3em}

/* =========================
   ✅ 별점 그래프 스타일
   - 위젯 내부 전용(prefix yj24-rg)
   ========================= */
.yj24-rg{display:flex;gap:28px;align-items:center;padding:14px 0 18px;border-bottom:1px solid #eee;margin:0 0 14px}
.yj24-rg.is-hidden{display:none}
.yj24-rg-left{min-width:150px;display:flex;flex-direction:column;align-items:flex-start}
.yj24-rg-avg{display:flex;align-items:center;gap:10px}
.yj24-rg-avg .num{font-size:34px;font-weight:800;line-height:1;color:#111}
.yj24-rg-avg .star{font-size:22px;line-height:1;color:#ff8a00}
.yj24-rg-total{margin-top:6px;font-size:14px;color:#888}
.yj24-rg-right{flex:1;display:flex;flex-direction:column;gap:10px}
.yj24-rg-row{display:grid;grid-template-columns:84px 70px 1fr 44px;gap:10px;align-items:center}
.yj24-rg-label{font-size:13px;color:#666;white-space:nowrap}
.yj24-rg-stars{font-size:13px;color:#ff8a00;letter-spacing:1px;white-space:nowrap}
.yj24-rg-bar{position:relative;height:8px;background:#f2f2f2;border-radius:999px;overflow:hidden}
.yj24-rg-bar>i{position:absolute;left:0;top:0;height:100%;width:0;background:#ff8a00;border-radius:999px}
.yj24-rg-pct{text-align:right;font-size:13px;color:#666;white-space:nowrap}
@media(max-width:640px){
  .yj24-rg{flex-direction:column;align-items:stretch;gap:12px}
  .yj24-rg-left{flex-direction:row;justify-content:space-between;align-items:center;min-width:auto}
  .yj24-rg-total{margin:0}
  .yj24-rg-row{grid-template-columns:70px 64px 1fr 40px}
}
    /* ✅ 좌측: "평점" + 별 5개 + 리뷰수 */
.yj24-rg-left{min-width:170px;display:flex;flex-direction:column;align-items:flex-start}
.yj24-rg-labelTop{font-size:13px;color:#666;font-weight:700;letter-spacing:.02em}
.yj24-rg-stars5{margin-top:8px;display:flex;gap:4px;align-items:center}
.yj24-rg-star5{width:18px;height:18px;display:block}
.yj24-rg-star5.is-on path{fill:#FFC107}
.yj24-rg-star5.is-off path{fill:rgba(255,193,7,.25)}
.yj24-rg-total{margin-top:10px;font-size:14px;color:#888}
/* ✅ 반별(half) 표현용 */
.yj24-rg-stars5{margin-top:8px;display:flex;gap:4px;align-items:center}
.yj24-rg-star5{width:18px;height:18px;display:block}
.yj24-rg-star5 .bg{fill:rgba(255,193,7,.25)}
.yj24-rg-star5 .fg{fill:#FFC107}

/* ✅ 좌측 큰 평점 숫자 */
.yj24-rg-score{
  font-size:38px;
  font-weight:900;
  line-height:1;
  color:#111;
  letter-spacing:-.02em;
  font-variant-numeric: tabular-nums; /* 숫자 흔들림 방지 */
}
.yj24-rg-bar>i{
  position:absolute;left:0;top:0;height:100%;
  width:0;                 /* ✅ 초기 0% */
  background:#ff8a00;border-radius:999px;
  transition: width 2.4s cubic-bezier(.2,.9,.2,1);  /* ✅ 스르륵 */
}
/* 모바일에서 좌측 줄바꿈(기존 룰이 있으면 유지) */
@media(max-width:640px){
  .yj24-rg-left{min-width:auto}
}
#yj24RatingGraph{ margin-bottom:30px; } /* 원하는 만큼 */

/* list */
#yj24ReviewWidget,#yj24ReviewWidget *{box-sizing:border-box}
#yj24ReviewWidget{font-family:inherit;max-width:1200px;margin:20px auto;padding:0 10px}
#yj24ReviewWidget .yj24rw-card{border:1px solid rgba(0,0,0,.10);border-radius:14px;background:#fff}
#yj24ReviewWidget .yj24rw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:18px 18px 10px}
#yj24ReviewWidget .yj24rw-title{font-size:16px;font-weight:900;letter-spacing:.14em;color:#111}
#yj24ReviewWidget .yj24rw-meta{display:flex;gap:10px;align-items:center;margin-top:6px;color:#666;font-size:12px}
#yj24ReviewWidget .yj24rw-stars{display:inline-flex;gap:2px;line-height:0}
#yj24ReviewWidget .yj24rw-stars svg{fill:#FFC107;opacity:1}
#yj24ReviewWidget .yj24rw-avg{font-weight:900;color:#111}
#yj24ReviewWidget .yj24rw-btn{appearance:none;border:1px solid rgba(0,0,0,.16);background:#111;color:#fff;border-radius:999px;padding:10px 14px;font-size:12px;font-weight:800;cursor:pointer}
#yj24ReviewWidget .yj24rw-btn:active{transform:translateY(1px)}
#yj24ReviewWidget .yj24rw-filters{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px}
#yj24ReviewWidget .yj24rw-filter{border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;cursor:pointer}
#yj24ReviewWidget .yj24rw-filter[aria-pressed="true"]{background:#111;color:#fff;border-color:#111}

#yj24ReviewWidget .yj24rw-body{padding:0 18px 18px}
#yj24ReviewWidget .yj24rw-list{display:flex;flex-direction:column;gap:12px}
#yj24ReviewWidget .yj24rw-item{border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:14px;display:flex;gap:14px;align-items:flex-start}
#yj24ReviewWidget .yj24rw-left{flex:0 0 20%;min-width:160px}
#yj24ReviewWidget .yj24rw-right{flex:1 1 auto}
#yj24ReviewWidget .yj24rw-left .yj24rw-stars svg{width:16px;height:16px}
#yj24ReviewWidget .yj24rw-score{font-size:18px;font-weight:1000;color:#111;margin:6px 0 8px}
#yj24ReviewWidget .yj24rw-sub{font-size:12px;color:#666;line-height:1.35}
#yj24ReviewWidget .yj24rw-text{font-size:15px;color:#111;line-height:1.75;word-break:break-word}
#yj24ReviewWidget .yj24rw-text.yj24rw-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#yj24ReviewWidget .yj24rw-more{margin-top:10px;display:flex;gap:8px;align-items:center}
#yj24ReviewWidget .yj24rw-toggle{border:none;background:transparent;color:#111;font-weight:900;font-size:12px;cursor:pointer;padding:0}
#yj24ReviewWidget .yj24rw-toggle span{border-bottom:1px solid rgba(0,0,0,.35)}
#yj24ReviewWidget .yj24rw-attachments{margin-top:12px;display:none;gap:8px;flex-wrap:wrap}
#yj24ReviewWidget .yj24rw-attachments img{width:100px;height:100px;object-fit:cover;border-radius:10px;border:1px solid rgba(0,0,0,.10);cursor:pointer}

#yj24ReviewWidget .yj24rw-paging{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:16px}
#yj24ReviewWidget .yj24rw-page{min-width:34px;height:34px;border-radius:10px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#111;font-weight:900;font-size:12px;cursor:pointer}
#yj24ReviewWidget .yj24rw-page[aria-current="page"]{background:#111;color:#fff;border-color:#111}

#yj24ReviewWidget .yj24rw-empty{padding:30px 10px;text-align:center;color:#666}
#yj24ReviewWidget .yj24rw-skel{padding:20px;color:#777;font-size:12px}

#yj24ReviewWidget .yj24rw-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);z-index:99999}
#yj24ReviewWidget .yj24rw-modal[aria-hidden="false"]{display:flex}
#yj24ReviewWidget .yj24rw-modalInner{max-width:min(92vw,900px);max-height:86vh;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
#yj24ReviewWidget .yj24rw-modalTop{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.10)}
#yj24ReviewWidget .yj24rw-modalTop b{font-size:12px;letter-spacing:.14em}
#yj24ReviewWidget .yj24rw-x{border:none;background:transparent;font-size:18px;font-weight:900;cursor:pointer;line-height:1}
#yj24ReviewWidget .yj24rw-modalImg{display:block;max-width:92vw;max-height:78vh;width:auto;height:auto}

@media (max-width:768px){
  #yj24ReviewWidget .yj24rw-head{align-items:flex-start}
  #yj24ReviewWidget .yj24rw-left{flex-basis:34%;min-width:120px}
  #yj24ReviewWidget .yj24rw-item{flex-direction:column}
  #yj24ReviewWidget .yj24rw-left{min-width:0}
}
/* ===== YJ24 REVIEW WIDGET - Design Overrides ===== */

/* 1) 전체/카드/아이템 테두리(둥근사각형 라인) 전부 제거 */
#yj24ReviewWidget .yj24rw-card{border:none;border-radius:0;background:transparent}
#yj24ReviewWidget .yj24rw-item{border:none;border-radius:0;padding:16px 0}
#yj24ReviewWidget .yj24rw-modalInner{border:none}

/* 2) 좌측상단 REVIEW 아래 요약(평점/별/리뷰수) 크게 + 세로정렬 */
#yj24ReviewWidget .yj24rw-head{padding:10px 0 12px;border:none}
#yj24ReviewWidget .yj24rw-title{font-size:16px;font-weight:900;letter-spacing:.14em}
#yj24ReviewWidget .yj24rw-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-top:10px;
  color:#111;
}

/* 평점 큰 글씨 */
#yj24ReviewWidget .yj24rw-avg{
  font-size:34px;
  font-weight:1000;
  line-height:1;
}

/* 별점 더 크게 + 노랑 유지 */
#yj24ReviewWidget .yj24rw-meta .yj24rw-stars{gap:3px}
#yj24ReviewWidget .yj24rw-meta .yj24rw-stars svg{width:20px;height:20px;fill:#FFC107;opacity:1}

/* 리뷰 개수도 더 크게 */
#yj24ReviewWidget .yj24rw-meta span{font-size:15px;font-weight:800;color:#111}
#yj24ReviewWidget .yj24rw-meta span:nth-child(3){display:none} /* "·" 점 제거(있다면) */

/* 3) 필터링 버튼 아래 가로줄 1줄 */
#yj24ReviewWidget .yj24rw-filters{
  padding:0 0 12px;
  margin:0 0 14px;
  border-bottom:1px solid rgba(0,0,0,.12);
}

/* 4) 후기와 후기 사이 가로줄 1줄 */
#yj24ReviewWidget .yj24rw-list{gap:0}
#yj24ReviewWidget .yj24rw-item + .yj24rw-item{
  border-top:1px solid rgba(0,0,0,.10);
}

/* 5) 페이징 위쪽 가로줄 1줄 */
#yj24ReviewWidget .yj24rw-paging{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.12);
}

/* (옵션) 전체 폭/정렬이 더 깔끔하게 보이도록 */
#yj24ReviewWidget{max-width:1200px;margin:20px auto;padding:0 10px}
#yj24ReviewWidget .yj24rw-body{padding:0}

/* ===== 기본 텍스트/필터 선택 표시(필요시 기존 CSS와 함께 사용) ===== */
.yj24rw-filter{border:0;background:transparent;padding:8px 6px;cursor:pointer;color:#666}
.yj24rw-filter:hover{color:#111}
.yj24rw-filter[aria-pressed="true"]{font-weight:900;color:#111;border-bottom:2px solid rgba(0,0,0,.7)}

/* ===== Feedback (도움돼요/신고) : list.php의 helpful_count만 사용 ===== */
.yj24fb{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.06)}
/* 실선 ↔ 문구 ↔ 버튼 간격 
.yj24fb:before{content:"이 리뷰가 도움이 되었나요?";display:block;margin:10px 0 12px;font-size:12px;color:#777;width:100%}
버튼줄이 문구 아래로 내려오게 */
.yj24fb{flex-wrap:wrap}
.yj24fb-help,.yj24fb-report{margin-top:0}

.yj24fb-help{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:7px 10px;border-radius:12px;cursor:pointer;color:#222}
.yj24fb-help:hover{background:rgba(0,0,0,.04)}
.yj24fb-ico{font-size:14px;line-height:1}
.yj24fb-help-txt{font-size:12px;font-weight:900;letter-spacing:.02em}
.yj24fb-help-count{min-width:18px;text-align:center;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.05);font-weight:900;color:#111}
.yj24fb-help.is-on .yj24fb-help-txt{font-weight:900}
.yj24fb-help.is-on .yj24fb-help-count{background:rgba(0,0,0,.12)}

.yj24fb-report{border:1px solid rgba(0,0,0,.12);background:#fff;padding:7px 10px;border-radius:12px;cursor:pointer;font-size:12px;color:#444}
.yj24fb-report:hover{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.18);color:#111}

/* 제목 표시 (title) */
.yj24rw-ttl{font-size:13px;font-weight:900;color:#111;margin:0 0 6px;letter-spacing:.01em}
.yj24rw-badge{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.06);font-size:12px;font-weight:900;color:#111;margin:0 0 6px}
@media (max-width:768px){
  #yj24ReviewWidget .yj24rw-filters{display:flex;flex-wrap:nowrap;gap:6px}
  #yj24ReviewWidget .yj24rw-filter{padding:6px 4px;font-size:11px;letter-spacing:-.02em}
}

.yj24rw-cat1ico svg{width:16px;height:16px;display:block}
.yj24rw-cat1ico{display:inline-flex;align-items:center}
.yj24rw-cat1badge{color:#111} /* 필요하면 cat1별로 색 다르게 */
       
/* ===== cat1 뱃지: 바디 위 한 줄 고정 (레이아웃 안정화) ===== */
.yj24rw-cat1{display:block;margin:0 0 6px}
.yj24rw-cat1badge{display:inline-flex;align-items:center;gap:6px}
.yj24rw-cat1ico{display:inline-block;line-height:1}

/* ✅ 첨부(이미지)*/
.yj24rw-attachments{display:flex!important;flex-wrap:wrap;gap:8px;margin-top:10px}
.yj24rw-attachments img{width:78px;height:78px;object-fit:cover;border-radius:12px;cursor:zoom-in;background:#f2f2f2}
@media (max-width:768px){
  .yj24rw-attachments{gap:6px}
  .yj24rw-attachments img{width:66px;height:66px;border-radius:10px}
}


/* ✅ cat1 필터 셀렉트 */
.yj24rw-filterbar{display:flex;align-items:center;gap:10px;margin:10px 0 6px;flex-wrap:wrap}
.yj24rw-filterbar .yj24rw-filterlbl{font-size:12px;letter-spacing:.18em;font-weight:900;color:#111;opacity:.85}
.yj24rw-filterbar .yj24rw-selectWrap{position:relative;min-width:220px;max-width:100%;flex:1}
.yj24rw-filterbar select.yj24rw-select{
  width:100%;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:11px 40px 11px 12px;
  border-radius:14px;
  border:1px solid rgba(212,175,55,.35);
  background:linear-gradient(180deg,#fffdf6,#f7f2df);
  box-shadow:0 3px 14px rgba(0,0,0,.06);
  font-size:13px;font-weight:800;color:#111;
  outline:none;
}
.yj24rw-filterbar select.yj24rw-select:focus{
  border-color:rgba(212,175,55,.65);
  box-shadow:0 6px 18px rgba(212,175,55,.16);
}
.yj24rw-filterbar .yj24rw-selectWrap:after{
  content:"";
  position:absolute;right:14px;top:50%;
  width:10px;height:10px;
  border-right:2px solid rgba(17,17,17,.55);
  border-bottom:2px solid rgba(17,17,17,.55);
  transform:translateY(-55%) rotate(45deg);
  pointer-events:none;
}
.yj24rw-filterbar .yj24rw-clear{
  border:0;background:transparent;
  font-size:12px;font-weight:900;letter-spacing:.08em;
  color:#111;opacity:.55;cursor:pointer;
  padding:8px 10px;border-radius:12px;
}
.yj24rw-filterbar .yj24rw-clear:hover{opacity:.9;background:rgba(0,0,0,.04)}