body {
    background: #fdfdfd;
    font-family: 'Noto Sans KR', sans-serif;
}

.roulette-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.roulette-wrapper {
    position: relative;
    width: 660px;
    height: 660px;
    border-radius: 50%;
    /* 배경 라인 등 */
    background: conic-gradient(from -18deg, #ff9a44 0deg 72deg, #fc6076 72deg 144deg, #ffb347 144deg 216deg, #ff7a3d 216deg 288deg, #d85b2a 288deg 360deg);
    padding: 34px;
    box-shadow: inset 0 0 0 4px rgba(90, 42, 28, 0.55), inset 0 0 0 10px rgba(255, 172, 38, 0.18), inset 0 0 16px rgba(44, 24, 36, 0.5), 0 10px 20px rgba(0, 0, 0, 0.15);
    margin: 40px; /* 컨테이너 중앙 정렬 시 상하좌우 최소 여백을 확보하여 바늘이 잘리지 않도록 함 */
}

.roulette-wrapper::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: conic-gradient(from -20deg, rgba(255, 154, 68, 0.96), rgba(252, 96, 118, 0.94), rgba(255, 179, 71, 0.96), rgba(255, 122, 61, 0.94), rgba(216, 91, 42, 0.96));
    box-shadow: inset 0 0 0 9px rgba(255, 255, 255, 0.16), inset 0 0 20px rgba(120, 48, 18, 0.42);
    z-index: 0;
}

.roulette-lights {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
}

.roulette-light {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fffef0 42%, #f1e5c8 100%);
    border: 2px solid rgba(120, 82, 42, 0.45);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.82), 0 0 20px rgba(255, 244, 190, 0.34), 0 2px 5px rgba(35, 20, 45, 0.32);
    opacity: 0.96;
    transition: background-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.roulette-light.is-active {
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fff56d 48%, #ffbb3d 100%);
    opacity: 1;
    border-color: rgba(115, 72, 24, 0.62);
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 1), 0 0 18px rgba(255, 255, 255, 0.95), 0 0 28px rgba(255, 245, 109, 1), 0 0 48px rgba(255, 154, 68, 0.9), 0 0 72px rgba(255, 96, 118, 0.45), 0 3px 8px rgba(80, 45, 20, 0.28);
}

/* 대기 상태 무지개색 효과 클래스 추가 */
.roulette-light.idle-red {
    background: radial-gradient(circle at 35% 30%, #ffcccc 0%, #ff0000 60%);
    opacity: 1; border-color: #cc0000;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
.roulette-light.idle-orange {
    background: radial-gradient(circle at 35% 30%, #ffe6cc 0%, #ff7f00 60%);
    opacity: 1; border-color: #cc6600;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
.roulette-light.idle-yellow {
    background: radial-gradient(circle at 35% 30%, #ffffcc 0%, #ffff00 60%);
    opacity: 1; border-color: #cccc00;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
.roulette-light.idle-green {
    background: radial-gradient(circle at 35% 30%, #ccffcc 0%, #00ff00 60%);
    opacity: 1; border-color: #00cc00;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
.roulette-light.idle-blue {
    background: radial-gradient(circle at 35% 30%, #ccccff 0%, #0000ff 60%);
    opacity: 1; border-color: #0000cc;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
.roulette-light.idle-indigo {
    background: radial-gradient(circle at 35% 30%, #d8ccff 0%, #4b0082 60%);
    opacity: 1; border-color: #3a0066;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}
.roulette-light.idle-violet {
    background: radial-gradient(circle at 35% 30%, #ffccff 0%, #ff00ff 60%);
    opacity: 1; border-color: #cc00cc;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.wheel {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#fcebeb 0deg 60deg,
            #ffffff 60deg 120deg,
            #fcebeb 120deg 180deg,
            #ffffff 180deg 240deg,
            #fcebeb 240deg 300deg,
            #ffffff 300deg 360deg);
    transition: transform 8s cubic-bezier(0.1, 0.7, 0.1, 1);
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}

.text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 150px;
    margin-top: -75px;
    transform-origin: 0% 50%;
    text-align: center;
    padding-left: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.text-box span {
    display: block;
    font-size: 26px;
    font-weight: 500;
    color: #080b11;
    line-height: 1.3;
}

.text-box small {
    display: block;
    font-size: 20px;
    color: #080b11;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 5px;
}

.text-box img {
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
    object-position: center;
    margin-left: auto;
    margin-right: auto;
}


/* 새 핀 디자인 (첨부 이미지 참고) */
.pin {
    position: absolute;
    top: -20px; /* 룰렛 밖으로 나오는 위치 조정 */
    left: 50%;
    width: 54px;
    height: 54px;
    margin-left: -27px;
    background: #2a2a2a; /* 이미지와 비슷한 다크그레이 */
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    /* 룰렛 조명(7) 위에는 표시하되, 고정 검색/상단 네비(50) 아래로 지나가게 합니다. */
    z-index: 10;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
}

.pin::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* 以묒븰 ?쒖옉 踰꾪듉 ?붿옄??*/
.start-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    margin: -70px 0 0 -70px;
    background: #080b11;
    border-radius: 50%;
    border: 8px solid #fff;
    font-size: 34px;
    font-weight: 900;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s ease;
}

.start-btn.is-spinning {
    transform: rotate(360deg);
}

.start-btn span {
    background: linear-gradient(135deg, #ff9a44, #fc6076);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.start-btn:disabled span {
    background: #888;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ?뱀꺼 寃곌낵 ?덉씠???앹뾽 ?ㅽ???*/
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: #fff;
    padding: 40px 50px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 400px;
    width: 80%;
}

.modal-content h2 {
    margin: 0 0 20px 0;
    font-size: 32px;
    color: #ff5757;
    font-weight: 500;
}

.modal-content p {
    font-size: 28px;
    font-weight: 500;
    color: #080b11;
    margin-bottom: 30px;
}

.modal-content button {
    background: linear-gradient(135deg, #ff9a44, #fc6076);
    color: #fff;
    border: none;
    padding: 12px 40px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(252, 96, 118, 0.4);
}

.modal-content button:hover {
    box-shadow: 0 6px 20px rgba(252, 96, 118, 0.6);
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 추가된 헤더 및 당첨자 배너 영역 CSS */
.roulette-header {
    text-align: center;
    margin-bottom: 20px;
}

.roulette-title-large {
    font-size: 52px;
    font-weight: 500;
    color: #080b11;
    margin-bottom: 35px;
}

.roulette-winner-banner {
    display: inline-block;
    padding: 18px 60px;
    font-size: 24px;
    font-weight: 500;
    color: #080b11;
    border: 2px solid transparent;
    border-radius: 50px;
    background-image: linear-gradient(#fff5f5, #fff5f5), linear-gradient(to right, #ff9a44, #fc6076);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* 추가된 양쪽 끝 장식용 꽃가루 (Confetti) 공통 CSS */
.confetti {
    position: absolute;
    z-index: 5;
    border-radius: 4px;
}

/* 좌측 상단 (11시 방향 부근) */
.confetti-tl-1 { width: 10px; height: 28px; background: #ff4757; top: -20px; left: 45px; transform: rotate(25deg); }
.confetti-tl-2 { width: 12px; height: 32px; background: #ff9a44; top: 20px; left: -30px; transform: rotate(-55deg); }
.confetti-tl-3 { width: 8px; height: 18px; background: #ff4757; top: 70px; left: -20px; transform: rotate(-25deg); }

/* 우측 하단 (5시 방향 부근) */
.confetti-br-1 { width: 12px; height: 32px; background: #ff4757; bottom: -20px; right: 35px; transform: rotate(-15deg); }
.confetti-br-2 { width: 10px; height: 25px; background: #ff9a44; bottom: 25px; right: -30px; transform: rotate(45deg); }
.confetti-br-3 { width: 8px; height: 18px; background: #ff4757; bottom: 75px; right: -20px; transform: rotate(-35deg); }

/* 하단 알림 배너 및 유의사항 영역 CSS */
.roulette-footer {
    width: 100%;
    max-width: 810px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.alarm-banner {
    display: inline-flex;
    align-items: center;
    background-color: #fff0f5; /* 연한 핑크빛 배경 (이미지 참고) */
    border-radius: 50px;
    padding: 16px 40px;
    margin-bottom: 70px;
    box-shadow: 0 4px 15px rgba(255, 230, 235, 0.5);
}

.toggle-switch {
    width: 64px;
    height: 32px;
    background-color: #e0e0e0;
    border-radius: 30px;
    position: relative;
    margin-right: 18px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.toggle-circle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.alarm-banner span {
    font-size: 26px;
    font-weight: 500;
    color: #080b11;
}

.notice-section {
    width: 100%;
    max-width: 780px;
    text-align: left;
    margin-bottom: 50px;
}

.notice-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    color: #080b11;
    margin-bottom: 25px;
    gap: 6px;
}

.notice-divider {
    border-top: 1px solid #ddd;
    margin-bottom: 25px;
}

.notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notice-list li {
    position: relative;
    padding-left: 10px;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #080b11;
    line-height: 1.5;
    /*word-break: keep-all;*/
}

.notice-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    top: -1px;
    font-weight: bold;
    font-size: 14px;
    color: #080b11;
}

.content-container {
    display: flex;
    width: auto !important;
    margin: 0 auto;
    justify-content: left;
}
.marquee-wrapper {
    height: 67px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
}

.marquee-item {
    position: absolute;
    width: 100%;
    text-align: center;
}

/* Alpine.js 트랜지션용 클래스 */
.mq-anim {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.mq-in {
    transform: translateY(100%);
    opacity: 0;
}

.mq-out {
    transform: translateY(-100%);
    opacity: 0;
}

.mq-center {
    transform: translateY(0);
    opacity: 1;
}

.winner-profile {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #eee;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-top: 0px;
}

.winner-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
}

/* Image asset skin */
.roulette-wrapper {
    width: 681px;
    height: 681px;
    padding: 0;
    background: url('../img/roulette_bg.png') center center / contain no-repeat;
    box-shadow: none;
    overflow: visible;
    --wheel-offset-y: -18px;
}

.roulette-wrapper::before {
    content: none;
}

.roulette-light {
    width: 24px;
    height: 24px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: url('../img/ico_light_on.png') center center / contain no-repeat;
    box-shadow: none;
    opacity: 0;
    transition: opacity 0.12s ease, filter 0.12s ease;
}

.roulette-light.is-active,
.roulette-light.idle-red,
.roulette-light.idle-orange,
.roulette-light.idle-yellow,
.roulette-light.idle-green,
.roulette-light.idle-blue,
.roulette-light.idle-indigo,
.roulette-light.idle-violet {
    width: 33px;
    height: 33px;
    margin: 0;
    background-image: url('../img/ico_light_on.png');
    opacity: 1;
    border: 0;
    box-shadow: none;
}

.roulette-light.idle-red { filter: hue-rotate(330deg) saturate(1.8); }
.roulette-light.idle-orange { filter: hue-rotate(20deg) saturate(1.8); }
.roulette-light.idle-yellow { filter: hue-rotate(55deg) saturate(1.8); }
.roulette-light.idle-green { filter: hue-rotate(105deg) saturate(1.8); }
.roulette-light.idle-blue { filter: hue-rotate(180deg) saturate(1.8); }
.roulette-light.idle-indigo { filter: hue-rotate(230deg) saturate(1.8); }
.roulette-light.idle-violet { filter: hue-rotate(275deg) saturate(1.8); }

.wheel {
    position: absolute;
    top: calc(64px + var(--wheel-offset-y));
    left: 61px;
    width: 559px;
    height: 559px;
    box-shadow: none;
    z-index: 1;
}

.pin {
    top: -18px;
    width: 76px;
    height: 125px;
    margin-left: -38px;
    background: url('../img/img_pin.png') center center / contain no-repeat;
    border-radius: 0;
    transform: none;
    box-shadow: none;
    /* 스크롤 시 sticky 헤더(z-index: 50)를 가리지 않도록 룰렛 내부에서만 높게 유지 */
    z-index: 10;
}

.pin::after {
    content: none;
}

.start-btn {
    top: calc(50% + var(--wheel-offset-y));
    width: 146px;
    height: 146px;
    margin: -73px 0 0 -73px;
    background: url('../img/btn_start_basic2.png') center center / contain no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: transparent;
    z-index: 20;
}

.start-btn span,
.start-btn:disabled span {
    opacity: 0;
}