/* ==========================================================================
   CROWNNA · assets/css/meeting-review.css
   모임·강의 평점 모달 + 평균 평점 배지

   meeting.html · meeting-detail.html · admin.html 이 함께 씁니다.
   페이지마다 팔레트가 달라 색상은 변수 없이 직접 적었고,
   클래스는 전부 .cmr- 접두사로 분리했습니다.
   ========================================================================== */

/* ── 평균 평점 배지 ─────────────────────────────────────────────────────── */
.cmr-rating { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.cmr-stars  { color:#F5B301; font-size:14px; letter-spacing:1px; }
.cmr-score  { font-size:13.5px; font-weight:800; color:#1E1A2B; }
.cmr-count  { font-size:12px; color:#8A85A0; }
.cmr-rating.empty .cmr-stars { color:#D8D5E4; }
.cmr-rating.empty .cmr-score { color:#B3AFC4; font-weight:600; }

/* ── 버튼 ───────────────────────────────────────────────────────────────── */
.cmr-btn-review {
  background:#fff; border:1px solid #F5B301; color:#B0864A;
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.cmr-btn-review:hover { background:#FFF8E6; }
.cmr-btn-review.done { border-color:#2FA37A; color:#2FA37A; }
.cmr-btn-review.done:hover { background:#EAF7F1; }

/* ── 모달 ───────────────────────────────────────────────────────────────── */
.cmr-ov {
  position:fixed; inset:0; z-index:1300; display:none;
  align-items:center; justify-content:center; padding:20px; overflow-y:auto;
  background:rgba(27,22,52,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  font-family:'Pretendard','Pretendard Variable','Apple SD Gothic Neo',-apple-system,sans-serif;
  color:#1E1A2B;
}
.cmr-ov.on { display:flex; }
.cmr-ov * { box-sizing:border-box; }
/* ⚠ 이 리셋은 특이도가 (0,1,1) 이라 버튼 클래스(0,1,0)보다 우선한다.
   색을 지정하는 버튼 규칙에는 .cmr-ov 를 붙여 특이도를 (0,2,0) 으로 올린다.
   붙이지 않으면 배경이 사라져 흰 글자만 남고 버튼이 보이지 않는다. */
.cmr-ov button { font-family:inherit; border:none; background:none; cursor:pointer; }

.cmr-box {
  background:#fff; border-radius:20px; width:100%; max-width:420px; margin:auto;
  overflow:hidden; box-shadow:0 24px 60px rgba(27,22,52,.32);
  animation:cmrPop .22s ease; text-align:left;
}
@keyframes cmrPop { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

.cmr-head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px 0; }
.cmr-t { font-size:17px; font-weight:800; letter-spacing:-.02em; margin:0; }
.cmr-x { width:32px; height:32px; border-radius:9px; color:#B3AFC4; display:flex; align-items:center; justify-content:center; font-size:15px; }
.cmr-x:hover { background:#F5F4FF; color:#6C63FF; }
.cmr-b { padding:16px 24px 24px; }

.cmr-target {
  background:#F5F4FF; border-radius:10px; padding:12px 14px; margin-bottom:18px;
  font-size:13.5px; font-weight:700; color:#413C52; line-height:1.5;
}
.cmr-target small { display:block; font-weight:500; color:#8A85A0; font-size:12px; margin-top:3px; }

.cmr-label { display:block; font-size:12px; font-weight:700; color:#413C52; margin-bottom:8px; }
.cmr-label i { color:#E4576B; font-style:normal; }

/* 별점 입력 */
.cmr-star-row { display:flex; gap:6px; justify-content:center; margin:4px 0 6px; }
.cmr-star {
  font-size:34px; line-height:1; color:#E4E1EC; transition:color .12s, transform .12s;
  padding:2px 4px;
}
.cmr-star.on { color:#F5B301; }
.cmr-star:hover { transform:scale(1.12); }
.cmr-star-help { text-align:center; font-size:12.5px; color:#8A85A0; min-height:18px; margin-bottom:14px; }

.cmr-textarea {
  width:100%; min-height:78px; resize:vertical; line-height:1.6;
  padding:11px 14px; border:1px solid #EBE8F2; border-radius:12px;
  background:#fff; font-size:13.5px; outline:none; font-family:inherit; color:#1E1A2B;
}
.cmr-textarea:focus { border-color:#8079FF; }
.cmr-textarea::placeholder { color:#B3AFC4; }
.cmr-count-hint { text-align:right; font-size:11.5px; color:#B3AFC4; margin-top:5px; }

.cmr-err { font-size:11.5px; color:#E4576B; font-weight:700; margin-top:8px; display:none; }
.cmr-err.on { display:block; }

.cmr-ov .cmr-submit {
  width:100%; padding:14px; margin-top:16px; border-radius:999px;
  background:#6C63FF; color:#fff; font-size:14.5px; font-weight:700;
}
.cmr-ov .cmr-submit:hover { background:#4B3BFF; }
.cmr-ov .cmr-submit:disabled { background:#B3AEFF; cursor:default; }
.cmr-hint { font-size:11.5px; color:#8A85A0; line-height:1.65; margin:10px 0 0; text-align:center; }

@media (max-width:480px) {
  .cmr-ov { padding:12px; }
  .cmr-b { padding:14px 18px 20px; }
  .cmr-head { padding:18px 18px 0; }
  .cmr-star { font-size:30px; }
}