/* =========================================================
   Roulette Modal (summer blue theme)
   ========================================================= */
.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%, #eef6ff 100%);
  border:1px solid #cfe4ff;
  border-radius:18px;
  padding:72px 16px 16px;
  display:grid;
  gap:14px;
  place-items:center;
  overflow:visible;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
}

/* --- 닫기 버튼 --- */
.roulette-modal .btn-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  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;
  width:52px;
  height:52px;
  border-radius:999px;
  z-index:5;
  pointer-events:none;
  background:radial-gradient(circle at 35% 35%, #7bb8ff, #315bff 70%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 0 0 4px #ffffff,
    0 0 0 6px rgba(49,91,255,.12);
}
.needle-top::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:999px;
  background:radial-gradient(circle at 35% 35%, #ffffff, #eef4ff);
  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 #315bff;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));
}

/* --- 중앙 버튼 --- */
.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;
  font-size:20px;
  cursor:pointer;
  background:radial-gradient(circle at 35% 35%, #6f4dff, #2a00ff);
  box-shadow:
    0 8px 20px rgba(42,0,255,.35),
    inset 0 0 0 2px rgba(255,255,255,.6);
}
.hub > button:disabled{
  opacity:.7;
  cursor:not-allowed;
}

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

/* --- 쿠폰 확인 버튼 --- */
.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,#5f8fff 0%, #315bff 100%);
  box-shadow:
    0 4px 12px rgba(49,91,255,.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(49,91,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.65);
}
.btn-go-coupon:focus{
  outline:2px solid rgba(49,91,255,.35);
  outline-offset:2px;
}

/* --- 공유 카드 --- */
.share-card{
  width:100%;
  background:#fff;
  border:1px solid #cfe4ff;
  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:#2a00ff;
}
.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:#315bff;
}

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

.share-card .share-url{
  display:block;
  width:100%;
  margin-top:12px;
  padding:14px 16px;
  border-radius:12px;
  background:#fff;
  border:1px dashed #bdd8ff;
  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%;
}

/* --- 접근성 숨김 텍스트 --- */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* --- PC/태블릿 확대 --- */
@media (min-width:768px){
  .roulette-modal .modal-inner{
    width:min(100%,600px);
    padding:76px 18px 18px;
  }

  .wheel-wrap{
    max-width:460px;
  }

  .hub > button{
    width:100px;
    height:100px;
    font-size:22px;
  }

  .result,
  .reward-box,
  .share-card{
    width:100%;
  }
}