/* =========================================================
   Roulette Modal (pink theme) — cleaned & conflict-free
   ========================================================= */
.roulette-modal, .roulette-modal * { box-sizing: border-box; }

/* --- 모달 오버레이 --- */
.roulette-modal{
  position:fixed; inset:0; display:none!important;
  align-items:center; justify-content:center;
  background:rgba(17,17,17,.65); z-index:99; padding:12px;
  isolation:isolate;
}
.roulette-modal.show{display:flex!important}

/* --- 모달 박스 --- */
.roulette-modal .modal-inner{
  position:relative; z-index:1;
  width:min(100%,560px);
  background:linear-gradient(180deg,#ffffff 0%, #fff0f5 100%);
  border:1px solid #f6cfe3;
  border-radius:16px;
  /* 상단 여백 넉넉히 → 핀이 안삐져나오게 */
  padding:72px 16px 16px;
  display:grid; gap:12px; place-items:center;
  overflow:visible;
}

/* --- 닫기(X) 버튼: 완전 중앙 교차선 --- */
.roulette-modal .btn-modal-close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; border-radius:999px;
  background:rgba(0,0,0,.78); border:1px solid rgba(255,255,255,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.15);
  display:grid; place-items:center;
  color:transparent; line-height:0; font-size:0; cursor:pointer;
}
.roulette-modal .btn-modal-close::before,
.roulette-modal .btn-modal-close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:18px; height:2px; background:#fff; border-radius:2px;
  transform-origin:center;
}
.roulette-modal .btn-modal-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.roulette-modal .btn-modal-close::after{  transform:translate(-50%,-50%) rotate(-45deg); }
.roulette-modal .btn-modal-close:active{ transform:scale(.97); }

/* --- 휠 컨테이너 --- */
.wheel-wrap{position:relative; aspect-ratio:1/1; width:100%; max-width:380px; margin:0 auto; overflow:visible;}
.wheel-wrap canvas{width:100%; height:100%; display:block;}

/* --- 포인터(핀): 블루 원 + 하얀 링 + 아래 삼각형 --- */
.needle-top{
  position:absolute; left:50%; transform:translateX(-50%);
  top:-8px; /* 필요시 -4 ~ -14 사이에서 미세조정 */
  width:52px; height:52px; border-radius:999px; z-index:5; pointer-events:none;
  background:radial-gradient(circle at 35% 35%, #7bb8ff, #2f6ee2 70%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 0 0 4px #ffffff,
    0 0 0 6px rgba(47,110,226,.12);
}
.needle-top::before{
  content:""; position:absolute; inset:10px; border-radius:999px;
  background:radial-gradient(circle at 35% 35%, #ffffff, #dbeafe); opacity:.95;
}
.needle-top::after{
  content:""; position:absolute; left:50%; top:44px; transform:translateX(-50%);
  width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent;
  border-top:18px solid #2f6ee2; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));
}

/* --- 중앙 START 버튼(핑크) --- */
.hub{position:absolute; inset:0; display:grid; place-items:center; z-index:2;}
.hub>button{
  width:96px; height:96px; border-radius:999px; border:0; color:#fff; font-weight:900; cursor:pointer;
  background:radial-gradient(circle at 35% 35%, #ff9dd2, #ff65b6);
  box-shadow:0 8px 20px rgba(255,102,182,.35), inset 0 0 0 2px rgba(255,255,255,.6);
}

/* --- 결과/리워드 카드 --- */
.result{
  min-height:40px; width:100%;
  border:1px dashed #f3c2d9; border-radius:12px; padding:12px;
  font-size:14px; background:#fff; text-align:left;
}
.reward-box{
  width:100%; border:1px dashed #f3c2d9; border-radius:12px;
  padding:12px; background:#fff7fc; font-size:14px;
}
.result .tag{ display:inline-block; margin-left:6px; font-weight:700; color:#b02d73; }

/* --- 결과 옆 버튼 영역 & 쿠폰 확인 버튼(핑크) --- */
.result .btn-row{ display:inline-flex; gap:10px; align-items:center; margin-left:10px; }
.btn-go-coupon{
  appearance:none; border:0; cursor:pointer;
  padding:10px 16px; border-radius:12px; font:800 14px/1 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",sans-serif;
  color:#fff;
  background:linear-gradient(180deg,#ff8fc8 0%, #ff62b0 100%);
  box-shadow:0 4px 12px rgba(255,98,176,.28), inset 0 0 0 1px rgba(255,255,255,.55);
  transition:transform .05s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-go-coupon:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.btn-go-coupon:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(255,98,176,.22), inset 0 0 0 1px rgba(255,255,255,.65); }
.btn-go-coupon:focus{ outline:2px solid rgba(255,98,176,.35); outline-offset:2px; }

/* --- 공유 카드 --- */
.share-card{
  width:100%; background:#fff; border:1px solid #f6cfe3; border-radius:12px; padding:12px;
}
.share-title{
  font:800 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",sans-serif;
  margin-bottom:8px; text-align:center; color:#b02d73;
}
.sns-grid{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.sns-btn{
  width:48px; height:48px; border-radius:999px; display:grid; place-items:center;
  color:#fff; border:0; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.15);
}
.sns-btn svg{ width:22px; height:22px; display:block; }
.sns-copy{ background:#6B7280; }

/* --- 공유 URL(한 줄/말줄임/클릭감) --- */
#shareUrlRow{ width:100%; }
#shareUrlLink{
  display:block; width:100%;
  margin-top:12px; padding:14px 16px; border-radius:12px;
  background:#fff; border:1px dashed #f0a7c8;
  color:#6b7280; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; user-select:all;
}
#shareUrlLink:active{ background:#fff4fb; }

/* --- PC에서 약간 키우기 --- */
@media (min-width:768px){
  .wheel-wrap{ max-width:460px; }
  .hub>button{ width:100px; height:100px; }
}

/* 1줄, 말줄임 */
.share-card .share-url {
  display:block; width:100%;
  margin-top:12px; padding:14px 16px; border-radius:12px;
  background:#fff; border:1px dashed #f0a7c8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.share-card .share-url a{
  color:#6b7280; text-decoration:none; user-select:all;
  display:block; width:100%;
}