/* 후기 페이지 전용 스타일. 구조/구성요소 스타일 대부분은 이미 검증된
   /progress/styles.css를 그대로 재사용한다 (shop 페이지가 이미 이렇게 한다) —
   여기서는 이 페이지에만 필요한 몇 가지만 더한다. */

.code-display{
  font-family:var(--mono);
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:.05em;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper2);
}

/* 별점 버튼: 기존 filter-button을 재사용하되 채워진 상태만 살짝 강조한다. */
.toolbar .filter-button[aria-pressed="true"]{
  font-weight:700;
}

/* ==========================================================================
   시각 리마스터 — Stitch 0819_13 참고 (STEP 위저드/잠금 확인/수집 다이어리).
   기존 admin-panel/form-grid/filter-button 등 공유 클래스는 그대로 두고,
   이 파일에서만 추가 클래스로 겹쳐 꾸민다 — app.js의 동작·API 호출은
   변경하지 않았다.
   ========================================================================== */

/* STEP 라벨 — 참여 코드 확인·후기 작성 두 화면에 공통으로 쓰는 작은 표식 */
.code-entry-kicker{
  display:inline-block;
  margin-bottom:8px;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent-deep);
}

/* A. 참여 코드 확인 — 평범한 로그인 상자가 아니라 의도적인 첫 STEP처럼 */
.code-entry-panel{
  position:relative;
  border-top:4px solid var(--accent);
  background:linear-gradient(160deg,var(--accent-wash),var(--card) 55%);
}
.code-field-input{
  font-family:var(--mono);
  font-size:1.05rem;
  letter-spacing:.08em;
  text-align:center;
}

/* B. 확인된 공구/구매 품목 — 종이 영수증처럼 "잠김" 느낌을 준다.
   참여자가 이 값을 바꿀 수 있다고 오해하지 않도록 입력창이 아니라
   목록/배지로만 보여준다(기존에도 입력창이 아니었음 — 시각만 강화). */
.purchase-receipt{
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:2px dashed var(--line);
}
.lock-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-bottom:10px;
  padding:4px 10px;
  border:1px solid var(--ok-line);
  border-radius:999px;
  background:var(--ok-wash);
  color:var(--ok-deep);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
}
.lock-badge::before{content:"✓"}
.receipt-note{
  margin:2px 0 12px;
  color:var(--muted);
  font-size:.8rem;
}
.purchase-item-list{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.purchase-item{
  position:relative;
  padding:9px 12px 9px 30px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper2);
  font-weight:600;
  overflow-wrap:anywhere;
}
.purchase-item::before{
  content:"✓";
  position:absolute;
  left:11px;
  color:var(--ok);
  font-weight:700;
}

/* C. 후기 작성 — 수집 다이어리 느낌의 편안한 텍스트 영역 */
.review-textarea{
  min-height:200px;
  line-height:1.7;
  background-image:repeating-linear-gradient(to bottom,transparent 0 33px,var(--line2) 34px 35px);
  background-position:0 4px;
}
.satisfaction-field{border:0; padding:0; margin:0}
.satisfaction-field legend{
  padding:0;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}
.star-row{gap:5px}
.star-button{
  min-width:44px;
  font-size:1.15rem;
  color:var(--line);
  background:var(--paper2);
  transition:color .12s,transform .12s;
}
.star-button[aria-pressed="true"]{
  border-color:var(--accent);
  background:var(--accent-wash);
  color:var(--accent-deep);
}
.star-button:active{transform:scale(.92)}

/* D. 사진 첨부 — 슬리브 프레임처럼 */
.review-photo-grid{margin-top:10px}
.review-photo-card{
  position:relative;
  border-style:dashed;
  background:var(--card);
}
.remove-photo-button{
  width:100%;
  margin-top:6px;
  color:var(--danger);
  text-align:center;
}

/* E. 제출 — 크고 분명한 CTA + 대기 상태 안내 */
.submit-review-button{
  width:100%;
  min-height:48px;
  font-size:1rem;
}
.submit-hint{text-align:center}
.pending-notice{
  border-left-color:var(--ok);
  background:var(--ok-wash);
  text-align:center;
}
.pending-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ok-deep);
}
.pending-badge::before{content:"○"}

/* 공개 갤러리 — 참여자들의 수집 기록 페이지: 사진을 슬리브에 끼운 느낌 */
.review-gallery-card{border-left:3px solid var(--accent)}
.review-photo-sleeve{gap:10px}
img.review-sleeve-photo{
  border:2px solid var(--line);
  box-shadow:var(--shadow-sm);
}

/* 관리자 — 밀도는 조금 더 높아도 됨 (동작은 그대로) */
.reviews-admin-tabs{margin-bottom:14px}
.reviews-admin-area .admin-row{padding:14px}

@media (max-width:420px){
  .review-textarea{min-height:170px}
  .code-field-input{font-size:.95rem; letter-spacing:.05em}
}

@media (prefers-reduced-motion: reduce){
  .star-button{transition:none}
  .star-button:active{transform:none}
}