/* 막대기 뽑기 */
.sw-info { margin: 0; text-align: center; font-weight: 700; font-size: 14.5px; color: var(--text-2); }
.sw-info.is-error { color: var(--danger); }
.sw-banner .sw-bname {
  display: inline-block; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.sw-status { margin: -6px 0 0; text-align: center; color: var(--text-2); font-weight: 700; font-size: 14.5px; }

.sw-stage {
  display: flex; justify-content: center; padding: 8px 8px 0; overflow-x: auto; overflow-y: hidden;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 30px), color-mix(in srgb, var(--border-strong) 55%, var(--surface-2)) calc(100% - 30px)),
    var(--surface-2);
}
.sw-area { position: relative; flex: none; margin: 0 auto; }

/* 막대 (버튼 전체가 한 칸, 안쪽 막대는 가운데) */
.sw-slot {
  --c: #ff5a36; --tilt: 0deg;
  position: absolute; z-index: 1; padding: 0; border: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .8s cubic-bezier(.22, .9, .3, 1);
}
.sw-slot:disabled { cursor: default; }
.sw-slot:focus-visible { box-shadow: none; }
.sw-slot:focus-visible .sw-stick { box-shadow: 0 0 0 3px rgba(255, 90, 54, .55); }
.sw-stick {
  position: absolute; left: 50%; top: 8px; bottom: 0; width: var(--sw, 14px); border-radius: 999px 999px 6px 6px;
  transform: translateX(-50%) rotate(var(--tilt)); transform-origin: 50% var(--vis, 66px);
  background:
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(120, 70, 20, .07) 22px 24px),
    linear-gradient(90deg, #b8773a 0%, #e9b777 30%, #f5d19c 45%, #dca263 72%, #a9692e 100%);
  box-shadow: 0 2px 5px rgba(60, 30, 5, .25);
  transition: top .18s ease, transform .5s ease;
}
.sw-slot:not(:disabled):hover .sw-stick { top: 2px; }
.sw-slot.is-grab .sw-stick { animation: sw-grab .28s ease-in-out; }
.sw-slot.is-drawn .sw-stick { transform: translateX(-50%); }
/* 뽑은 사람 색 표시 */
.sw-slot.is-drawn .sw-stick::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 12px; border-radius: 999px 999px 3px 3px;
  background: var(--c); box-shadow: 0 0 0 2px #fff;
}
/* 짧은 막대의 빨간 끝 (컵 안에 숨어 있다가 뽑으면 보임) */
.sw-slot.is-short .sw-stick::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, #b3121a, #ff4a4d 45%, #d81f26);
  animation: bb-pop .4s cubic-bezier(.2, 1.4, .4, 1);
}
.sw-slot.is-short .sw-stick { box-shadow: 0 0 0 3px rgba(229, 56, 59, .35), 0 4px 14px rgba(229, 56, 59, .45); }
.sw-name {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -1px;
  font-size: 11.5px; font-weight: 900; line-height: 1; color: #4a2c0c;
  max-height: calc(100% - 46px); overflow: hidden; white-space: nowrap;
}

/* 컵 */
.sw-cup {
  position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 16px, transparent 16px 32px),
    linear-gradient(90deg, #b8391a 0%, #ff6a45 22%, #ff9173 38%, #ff5a36 62%, #d0461f 86%, #a8321a 100%);
  display: flex; align-items: center; justify-content: center;
}
.sw-cup-label {
  padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #c93d18;
  font-weight: 900; font-size: 15px; letter-spacing: .08em; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.sw-lip {
  position: absolute; left: -5px; right: -5px; height: 15px; z-index: 4; pointer-events: none; border-radius: 8px;
  background: linear-gradient(180deg, #ffc2ae, #ff7a57 60%, #e5532f);
  box-shadow: 0 3px 6px rgba(120, 30, 5, .25);
}

/* 뽑은 결과 */
.sw-log { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sw-chip {
  --c: var(--text-3);
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; max-width: 100%;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text-2);
}
.sw-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.sw-chip-name { max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-chip-tag { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); white-space: nowrap; }
.sw-chip.is-current { background: var(--surface); color: var(--text); border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.sw-chip.is-long, .sw-chip.is-skip { opacity: .65; }
.sw-chip.is-short { color: var(--text); border-color: var(--red); }
.sw-chip.is-short .sw-chip-tag { background: var(--red); color: #fff; }

@keyframes sw-grab {
  0%, 100% { transform: translateX(-50%) rotate(var(--tilt)); }
  30% { transform: translateX(-50%) translateY(-6px) rotate(calc(var(--tilt) - 3deg)); }
  65% { transform: translateX(-50%) translateY(-3px) rotate(calc(var(--tilt) + 3deg)); }
}