/* =========================
   Slot Event (scoped)
========================= */
.slot-event{
  width:100%;
  max-width:520px;
  margin:0 auto;

  --reelH: clamp(86px, 14.5vw, 132px);
  --reelW: calc(var(--reelH) * 0.72);
  --icon:  calc(var(--reelH) * 0.62);
  --gap:   clamp(5px, 1.2vw, 10px);

  --slot-left: 50%;
  --slot-top:  23%;

  /* ✅ share url overlay 기본값(JS가 최종 덮어씀) */
  --share-left: 50%;
  --share-top:  30%;
  --shareW: 64%;
  --shareH: 2%;
}

/* 전역 flex 영향/줄어듦 방지 */
.slot-event .cell{
  flex: 0 0 var(--reelH);
  margin:0;
  padding:0;
}

/* =========================
   Landing image + overlay
========================= */
.slot-event .slot-landing{
  position:relative;
  width:100%;
}

.slot-event .slot-landing-img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================
   Slot overlay (reels)
========================= */
.slot-event .slot-overlay{
  position:absolute;
  left:var(--slot-left);
  top:var(--slot-top);
  transform:translate(-50%, -50%);
  display:flex;
  gap:var(--gap);
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.slot-event .reel{
  width:var(--reelW);
  height:var(--reelH);
  overflow:hidden;
  border-radius:12px;
  position:relative;
  background:transparent;
  border:0;
}

.slot-event .slot-strip{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;

  float:none !important;
  display:block !important;
}

.slot-event .cell{
  height:var(--reelH);
  display:flex !important;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.slot-event .cell img{
  width:var(--icon) !important;
  height:var(--icon) !important;
  max-width:var(--icon) !important;
  max-height:var(--icon) !important;
  object-fit:contain;
  display:block;
  vertical-align:middle;
}

/* =========================
   ✅ Share URL overlay (white box)
========================= */
#slotLanding .share-url-overlay{
  position:absolute;
  left:var(--share-left);
  top:var(--share-top);
  transform:translate(-50%, -50%);
  width:var(--shareW);
  height:var(--shareH);
  display:flex;
  align-items:center;
  justify-content:center;

  /* 흰박스는 이미지에 있으니 overlay는 클릭 막기 */
  pointer-events:none;
}

#slotLanding #shareUrlView{
  width:100%;
  height:100%;
  border:0;
  outline:0;
  background:transparent;   /* 이미지 흰 박스가 배경 */
  padding:0 10px;
  font-weight:700;
  font-size:clamp(12px, 2.8vw, 15px);
  color:#333;
  pointer-events:none;
}

/* =========================
   Share / Msg (below image)
========================= */
.slot-event .share-row{ margin-top:12px; }

.slot-event .btn-share{
  width:100%;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
}

.slot-event .msg{
  margin-top:12px;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  min-height:20px;
}
.slot-event .msg.ok{ color:#10b981; }
.slot-event .msg.bad{ color:#ef4444; }

@media (min-width: 768px){
  .slot-event{ max-width:560px; }
}