/* =========================================================
   result-unified.css
   전체 운세 카테고리 "결과 리포트" 통일 컴포넌트
   -----------------------------------------------------------
   오늘의 운세 / 타로 / 사주 / 궁합 / 관상 / 손금 / 별자리 / 띠운세 /
   꿈해몽 / 이름풀이 / 행운번호 — 11개 결과 화면이 공통으로 사용하는
   "해석 우선 · 결과 리포트형" 스킨입니다.

   설계 원칙
   1) 해석(요약/핵심 포인트/조언)이 항상 먼저, 원본 데이터/상세 텍스트는
      아래로 내려가거나 접힌 상태(<details>)로 제공됩니다.
   2) 긴 문단 대신 카드/포인트 단위로 잘라서 "리포트"처럼 읽히게 합니다.
   3) 카테고리마다 내용은 다르지만 골격(히어로→요약→상세→행운포인트→
      조언→CTA→전문가 정보)은 항상 동일합니다.
   4) 모바일 첫 화면에서 핵심 결과가 보이도록 상단 요소를 가볍게 유지합니다.

   기존 css/style.css의 색상/변수(:root)를 그대로 사용하며,
   .glass-card, .result-card, .btn-*, .result-next-cta 등 기존 클래스와
   충돌하지 않도록 전용 접두사 rr-(Result Report)를 사용합니다.
   ========================================================= */

.rr-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
  animation: rrFadeUp .5s ease both;
}
@keyframes rrFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------------------------------------------------------
   1) Result Hero — 제목/한줄요약/무드/점수·등급/키워드
   ---------------------------------------------------------*/
.rr-hero{
  position:relative;
  border-radius:var(--radius-lg);
  padding:26px 20px 22px;
  background:var(--gradient-purple, linear-gradient(135deg,#2b1f4a,#1a1330));
  border:1px solid rgba(224,179,86,0.25);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  text-align:center;
}
.rr-hero::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 30% -10%, rgba(224,179,86,0.28), transparent 55%);
  pointer-events:none;
}
.rr-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--gold-light,#f0d29a);
  background:rgba(224,179,86,0.14);
  border:1px solid rgba(224,179,86,0.3);
  padding:4px 12px;
  border-radius:999px;
  margin-bottom:12px;
  position:relative;
  z-index:1;
}
.rr-hero-title{
  font-family:var(--font-heading, 'Cinzel', serif);
  font-size:22px;
  font-weight:700;
  color:#fff;
  margin:0 0 8px;
  position:relative;
  z-index:1;
  line-height:1.35;
}
.rr-hero-score{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:6px 0 12px;
  position:relative;
  z-index:1;
}
.rr-hero-score .rr-score-ring{
  width:64px; height:64px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  font-weight:700;
  background:conic-gradient(var(--gold,#e0b356) calc(var(--rr-score,80)*1%), rgba(255,255,255,0.08) 0);
  position:relative;
}
.rr-hero-score .rr-score-ring::before{
  content:'';
  position:absolute; inset:5px;
  border-radius:50%;
  background:#1a1330;
}
.rr-hero-score .rr-score-ring span{
  position:relative; z-index:1;
  font-size:18px; color:#fff;
}
.rr-hero-score .rr-score-ring small{
  position:relative; z-index:1;
  font-size:9px; color:var(--text-muted,#a89bbf);
  font-weight:500;
}
.rr-hero-grade{
  font-size:26px;
  font-weight:800;
  color:var(--gold,#e0b356);
  line-height:1;
}
.rr-hero-summary{
  font-size:15px;
  color:#f0e9ff;
  line-height:1.6;
  margin:0 0 10px;
  position:relative;
  z-index:1;
}
.rr-hero-mood{
  font-size:12.5px;
  color:var(--text-muted,#b5a8ce);
  margin:0;
  position:relative;
  z-index:1;
}
.rr-hero-keywords{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin-top:12px;
  position:relative;
  z-index:1;
}
.rr-hero-keywords span{
  font-size:11.5px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:#e9e2fb;
  border:1px solid rgba(255,255,255,0.1);
}

/* ---------------------------------------------------------
   2) Key Summary — 핵심 포인트 카드 그리드 (2열)
   ---------------------------------------------------------*/
.rr-section-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:700;
  color:var(--gold-light,#e6c98a);
  letter-spacing:.02em;
  margin:2px 2px 2px;
}
.rr-section-label i{ font-size:11px; }

.rr-keypoints{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:360px){
  .rr-keypoints{ grid-template-columns:1fr; }
}
.rr-keypoint{
  background:var(--gradient-card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-md,14px);
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rr-keypoint .rr-kp-head{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:#fff;
}
.rr-keypoint .rr-kp-head i{
  color:var(--gold,#e0b356);
  font-size:12px;
  width:16px;
  text-align:center;
}
.rr-keypoint p{
  font-size:12.5px;
  color:var(--text-muted,#b9adcf);
  line-height:1.55;
  margin:0;
}

/* ---------------------------------------------------------
   3) Category detail blocks — 카테고리별 세부 카드
   (기존 .result-card 톤을 그대로 계승해 시각 일관성 유지)
   ---------------------------------------------------------*/
.rr-detail-card{
  border-radius:var(--radius-lg);
  padding:18px 16px;
  background:var(--gradient-card);
  border:1px solid rgba(224,179,86,0.18);
}
.rr-detail-card .tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:var(--gold,#e0b356);
  background:rgba(224,179,86,0.12);
  padding:3px 9px;
  border-radius:999px;
  margin-bottom:8px;
}
.rr-detail-card h3{
  font-size:15px;
  color:#fff;
  margin:0 0 6px;
}
.rr-detail-card p{
  font-size:13px;
  color:var(--text-muted,#b9adcf);
  line-height:1.65;
  margin:0;
}
.rr-detail-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ---------------------------------------------------------
   4) 오늘의 행운 포인트 — 색/숫자/시간/행동 칩
   ---------------------------------------------------------*/
.rr-lucky-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-md,14px);
  padding:14px 10px;
}
.rr-lucky-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}
.rr-lucky-item i{
  font-size:15px;
  color:var(--gold,#e0b356);
}
.rr-lucky-item .rr-lucky-label{
  font-size:10.5px;
  color:var(--text-faint,#8a7fa3);
}
.rr-lucky-item .rr-lucky-value{
  font-size:13px;
  font-weight:700;
  color:#fff;
}

/* ---------------------------------------------------------
   5) 한줄 조언 — 상담사 톤의 마무리 문장
   ---------------------------------------------------------*/
.rr-advice{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px 14px;
  border-radius:var(--radius-md,14px);
  background:linear-gradient(135deg, rgba(224,179,86,0.12), rgba(155,109,255,0.08));
  border:1px solid rgba(224,179,86,0.22);
}
.rr-advice i{
  color:var(--gold,#e0b356);
  font-size:15px;
  margin-top:2px;
}
.rr-advice p{
  margin:0;
  font-size:13.5px;
  color:#f2ecff;
  line-height:1.6;
  font-style:normal;
}

/* ---------------------------------------------------------
   6) Next-action CTA — 저장/마이페이지/관련운세/소원/복주머니
   (기존 .result-next-cta 그리드를 그대로 재사용/확장)
   ---------------------------------------------------------*/
.rr-actions-row{
  display:flex;
  gap:8px;
}
.rr-actions-row > *{ flex:1; }

.rr-cta-title{
  font-size:12.5px;
  font-weight:700;
  color:var(--text-muted,#b9adcf);
  margin:4px 2px 0;
}
.rr-cta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.rr-cta-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 8px;
  border-radius:var(--radius-md,14px);
  background:var(--gradient-card);
  border:1px solid rgba(255,255,255,0.08);
  color:#e9e2fb;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  text-align:center;
  transition:transform .15s ease, border-color .15s ease;
}
.rr-cta-card:active{ transform:scale(0.97); }
.rr-cta-card i{
  font-size:17px;
  color:var(--gold,#e0b356);
}
.rr-cta-card.rr-cta-primary{
  border-color:rgba(224,179,86,0.35);
  background:linear-gradient(135deg, rgba(224,179,86,0.16), rgba(155,109,255,0.1));
}

/* ---------------------------------------------------------
   7) 상세/전문가 정보 — 접힌 상태(<details>)로 하단에 배치
   ---------------------------------------------------------*/
.rr-expert{
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  overflow:hidden;
}
.rr-expert summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  user-select:none;
}
.rr-expert summary::-webkit-details-marker{ display:none; }
.rr-expert summary .rr-expert-hint{
  font-size:11px;
  font-weight:500;
  color:var(--text-faint,#8a7fa3);
}
.rr-expert summary i.rr-chevron{
  color:var(--gold,#e0b356);
  transition:transform .2s ease;
}
.rr-expert[open] summary i.rr-chevron{ transform:rotate(180deg); }
.rr-expert-body{
  padding:0 16px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rr-expert-body .rr-detail-card{ border-color:rgba(255,255,255,0.08); }
.rr-expert-note{
  font-size:11px;
  color:var(--text-faint,#8a7fa3);
  line-height:1.5;
  margin:0;
  padding-top:4px;
  border-top:1px dashed rgba(255,255,255,0.08);
}

/* ---------------------------------------------------------
   무료/심화(포켓 잠금) 결과 구분 배지
   ---------------------------------------------------------*/
.rr-tier-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10.5px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
}
.rr-tier-badge.rr-tier-free{
  color:#b9adcf;
  background:rgba(255,255,255,0.08);
}
.rr-tier-badge.rr-tier-deep{
  color:#2a1a05;
  background:linear-gradient(135deg,#f0d29a,#e0b356);
}

/* 로딩 카피 공용 톤 (mystical-loader 문구 래핑용, 선택적) */
.rr-loading-caption{
  text-align:center;
  font-size:12.5px;
  color:var(--text-muted,#b5a8ce);
  margin-top:6px;
}