@charset "utf-8";

/* ===== 상단 카드 안 지표 레이아웃 ===== */
.stats-pro{ padding:10px 0 6px; }
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:10px;
}

/* 공통 카드 */
.stat{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius:14px;
  padding:10px 8px;
  color:#fff;
  text-align:center;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08) inset, 0 3px 10px rgba(0,0,0,.04);
}

/* 숫자형 */
.stat--plain .stat-num{
  font-size:18px; font-weight:800; line-height:1;
}
.stat--plain .stat-label{
  font-size:11px; opacity:.92; margin-top:4px;
}

/* 퍼센트형(도넛) */
.stat--pct{ padding:8px 6px 9px; }
.pct-wrap{ position:relative; width:54px; height:54px; margin:0 auto 4px; }
.pct{ width:54px; height:54px; transform: rotate(-90deg); display:block; }
.pct-bg{
  fill:none; stroke:rgba(255,255,255,.28); stroke-width:4.5; stroke-linecap:round;
}
.pct-fg{
  fill:none; stroke:#ffffff; stroke-width:4.5; stroke-linecap:round;
  stroke-dasharray: 94.2477796077; /* 2πr, r=15 */
  stroke-dashoffset: 94.2477796077;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
.pct-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.pct-num b{ font-size:14px; margin-right:2px; }
.stat--pct .stat-label{ font-size:11px; }

/* 반응형: 좁은 폭에서 2열 */
@media (max-width:380px){
  .stats-grid{ grid-template-columns: repeat(2,1fr); }
}


/* 게스트 상태 스타일 */
.stats-grid.stats-guest .stat {
  position: relative;
}

.stat.locked .stat-num { opacity: .4; filter: blur(.3px); }
.stat.locked .pct-fg { stroke: rgba(255,255,255,.35); } /* 도넛 얇게만 표시 */
.stat.locked .pct-num { opacity: .35; }

.stat .lock{
  position: absolute;
  right: 0px;
  top: 32px;
  font-size: 10px; line-height: 1;
  color: #fff;
  background: rgba(0,0,0,.28);
  padding: 4px 6px;
  border-radius: 999px;
  backdrop-filter: saturate(140%) blur(2px);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  width: 100%;
}

/* CTA 버튼 */
.guest-cta{
  display:flex; gap:10px; justify-content:center; margin-top:12px;
}
.guest-cta .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 16px; border-radius:10px;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .2s;
}
.guest-cta .btn-primary{
  color:#fff; background:#12b76a; box-shadow:0 6px 16px rgba(18,183,106,.24);
}
.guest-cta .btn-primary:hover{ transform:translateY(-1px); }
.guest-cta .btn-ghost{
  color:#0f172a; background:rgba(255,255,255,.9); border:1px solid rgba(15,23,42,.08);
}
.guest-cta .btn-ghost:hover{ background:#fff; }