/* 리포트 블록 — 관리자 미리보기와 고객 화면 공용(report_block_design_v1.json). 두 화면의 색 토큰을 그대로 쓰고 없으면 기본값. */
.rb {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; height: 100%;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--border-box-purple, rgba(176, 132, 255, 0.35));
  background: var(--bg-card-inner, rgba(28, 18, 52, 0.85));
  color: var(--text-pure, #f4efff);
}
.rb-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rb-icon { font-size: 16px; }
.rb-title { font-size: 15px; font-weight: 800; line-height: 1.4; }
.rb-badge {
  margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--neon-cyan, #33e1ff); color: var(--neon-cyan, #33e1ff);
}
.rb-body { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-sub, #d6cbe9); overflow-wrap: anywhere; }
.rb-locked { color: var(--text-muted, #9d8fb8); }
.rb-foot { font-size: 12px; color: var(--text-muted, #9d8fb8); }
.rb-tag { align-self: flex-start; padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.06); }
.rb-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 180px; }
.rb-meter-cell { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.rb-meter-cell.is-on { background: var(--neon-pink, #ff4fa3); }
.rb-mark_chip { padding: 10px 12px; gap: 4px; }
.rb-mark_chip .rb-title { font-size: 14px; }
.rb-mark_chip .rb-body { font-size: 13.5px; }
.rb.is-locked { opacity: 0.75; border-style: dashed; }

/* 🧪 테스트 결제 표시 — 결제 결과 페이지 */
.pay-test-flag { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--neon-yellow, #ffe066); border: 1px solid currentColor; }

/* 층 구조 문장 — 요약 한 줄 · 풀이 · 장면 · 해볼 것 · 상품별 한 줄 (좁은 칸은 요약+풀이만, 나머지는 더 보기) */
.lay { display: block; }
.lay-sum { display: block; font-weight: 700; color: var(--text-pure, #fff); line-height: 1.6; }
.lay-row { display: block; margin-top: 6px; }
.lay-tag { color: var(--neon-cyan, #6dd2c4); font-weight: 700; font-size: 0.92em; }
.lay-row.is-variant { padding: 6px 10px; border-left: 3px solid var(--neon-pink, #e25cc0); border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, 0.05); }
.lay-more { display: block; margin-top: 8px; }
.lay-more > summary { cursor: pointer; color: var(--neon-cyan, #6dd2c4); font-size: 0.92em; font-weight: 600; }