* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg1: #fff7fb;
    --bg2: #ffe1ee;

    --pink: #ff5b9d;
    --pink-dark: #d93b7a;
    --pink-soft: #ffc8dd;

    --text: #2f2430;
    --sub-text: #7a6d77;

    --machine-main: #ff78ad;
    --machine-dark: #d74781;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;

    font-family:
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255, 255, 255, 0.9),
            transparent 35%
        ),
        linear-gradient(
            150deg,
            var(--bg1),
            var(--bg2)
        );

    transition:
        background 0.5s ease,
        color 0.5s ease;
}

button,
input {
    font: inherit;
}

button {
    border: none;
}

.hidden {
    display: none !important;
}


/* =========================================
   도전 모드
========================================= */

body.challenge-active {
    --bg1: #160d20;
    --bg2: #47162f;

    --pink: #ff416c;
    --pink-dark: #a91658;
    --pink-soft: #ff9eb8;

    --text: #ffffff;
    --sub-text: #d9c6d3;

    --machine-main: #d62d66;
    --machine-dark: #6e1749;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 60, 110, 0.25),
            transparent 38%
        ),
        linear-gradient(
            150deg,
            #160d20,
            #40132d 55%,
            #67163d
        );
}


/* =========================================
   메인
========================================= */

.main {
    width: min(1100px, 94%);
    margin: 0 auto;

    padding: 28px 0 80px;

    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
}


/* =========================================
   광고주 버튼
========================================= */

.brand-button {
    align-self: flex-end;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 18px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(255, 91, 157, 0.2);

    color: var(--text);

    cursor: pointer;

    backdrop-filter: blur(12px);

    box-shadow:
        0 8px 28px rgba(210, 66, 125, 0.1);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.brand-button:hover {
    transform: translateY(-2px);

    background: #ffffff;

    box-shadow:
        0 12px 32px rgba(210, 66, 125, 0.15);
}

.brand-button span {
    font-size: 13px;
    font-weight: 800;
}

.brand-button small {
    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.08em;

    color: var(--pink);
}

body.challenge-active .brand-button {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}


/* =========================================
   로고
========================================= */

.logo {
    margin-top: 28px;

    font-size: clamp(44px, 7vw, 74px);
    font-weight: 1000;
    line-height: 1;

    letter-spacing: -0.075em;
}

.logo span {
    color: var(--pink);
}

.subtitle {
    margin-top: 12px;

    font-size: 17px;
    font-weight: 600;

    color: var(--sub-text);

    transition: color 0.4s ease;
}


/* =========================================
   모드 선택
========================================= */

.mode-selector {
    width: min(620px, 100%);

    margin-top: 30px;
    padding: 6px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;

    border-radius: 24px;

    background: rgba(255, 255, 255, 0.56);

    border: 1px solid rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(16px);

    box-shadow:
        0 14px 40px rgba(214, 55, 117, 0.1);
}

body.challenge-active .mode-selector {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

.mode-button {
    min-height: 78px;

    padding: 14px 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    border-radius: 19px;

    background: transparent;

    color: var(--sub-text);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.mode-button:hover {
    transform: translateY(-2px);
}

.mode-button.active {
    background: #ffffff;

    color: #2f2430;

    box-shadow:
        0 8px 22px rgba(214, 55, 117, 0.14);
}

.mode-button.challenge.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #ff416c,
            #a52a81
        );

    box-shadow:
        0 10px 30px rgba(255, 65, 108, 0.35);
}

.mode-icon {
    font-size: 27px;
}

.mode-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mode-text strong {
    font-size: 16px;
    font-weight: 900;
}

.mode-text small {
    margin-top: 3px;

    font-size: 11px;
    font-weight: 600;

    opacity: 0.75;
}


/* =========================================
   모드 정보
========================================= */

.mode-info {
    width: min(620px, 100%);

    margin-top: 12px;
    padding: 14px 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.66);

    border: 1px solid rgba(255, 255, 255, 0.86);

    backdrop-filter: blur(16px);

    box-shadow:
        0 10px 28px rgba(204, 59, 116, 0.08);
}

body.challenge-active .mode-info {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.mode-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mode-info-left > div {
    display: flex;
    flex-direction: column;
}

.mode-info-left strong {
    font-size: 14px;
    font-weight: 900;
}

.mode-info-left small {
    margin-top: 3px;

    font-size: 11px;

    color: var(--sub-text);
}

.mode-badge {
    padding: 7px 9px;

    border-radius: 9px;

    background: #ffe1ee;

    color: #d83275;

    font-size: 9px;
    font-weight: 1000;

    letter-spacing: 0.08em;
}

body.challenge-active .mode-badge {
    background: rgba(255, 72, 120, 0.2);

    color: #ffb2c5;
}

.challenge-counter {
    padding: 8px 12px;

    border-radius: 12px;

    background: rgba(255, 65, 108, 0.14);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.challenge-counter strong {
    margin-left: 4px;

    font-size: 17px;

    color: #ff416c;
}

body.challenge-active .challenge-counter strong {
    color: #ff9db4;
}


/* =========================================
   오늘의 선물
========================================= */

.daily-gift {
    width: min(620px, 100%);

    margin-top: 12px;
    padding: 14px 18px;

    display: flex;
    align-items: center;
    gap: 13px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 65, 108, 0.18),
            rgba(166, 43, 144, 0.14)
        );

    border: 1px solid rgba(255, 125, 155, 0.35);

    box-shadow:
        0 10px 35px rgba(255, 65, 108, 0.14);
}

.daily-gift-icon {
    font-size: 31px;
}

.daily-gift-text {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.daily-gift-text small {
    font-size: 9px;
    font-weight: 1000;

    letter-spacing: 0.13em;

    color: #ff5b88;
}

body.challenge-active .daily-gift-text small {
    color: #ff9db4;
}

.daily-gift-text strong {
    margin-top: 3px;

    font-size: 13px;
    font-weight: 900;
}

.daily-gift-status {
    padding: 8px 10px;

    border-radius: 999px;

    background: #ff416c;

    color: #ffffff;

    font-size: 10px;
    font-weight: 900;

    white-space: nowrap;
}


/* =========================================
   게임
========================================= */

.game {
    width: 100%;

    margin-top: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================
   기계
========================================= */

.claw-machine {
    width: min(560px, 94vw);

    overflow: hidden;

    border-radius: 36px 36px 48px 48px;

    background:
        linear-gradient(
            145deg,
            var(--machine-main),
            var(--machine-dark)
        );

    box-shadow:
        0 32px 75px rgba(195, 52, 111, 0.27),
        inset 0 2px 0 rgba(255, 255, 255, 0.35);

    transition:
        background 0.5s ease,
        box-shadow 0.5s ease,
        transform 0.5s ease;
}

body.challenge-active .claw-machine {
    box-shadow:
        0 35px 90px rgba(255, 35, 100, 0.3),
        0 0 52px rgba(255, 40, 105, 0.18),
        inset 0 2px 0 rgba(255, 255, 255, 0.22);

    animation:
        challengeMachinePulse 2.2s ease-in-out infinite;
}

@keyframes challengeMachinePulse {
    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.08);
    }
}


/* =========================================
   기계 상단
========================================= */

.machine-top {
    height: 76px;

    padding: 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #ffffff;
}

.machine-title {
    font-size: 27px;
    font-weight: 1000;

    letter-spacing: -0.05em;
}

.machine-decoration {
    font-size: 8px;

    letter-spacing: 5px;

    opacity: 0.7;
}


/* =========================================
   유리
========================================= */

.glass {
    width: calc(100% - 34px);
    height: 490px;

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    border: 4px solid rgba(255, 255, 255, 0.72);

    border-radius: 24px;

    background:
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.7),
            rgba(255, 235, 245, 0.34)
        );

    box-shadow:
        inset 0 0 45px rgba(255, 255, 255, 0.45);

    transition:
        background 0.5s ease,
        border-color 0.5s ease;
}

body.challenge-active .glass {
    background:
        linear-gradient(
            160deg,
            rgba(76, 25, 72, 0.64),
            rgba(42, 13, 48, 0.78)
        );

    border-color: rgba(255, 180, 205, 0.42);
}

.glass-shine {
    position: absolute;
    z-index: 2;

    top: -30px;
    left: 36px;

    width: 60px;
    height: 570px;

    transform: rotate(12deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
        );

    pointer-events: none;
}


/* =========================================
   레일
========================================= */

.rail {
    position: absolute;
    z-index: 4;

    top: 18px;
    left: 7%;
    right: 7%;

    height: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 999px;

    background: #dfd6df;

    box-shadow:
        inset 0 -3px 0 rgba(0, 0, 0, 0.08);
}

.rail-wheel {
    width: 18px;
    height: 18px;

    border: 4px solid #ffffff;
    border-radius: 50%;

    background: #a899a8;
}


/* =========================================
   갈고리
========================================= */

.claw {
    position: absolute;
    z-index: 10;

    top: 24px;
    left: 50%;

    width: 74px;
    height: 180px;

    transform: translateX(-50%);

    transition:
        left 0.18s ease,
        top 0.25s ease;
}

.rope {
    width: 5px;
    height: 105px;

    margin: 0 auto;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #c4bbc4,
            #ffffff,
            #aaa0aa
        );
}

.claw-head {
    width: 48px;
    height: 35px;

    margin: -1px auto 0;

    position: relative;
}

.claw-top {
    width: 32px;
    height: 18px;

    margin: 0 auto;

    border-radius: 8px 8px 4px 4px;

    background:
        linear-gradient(
            #ffffff,
            #c8bec8
        );

    box-shadow:
        0 3px 5px rgba(0, 0, 0, 0.15);
}

.arm {
    position: absolute;

    top: 14px;

    width: 8px;
    height: 46px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #aaa0aa,
            #f6f2f6
        );

    transform-origin: top center;

    transition:
        transform 0.25s ease;
}

.arm-left {
    left: 7px;

    transform: rotate(27deg);
}

.arm-right {
    right: 7px;

    transform: rotate(-27deg);
}


/* =========================================
   갈고리 하강
========================================= */

/* 연습 모드 */

.claw.claw-drop {
    top: 245px;

    transition:
        top 1.35s cubic-bezier(0.22, 0.7, 0.25, 1),
        left 0.18s ease;
}


/* 갈고리 올라오기 */

.claw.claw-up {
    top: 24px;

    transition:
        top 1.2s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.18s ease;
}


/* 도전 모드에서는 더 천천히 내려감 */

body.challenge-active .claw.claw-drop {
    top: 245px;

    transition:
        top 2.25s cubic-bezier(0.22, 0.7, 0.25, 1),
        left 0.18s ease;
}


/* 도전은 올라오는 것도 조금 느리게 */

body.challenge-active .claw.claw-up {
    top: 24px;

    transition:
        top 1.65s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.18s ease;
}


/* 집게 닫힘 */

.claw.grabbing .arm-left {
    transform: rotate(10deg);
}

.claw.grabbing .arm-right {
    transform: rotate(-10deg);
}


/* =========================================
   캡슐 영역
========================================= */

.prizes {
    position: absolute;
    z-index: 5;

    left: 28px;
    right: 28px;
    bottom: 72px;

    height: 175px;

    display: flex;
    flex-wrap: wrap-reverse;
    align-content: flex-start;
    justify-content: center;

    gap: 5px 3px;

    padding: 0 6px;

    overflow: visible;

    pointer-events: none;
}


/* =========================================
   캡슐
========================================= */

.prize,
.capsule,
.gift-capsule {
    position: relative;

    width: 66px;
    height: 66px;

    flex: 0 0 66px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 4px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #ffffff 0 48%,
            #ff83b5 49% 100%
        );

    box-shadow:
        0 8px 15px rgba(113, 41, 73, 0.18),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);

    font-size: 27px;

    user-select: none;

    transform:
        rotate(var(--rotate, 0deg))
        translateY(var(--offset, 0px));

    transition:
        transform 0.3s ease;
}

.prize:nth-child(3n),
.capsule:nth-child(3n),
.gift-capsule:nth-child(3n) {
    --rotate: -8deg;
    --offset: 5px;
}

.prize:nth-child(4n),
.capsule:nth-child(4n),
.gift-capsule:nth-child(4n) {
    --rotate: 7deg;
    --offset: 0px;
}

.prize:nth-child(5n),
.capsule:nth-child(5n),
.gift-capsule:nth-child(5n) {
    --rotate: -3deg;
    --offset: 8px;
}

.prize:nth-child(7n),
.capsule:nth-child(7n),
.gift-capsule:nth-child(7n) {
    --rotate: 11deg;
    --offset: 3px;
}

body.challenge-active .prize,
body.challenge-active .capsule,
body.challenge-active .gift-capsule {
    background:
        linear-gradient(
            180deg,
            #fff7fb 0 48%,
            #ff416c 49% 100%
        );

    box-shadow:
        0 8px 20px rgba(255, 40, 110, 0.28),
        0 0 15px rgba(255, 95, 140, 0.18);
}


/* 도전 상품 강조용 */

.daily-prize {
    border-color: #ffd35d !important;

    box-shadow:
        0 0 18px rgba(255, 211, 93, 0.8),
        0 8px 18px rgba(90, 40, 20, 0.2) !important;

    animation:
        dailyGiftGlow 1.1s ease-in-out infinite alternate;
}

@keyframes dailyGiftGlow {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.2);
    }
}


/* =========================================
   기계 바닥
========================================= */

.machine-floor {
    position: absolute;
    z-index: 3;

    left: 0;
    right: 0;
    bottom: 0;

    height: 82px;

    background:
        linear-gradient(
            #f9c3d8,
            #e694b7
        );

    border-top: 4px solid rgba(255, 255, 255, 0.55);
}

body.challenge-active .machine-floor {
    background:
        linear-gradient(
            #842d59,
            #4f183d
        );
}


/* =========================================
   출구
========================================= */

.prize-hole {
    position: absolute;
    z-index: 7;

    right: 24px;
    bottom: 16px;

    width: 145px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #41323f;

    color: #ffffff;

    box-shadow:
        inset 0 8px 12px rgba(0, 0, 0, 0.25);
}

.prize-hole span {
    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.08em;

    opacity: 0.82;
}

.hole-light {
    position: absolute;

    top: 7px;
    left: 12px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #60f59a;

    box-shadow:
        0 0 8px #60f59a;
}


/* =========================================
   컨트롤
========================================= */

.control-panel {
    padding: 24px 28px 30px;
}

.screen {
    width: 72%;
    height: 38px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #362532;

    color: #ffd8e8;

    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.25);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.04em;
}

body.challenge-active .screen {
    background: #160b18;

    color: #ff9eb8;

    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(255, 65, 108, 0.1);
}

.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.arrow-button,
.drop-button {
    cursor: pointer;

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

.arrow-button:active,
.drop-button:active {
    transform: translateY(3px);
}

.arrow-button {
    width: 66px;
    height: 66px;

    border-radius: 50%;

    background:
        linear-gradient(
            #ffffff,
            #eee7ed
        );

    color: #5f4b59;

    box-shadow:
        0 7px 0 #bd7b98,
        0 12px 20px rgba(89, 33, 60, 0.22);

    font-size: 25px;
    font-weight: 900;
}

.drop-button {
    width: 94px;
    height: 94px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 40% 30%,
            #ff86b6,
            #f23d82
        );

    color: #ffffff;

    box-shadow:
        0 9px 0 #b52b61,
        0 15px 25px rgba(111, 26, 65, 0.28);
}

body.challenge-active .drop-button {
    background:
        radial-gradient(
            circle at 40% 30%,
            #ff6d8d,
            #d81756
        );

    box-shadow:
        0 9px 0 #711333,
        0 0 32px rgba(255, 51, 105, 0.3);
}

.drop-button strong {
    font-size: 15px;
    font-weight: 1000;
}

.drop-button small {
    margin-top: 2px;

    font-size: 9px;
    font-weight: 800;

    opacity: 0.8;
}


/* =========================================
   가이드
========================================= */

.guide {
    margin-top: 18px;

    display: flex;
    gap: 26px;

    color: var(--sub-text);

    font-size: 11px;
    font-weight: 600;
}

.guide div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.guide b {
    padding: 5px 8px;

    border-radius: 7px;

    background: rgba(255, 255, 255, 0.72);

    color: var(--text);

    box-shadow:
        0 4px 12px rgba(100, 55, 80, 0.08);
}

body.challenge-active .guide b {
    background: rgba(255, 255, 255, 0.1);
}


/* =========================================
   오버레이
========================================= */

.overlay {
    position: fixed;
    z-index: 1000;

    inset: 0;

    padding: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(31, 16, 28, 0.62);

    backdrop-filter: blur(10px);
}


/* =========================================
   결과창 / 모달
========================================= */

.result-card,
.modal-card {
    width: min(440px, 100%);

    position: relative;

    padding: 34px;

    border-radius: 30px;

    background: #ffffff;

    color: #29202a;

    box-shadow:
        0 30px 100px rgba(27, 10, 23, 0.35);
}

.result-card {
    text-align: center;
}

.result-mode-badge,
.modal-label {
    display: inline-block;

    padding: 6px 9px;

    border-radius: 9px;

    background: #ffe1ed;

    color: #dd3779;

    font-size: 9px;
    font-weight: 1000;

    letter-spacing: 0.1em;
}

.result-confetti {
    margin-top: 18px;

    color: #ff65a0;

    font-size: 18px;
}

.result-title {
    margin-top: 7px;

    font-size: 27px;
    font-weight: 1000;

    letter-spacing: -0.04em;
}

.result-icon {
    margin: 18px 0 10px;

    font-size: 65px;
}

.result-brand {
    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.12em;

    color: #e64684;
}

.result-card h2 {
    margin-top: 5px;

    font-size: 24px;
}

.price-card {
    margin-top: 21px;
    padding: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 16px;

    background: #fff3f8;
}

.price-card span {
    font-size: 12px;

    color: #766775;
}

.price-card strong {
    font-size: 18px;

    color: #e4387b;
}

.price-link {
    margin-top: 12px;

    display: block;

    padding: 14px;

    border-radius: 15px;

    background: #ff5798;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 900;
}

.retry-button {
    width: 100%;

    margin-top: 9px;
    padding: 13px;

    border-radius: 15px;

    background: #f0e9ed;

    color: #51424d;

    font-weight: 900;

    cursor: pointer;
}


/* =========================================
   광고주 / 결제
========================================= */

.close-button {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #f5eef2;

    color: #54444f;

    font-size: 20px;

    cursor: pointer;
}

.modal-card h2 {
    margin-top: 18px;

    font-size: 28px;
    line-height: 1.25;

    letter-spacing: -0.045em;
}

.modal-card h2 span {
    color: #ff4e93;
}

.modal-text {
    margin: 13px 0 24px;

    color: #756874;

    font-size: 13px;
    line-height: 1.65;
}

.modal-card label {
    margin-top: 13px;

    display: flex;
    flex-direction: column;
    gap: 7px;

    font-size: 12px;
    font-weight: 800;
}

.modal-card input {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #e7dce2;
    outline: none;

    border-radius: 13px;

    background: #fcf9fb;

    color: #30232b;
}

.modal-card input:focus {
    border-color: #ff70a8;

    box-shadow:
        0 0 0 4px rgba(255, 91, 157, 0.1);
}

.advertiser-price {
    margin-top: 18px;
    padding: 14px 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 14px;

    background: #fff1f7;
}

.advertiser-price span {
    font-size: 11px;

    color: #786873;
}

.advertiser-price strong {
    color: #e33879;
}

.modal-buttons {
    margin-top: 15px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.inquiry-button,
.payment-button,
.real-payment-button {
    padding: 14px;

    border-radius: 14px;

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;
}

.inquiry-button {
    background: #eee7ec;

    color: #594851;
}

.payment-button,
.real-payment-button {
    background: #ff5798;

    color: #ffffff;
}

.real-payment-button {
    width: 100%;

    margin-top: 18px;
}

.payment-info {
    margin-top: 22px;

    padding: 15px;

    border-radius: 16px;

    background: #faf5f8;
}

.payment-info > div {
    padding: 9px 0;

    display: flex;
    justify-content: space-between;

    border-bottom: 1px solid #eee4e9;

    font-size: 12px;
}

.payment-info > div:last-child {
    border-bottom: none;
}

.payment-total strong {
    color: #e4387b;
}

.payment-notice {
    margin-top: 12px;

    text-align: center;

    color: #958992;

    font-size: 10px;
}


/* =========================================
   모바일
========================================= */

@media (max-width: 650px) {

    .main {
        width: 96%;

        padding-top: 18px;
    }

    .brand-button {
        align-self: center;

        max-width: 94%;
    }

    .brand-button span {
        font-size: 11px;
    }

    .logo {
        margin-top: 27px;
    }

    .subtitle {
        font-size: 14px;
    }

    .mode-selector,
    .mode-info,
    .daily-gift {
        width: 94%;
    }

    .mode-button {
        min-height: 70px;

        padding: 11px 10px;
    }

    .mode-icon {
        font-size: 22px;
    }

    .mode-text strong {
        font-size: 14px;
    }

    .mode-text small {
        font-size: 9px;
    }

    .glass {
        height: 430px;
    }

    .prizes {
        height: 205px;

        left: 14px;
        right: 14px;
    }

    .prize,
    .capsule,
    .gift-capsule {
        width: 56px;
        height: 56px;

        flex-basis: 56px;

        font-size: 23px;
    }

    .claw.claw-drop,
    body.challenge-active .claw.claw-drop {
        top: 205px;
    }

    .control-panel {
        padding: 20px 16px 27px;
    }

    .arrow-button {
        width: 58px;
        height: 58px;
    }

    .drop-button {
        width: 82px;
        height: 82px;
    }

    .guide {
        gap: 12px;

        font-size: 9px;
    }

    .result-card,
    .modal-card {
        padding: 28px 22px;
    }

}


@media (max-width: 410px) {

    .mode-text small {
        display: none;
    }

    .daily-gift-status {
        font-size: 8px;
    }

    .glass {
        height: 400px;
    }

    .prizes {
        height: 180px;
    }

    .prize,
    .capsule,
    .gift-capsule {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        font-size: 21px;
    }

    .claw.claw-drop,
    body.challenge-active .claw.claw-drop {
        top: 185px;
    }

    .prize-hole {
        width: 125px;
    }

}

/* =========================================
   BRAND PARTNERSHIP 추가 디자인
========================================= */

.partnership-card {
    width: min(520px, 100%);
    max-height: 88vh;

    overflow-y: auto;

    padding: 34px;

    border-radius: 30px;
}

.partner-view {
    width: 100%;
}

.partner-hero-icon {
    margin-top: 18px;

    font-size: 44px;
}

.partner-main-title {
    margin-top: 12px;

    font-size: 30px;
    line-height: 1.2;

    letter-spacing: -0.05em;
}

.partner-main-title span {
    color: #ff4e93;
}

.partner-intro-text {
    margin-top: 14px;
}


/* =========================================
   첫 화면 흐름 설명
========================================= */

.partner-mini-flow {
    margin-top: 24px;
    padding: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 18px;

    background: #fff4f8;
}

.partner-mini-flow > div:not(.flow-arrow) {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    text-align: center;
}

.partner-mini-flow strong {
    font-size: 11px;

    color: #ff4e93;
}

.partner-mini-flow span {
    font-size: 11px;
    font-weight: 800;

    color: #4f3d48;
}

.flow-arrow {
    color: #d8a4b9;

    font-size: 15px;
}


/* =========================================
   파트너십 버튼
========================================= */

.partner-learn-button,
.partner-start-button {
    width: 100%;

    padding: 15px 16px;

    border-radius: 15px;

    cursor: pointer;

    font-size: 13px;
    font-weight: 900;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.partner-learn-button {
    margin-top: 22px;

    background: #fff0f6;

    color: #e43c7d;

    border: 1px solid #ffc4da;
}

.partner-start-button {
    margin-top: 9px;

    background:
        linear-gradient(
            135deg,
            #ff5b9d,
            #f23d82
        );

    color: #ffffff;

    box-shadow:
        0 10px 24px rgba(242, 61, 130, 0.2);
}

.partner-learn-button:hover,
.partner-start-button:hover {
    transform: translateY(-2px);
}

.partner-small-note {
    margin-top: 12px;

    text-align: center;

    color: #9a8b95;

    font-size: 10px;
}


/* =========================================
   돌아가기 버튼
========================================= */

.partner-back-button {
    margin-bottom: 12px;

    padding: 7px 10px;

    border-radius: 10px;

    background: #f5edf2;

    color: #695761;

    cursor: pointer;

    font-size: 11px;
    font-weight: 800;
}


/* =========================================
   자세히 알아보기 제목
========================================= */

.partner-info-title {
    margin-top: 16px;

    font-size: 30px;
    line-height: 1.18;

    letter-spacing: -0.05em;
}

.partner-info-title span {
    color: #ff4e93;
}


/* =========================================
   연습 / 도전 시스템 카드
========================================= */

.partner-system-card {
    margin-top: 14px;
    padding: 16px;

    border-radius: 18px;

    border: 1px solid #eee2e8;
}

.practice-system {
    background:
        linear-gradient(
            135deg,
            #fff7fb,
            #fff0f6
        );
}

.challenge-system {
    background:
        linear-gradient(
            135deg,
            #fff0f4,
            #f9e8f3
        );

    border-color: #ffc2d5;
}

.system-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.system-icon {
    font-size: 26px;
}

.system-card-top > div:nth-child(2) {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.system-card-top small {
    font-size: 9px;
    font-weight: 1000;

    letter-spacing: 0.11em;

    color: #d65486;
}

.system-card-top strong {
    margin-top: 2px;

    font-size: 15px;
    font-weight: 900;
}

.system-price {
    padding: 7px 10px;

    border-radius: 999px;

    background: #ff5b9d;

    color: #ffffff;

    font-size: 14px;
    font-weight: 1000;
}

.partner-system-card p {
    margin-top: 12px;

    color: #71626d;

    font-size: 11px;
    line-height: 1.65;
}


/* =========================================
   장점
========================================= */

.partner-benefits {
    margin-top: 18px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.benefit-item {
    min-height: 88px;

    padding: 12px;

    display: flex;
    gap: 10px;

    border-radius: 16px;

    background: #faf6f8;

    border: 1px solid #eee5ea;
}

.benefit-item > span {
    flex-shrink: 0;

    font-size: 23px;
}

.benefit-item > div {
    display: flex;
    flex-direction: column;
}

.benefit-item strong {
    font-size: 12px;
    font-weight: 900;
}

.benefit-item small {
    margin-top: 4px;

    color: #8c7c86;

    font-size: 9px;
    line-height: 1.45;
}


/* =========================================
   오늘의 선물 파트너
========================================= */

.today-gift-partner {
    margin-top: 18px;
    padding: 16px;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #fff5d8,
            #fff0f3
        );

    border: 1px solid #f6d99c;
}

.today-gift-partner-icon {
    font-size: 28px;
}

.today-gift-partner > div {
    display: flex;
    flex-direction: column;
}

.today-gift-partner small {
    font-size: 9px;
    font-weight: 1000;

    letter-spacing: 0.1em;

    color: #d48b27;
}

.today-gift-partner strong {
    margin-top: 3px;

    font-size: 14px;
    font-weight: 900;
}

.today-gift-partner p {
    margin-top: 6px;

    color: #77695e;

    font-size: 10px;
    line-height: 1.55;
}


/* =========================================
   스크롤
========================================= */

.partnership-card::-webkit-scrollbar {
    width: 8px;
}

.partnership-card::-webkit-scrollbar-track {
    background: transparent;
}

.partnership-card::-webkit-scrollbar-thumb {
    background: #ead6df;

    border-radius: 999px;
}


/* =========================================
   모바일
========================================= */

@media (max-width: 600px) {

    .partnership-card {
        padding: 26px 20px;
    }

    .partner-main-title,
    .partner-info-title {
        font-size: 26px;
    }

    .partner-mini-flow {
        padding: 12px 8px;
    }

    .partner-mini-flow span {
        font-size: 9px;
    }

    .partner-benefits {
        grid-template-columns: 1fr;
    }

    .benefit-item {
        min-height: auto;
    }

}

/* =========================================
   GIFTCHA 광고 신청서 / 광고비 충전 / 검수
   기존 가챠 CSS 아래에 추가
========================================= */


/* =========================================
   상품 설명 textarea
========================================= */

.partner-textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #e7dce2;
    outline: none;

    border-radius: 13px;

    background: #fcf9fb;

    color: #30232b;

    resize: vertical;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.partner-textarea:focus {
    border-color: #ff70a8;

    box-shadow:
        0 0 0 4px
        rgba(255, 91, 157, 0.1);
}


/* =========================================
   광고비 충전 영역
========================================= */

.ad-budget-section {
    margin-top: 25px;
    padding: 18px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #fff8fb,
            #fff0f6
        );

    border: 1px solid #f1dce6;
}


/* 광고비 제목 */

.ad-budget-header {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ad-budget-header > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ad-budget-header strong {
    font-size: 15px;
    font-weight: 1000;

    color: #382933;
}

.ad-budget-header small {
    padding: 5px 8px;

    border-radius: 999px;

    background: #ffe3ee;

    color: #df3a7b;

    font-size: 9px;
    font-weight: 900;
}

.ad-budget-header > span {
    color: #8b7984;

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================
   광고비 선택 버튼
========================================= */

.budget-buttons {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;
}

.budget-button {
    padding: 13px 10px;

    border-radius: 13px;

    background: #ffffff;

    border: 1px solid #eadce3;

    color: #65545e;

    cursor: pointer;

    font-size: 12px;
    font-weight: 900;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.budget-button:hover {
    transform: translateY(-1px);

    border-color: #ff9fc1;
}

.budget-button.active {
    background:
        linear-gradient(
            135deg,
            #ff67a3,
            #f33d82
        );

    border-color: transparent;

    color: #ffffff;

    box-shadow:
        0 8px 20px
        rgba(242, 61, 130, 0.2);
}

.budget-button.custom {
    grid-column:
        1 / -1;
}


/* =========================================
   직접 입력
========================================= */

.custom-budget-wrap {
    margin-top: 13px;
    padding: 14px;

    border-radius: 15px;

    background: #ffffff;

    border: 1px dashed #efb4cc;
}

.custom-budget-wrap label {
    margin-top: 0;
}

.custom-budget-wrap > small {
    display: block;

    margin-top: 8px;

    color: #a06f82;

    font-size: 9px;
    line-height: 1.5;
}


/* =========================================
   선택 광고비 표시
========================================= */

.selected-budget-card {
    margin-top: 14px;
    padding: 14px 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-radius: 15px;

    background: #352832;

    color: #ffffff;
}

.selected-budget-card span {
    font-size: 10px;

    opacity: 0.75;
}

.selected-budget-card strong {
    font-size: 18px;
    font-weight: 1000;

    color: #ff91bc;
}


/* =========================================
   연습 1원 / 도전 100원 설명
========================================= */

.billing-summary {
    margin-top: 14px;
    padding: 15px;

    border-radius: 18px;

    background: #faf6f8;

    border: 1px solid #eee4e9;
}

.billing-summary > div {
    padding: 8px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid #eee5e9;
}

.billing-summary > div:nth-child(2) {
    border-bottom: none;
}

.billing-summary span {
    font-size: 11px;
    font-weight: 800;

    color: #675761;
}

.billing-summary strong {
    font-size: 12px;
    font-weight: 1000;

    color: #e43d7e;
}

.billing-summary > small {
    display: block;

    margin-top: 10px;

    color: #9a8993;

    font-size: 9px;
    line-height: 1.5;
}


/* =========================================
   결제창 과금 안내
========================================= */

.payment-billing-notice {
    margin-top: 12px;
    padding: 13px 15px;

    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    border-radius: 15px;

    background: #fff3f7;
}

.payment-billing-notice > div {
    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 11px;

    background: #ffffff;
}

.payment-billing-notice span {
    font-size: 10px;
    font-weight: 800;

    color: #796873;
}

.payment-billing-notice strong {
    font-size: 13px;
    font-weight: 1000;

    color: #e43b7c;
}


/* =========================================
   검수 카드
========================================= */

.review-card {
    width: min(470px, 100%);

    text-align: center;

    overflow: hidden;
}

.review-status-view {
    width: 100%;
}


/* =========================================
   검수중 선물 + 돋보기
========================================= */

.review-animation {
    width: 115px;
    height: 95px;

    margin:
        5px auto 18px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.review-gift {
    font-size: 57px;

    animation:
        reviewGiftMove
        1.8s ease-in-out
        infinite;
}

.review-search {
    position: absolute;

    right: 4px;
    bottom: 2px;

    font-size: 32px;

    animation:
        reviewSearchMove
        1.4s ease-in-out
        infinite;
}

@keyframes reviewGiftMove {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(2deg);
    }

}

@keyframes reviewSearchMove {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(-8deg);
    }

    50% {
        transform:
            translate(-8px, -7px)
            rotate(5deg);
    }

}


/* =========================================
   검수 상태 배지
========================================= */

.review-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 1000;

    letter-spacing: 0.1em;
}

.review-status-badge.pending {
    background: #fff0c7;

    color: #b27a10;
}

.review-status-badge.approved {
    background: #dff8e8;

    color: #229653;
}

.review-card h2 {
    margin-top: 15px;

    font-size: 28px;
    line-height: 1.22;

    letter-spacing: -0.05em;
}


/* =========================================
   검수 진행 단계
========================================= */

.review-progress {
    margin:
        24px auto;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
}

.review-step {
    width: 80px;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #b1a5ac;
}

.review-step span {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eee8eb;

    font-size: 11px;
    font-weight: 1000;
}

.review-step strong {
    margin-top: 7px;

    font-size: 9px;
    font-weight: 900;

    white-space: nowrap;
}

.review-step.active {
    color: #d99123;
}

.review-step.active span {
    background: #fff0c8;

    color: #b47916;

    box-shadow:
        0 0 0 5px
        rgba(255, 213, 111, 0.17);
}

.review-step.complete {
    color: #29935a;
}

.review-step.complete span {
    background: #def7e7;

    color: #20884e;
}

.review-line {
    flex: 1;

    height: 3px;

    margin-top: 14px;

    border-radius: 999px;

    background: #eee8eb;
}

.review-line.active {
    background:
        linear-gradient(
            90deg,
            #7cdca4,
            #ffd56f
        );
}

.review-line.complete {
    background: #77d89f;
}


/* =========================================
   승인 완료 캡슐 애니메이션
========================================= */

.approved-capsule-animation {
    width: 140px;
    height: 120px;

    margin:
        0 auto 10px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* 뒤쪽 가챠통 느낌 */

.approved-capsule-animation::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 7px;

    height: 44px;

    border-radius:
        15px 15px 22px 22px;

    background:
        linear-gradient(
            #ffb7d2,
            #ff6fa7
        );

    opacity: 0.6;
}

.approved-capsule {
    position: relative;
    z-index: 2;

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 4px solid #ffffff;

    background:
        linear-gradient(
            180deg,
            #ffffff 0 48%,
            #ff68a2 49% 100%
        );

    box-shadow:
        0 9px 22px
        rgba(211, 53, 113, 0.28);

    font-size: 29px;

    animation:
        approvedCapsuleDrop
        1.5s cubic-bezier(
            0.34,
            1.56,
            0.64,
            1
        )
        infinite;
}

@keyframes approvedCapsuleDrop {

    0% {
        transform:
            translateY(-75px)
            rotate(-15deg);

        opacity: 0;
    }

    45% {
        opacity: 1;
    }

    70% {
        transform:
            translateY(15px)
            rotate(8deg);
    }

    85% {
        transform:
            translateY(4px)
            rotate(-3deg);
    }

    100% {
        transform:
            translateY(10px)
            rotate(0deg);

        opacity: 1;
    }

}


/* =========================================
   파트너십 신청 화면 간격
========================================= */

#advertiserFormView {
    padding-bottom: 4px;
}

#advertiserFormView
.partner-start-button {
    margin-top: 18px;
}


/* =========================================
   승인 상태에서는 버튼 강조
========================================= */

#reviewApprovedView
.partner-start-button {
    margin-top: 8px;

    background:
        linear-gradient(
            135deg,
            #ff5b9d,
            #f33e82
        );

    box-shadow:
        0 10px 25px
        rgba(243, 62, 130, 0.2);
}


/* =========================================
   모바일
========================================= */

@media (max-width: 600px) {

    .ad-budget-section {
        padding: 15px;
    }

    .budget-buttons {
        grid-template-columns:
            1fr 1fr;
    }

    .selected-budget-card strong {
        font-size: 16px;
    }

    .payment-billing-notice {
        grid-template-columns:
            1fr;
    }

    .review-card {
        padding:
            28px 20px;
    }

    .review-card h2 {
        font-size: 25px;
    }

    .review-step {
        width: 65px;
    }

    .review-step strong {
        font-size: 8px;
    }

    .review-line {
        min-width: 16px;
    }

}

/* =========================================
   광고주 조회 버튼
========================================= */

.advertiser-login-button {

    align-self: flex-end;

    margin-top: 8px;

    padding:
        8px 13px;

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            .6
        );

    border:
        1px solid
        rgba(
            255,
            91,
            157,
            .18
        );

    color: #8a7180;

    text-decoration: none;

    font-size: 10px;
    font-weight: 900;

    transition:
        .2s;

}


.advertiser-login-button:hover {

    transform:
        translateY(-1px);

    background: white;

    color: #e23c7d;

}


body.challenge-active
.advertiser-login-button {

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .14
        );

    color: #e8cbd8;

}


@media(
    max-width: 650px
) {

    .advertiser-login-button {

        align-self:
            center;

    }

}

/* =========================================
   GIFTCHA GAME UI POLISH
   갈고리 캡슐 / 도전 연출 / 모바일 보정
========================================= */


/* =========================================
   집게 닫힘

   app.js에서 사용하는
   claw-close 클래스와 연결
========================================= */

.claw.claw-close .arm-left {
    transform:
        rotate(10deg);
}

.claw.claw-close .arm-right {
    transform:
        rotate(-10deg);
}


/* =========================================
   갈고리에 잡힌 캡슐
========================================= */

.claw-caught-capsule {
    position: absolute;

    z-index: 14;

    top: 148px;
    left: 50%;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 4px solid
        rgba(
            255,
            255,
            255,
            0.96
        );

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #ffffff 0 47%,
            #ff77ad 48% 100%
        );

    box-shadow:
        0 10px 20px
        rgba(
            92,
            35,
            65,
            0.28
        ),
        0 0 15px
        rgba(
            255,
            96,
            158,
            0.2
        ),
        inset 0 2px 0
        rgba(
            255,
            255,
            255,
            0.85
        );

    transform:
        translateX(-50%);

    transform-origin:
        50% -28px;

    pointer-events: none;

    animation:
        caughtCapsuleGrab
        0.32s
        cubic-bezier(
            0.34,
            1.56,
            0.64,
            1
        )
        both;
}


/*
   집게와 캡슐 사이
   아주 짧은 연결 부분
*/

.claw-caught-capsule::before {
    content: "";

    position: absolute;

    top: -11px;
    left: 50%;

    width: 3px;
    height: 12px;

    border-radius: 999px;

    background:
        linear-gradient(
            #d9d0d8,
            #ffffff
        );

    transform:
        translateX(-50%);
}


/* 캡슐 안 상품 아이콘 */

.claw-caught-capsule-inner {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;

    filter:
        drop-shadow(
            0 2px 2px
            rgba(
                0,
                0,
                0,
                0.08
            )
        );

    user-select: none;
}


/* 처음 잡히는 순간 */

@keyframes caughtCapsuleGrab {

    0% {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(12px)
            scale(0.72);
    }

    70% {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(-3px)
            scale(1.06);
    }

    100% {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }

}


/* =========================================
   캡슐 들고 올라갈 때 흔들림
========================================= */

.claw.claw-up
.claw-caught-capsule {
    animation:
        caughtCapsuleSwing
        0.72s
        ease-in-out
        infinite;
}


@keyframes caughtCapsuleSwing {

    0%,
    100% {
        transform:
            translateX(-50%)
            rotate(-5deg);
    }

    50% {
        transform:
            translateX(-50%)
            rotate(5deg);
    }

}


/* =========================================
   도전모드 캡슐
========================================= */

body.challenge-active
.claw-caught-capsule {
    background:
        linear-gradient(
            180deg,
            #fff8fb 0 47%,
            #ff315f 48% 100%
        );

    box-shadow:
        0 11px 24px
        rgba(
            20,
            5,
            18,
            0.4
        ),
        0 0 24px
        rgba(
            255,
            57,
            107,
            0.58
        ),
        inset 0 2px 0
        rgba(
            255,
            255,
            255,
            0.9
        );
}


body.challenge-active
.claw.claw-up
.claw-caught-capsule {
    animation:
        caughtCapsuleChallengeSwing
        0.55s
        ease-in-out
        infinite;
}


@keyframes caughtCapsuleChallengeSwing {

    0%,
    100% {
        transform:
            translateX(-50%)
            rotate(-7deg)
            scale(1);
    }

    50% {
        transform:
            translateX(-50%)
            rotate(7deg)
            scale(1.03);
    }

}


/* =========================================
   도전모드 - 기계 에너지 강화
========================================= */

body.challenge-active
.claw-machine {
    animation:
        challengeMachineEnergy
        1.6s
        ease-in-out
        infinite;

    box-shadow:
        0 35px 95px
        rgba(
            255,
            27,
            91,
            0.34
        ),
        0 0 65px
        rgba(
            255,
            52,
            115,
            0.23
        ),
        inset 0 2px 0
        rgba(
            255,
            255,
            255,
            0.24
        );
}


@keyframes challengeMachineEnergy {

    0%,
    100% {
        filter:
            brightness(1);
    }

    50% {
        filter:
            brightness(1.11)
            saturate(1.08);
    }

}


/* 기계 제목 네온 */

body.challenge-active
.machine-title {
    text-shadow:
        0 0 8px
        rgba(
            255,
            255,
            255,
            0.3
        ),
        0 0 18px
        rgba(
            255,
            76,
            126,
            0.65
        );
}


/* 위쪽 작은 장식 점멸 */

body.challenge-active
.machine-decoration {
    color: #ffd6e1;

    opacity: 1;

    animation:
        challengeDecorationBlink
        0.9s
        ease-in-out
        infinite alternate;
}


@keyframes challengeDecorationBlink {

    from {
        opacity: 0.45;
    }

    to {
        opacity: 1;

        text-shadow:
            0 0 10px
            rgba(
                255,
                164,
                192,
                0.9
            );
    }

}


/* =========================================
   도전모드 유리 스캔 조명
========================================= */

.glass::after {
    content: "";

    position: absolute;

    z-index: 1;

    top: -45%;
    left: -10%;

    width: 120%;
    height: 42%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(
                255,
                118,
                160,
                0.1
            ),
            rgba(
                255,
                215,
                229,
                0.22
            ),
            transparent
        );

    transform:
        translateY(-120%);

    pointer-events: none;

    opacity: 0;
}


body.challenge-active
.glass::after {
    opacity: 1;

    animation:
        challengeGlassSweep
        2.3s
        linear
        infinite;
}


@keyframes challengeGlassSweep {

    from {
        transform:
            translateY(-120%);
    }

    to {
        transform:
            translateY(410%);
    }

}


/* =========================================
   도전 버튼 펄스
========================================= */

body.challenge-active
.drop-button {
    animation:
        challengeDropButtonPulse
        1.15s
        ease-in-out
        infinite;
}


@keyframes challengeDropButtonPulse {

    0%,
    100% {
        box-shadow:
            0 9px 0 #711333,
            0 0 25px
            rgba(
                255,
                51,
                105,
                0.25
            );
    }

    50% {
        box-shadow:
            0 9px 0 #711333,
            0 0 46px
            rgba(
                255,
                64,
                118,
                0.62
            );

        filter:
            brightness(1.08);
    }

}


/* =========================================
   오늘의 특별선물 카드 강조
========================================= */

body.challenge-active
.daily-gift {
    box-shadow:
        0 12px 38px
        rgba(
            255,
            51,
            105,
            0.2
        ),
        0 0 22px
        rgba(
            255,
            74,
            129,
            0.12
        );

    animation:
        challengeGiftCardPulse
        1.8s
        ease-in-out
        infinite;
}


@keyframes challengeGiftCardPulse {

    0%,
    100% {
        border-color:
            rgba(
                255,
                125,
                155,
                0.35
            );
    }

    50% {
        border-color:
            rgba(
                255,
                174,
                196,
                0.76
            );
    }

}


/* =========================================
   모바일 게임 UI 보정
========================================= */

@media (max-width: 650px) {

    body {
        overflow-x: hidden;
    }


    .main {
        width: 100%;

        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 55px;
    }


    .claw-machine {
        width: 96vw;

        border-radius:
            28px 28px
            38px 38px;
    }


    .machine-top {
        height: 66px;

        padding:
            0 16px;
    }


    .machine-title {
        font-size: 22px;
    }


    .machine-decoration {
        letter-spacing: 3px;
    }


    .glass {
        width:
            calc(
                100% - 20px
            );

        border-width: 3px;

        border-radius: 20px;
    }


    .screen {
        width: 88%;

        margin-bottom: 17px;
    }


    .controls {
        gap: 12px;
    }


    .guide {
        justify-content: center;

        flex-wrap: wrap;

        row-gap: 8px;
    }


    /*
       모바일 모달이 화면보다
       길어져도 스크롤 가능
    */

    .overlay {
        padding: 12px;

        overflow-y: auto;
    }


    .result-card,
    .modal-card {
        max-height:
            calc(
                100dvh - 24px
            );

        margin:
            auto 0;

        overflow-y: auto;

        border-radius: 24px;
    }


    .mode-info {
        align-items:
            flex-start;
    }


    .daily-gift {
        padding:
            13px 14px;

        gap: 10px;
    }


    .daily-gift-icon {
        font-size: 27px;
    }


    .claw-caught-capsule {
        width: 54px;
        height: 54px;

        top: 148px;
    }


    .claw-caught-capsule-inner {
        font-size: 23px;
    }

}


/* 더 작은 휴대폰 */

@media (max-width: 410px) {

    .machine-title {
        font-size: 20px;
    }


    .controls {
        gap: 9px;
    }


    .arrow-button {
        width: 54px;
        height: 54px;

        font-size: 22px;
    }


    .drop-button {
        width: 78px;
        height: 78px;
    }


    .claw-caught-capsule {
        width: 50px;
        height: 50px;

        top: 145px;
    }


    .claw-caught-capsule-inner {
        font-size: 21px;
    }


    .daily-gift-text strong {
        font-size: 12px;
    }

}


/* =========================================
   움직임 최소화 설정 사용자
========================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    body.challenge-active
    .claw-machine,

    body.challenge-active
    .machine-decoration,

    body.challenge-active
    .drop-button,

    body.challenge-active
    .daily-gift,

    body.challenge-active
    .glass::after,

    .claw.claw-up
    .claw-caught-capsule {

        animation: none;

    }

}

/* =========================================
   GIFTCHA RESULT REVEAL
   일반 광고상품 결과 업그레이드
========================================= */


/* 결과 배경 */

#result {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255, 103, 165, 0.22),
            transparent 38%
        ),
        rgba(30, 15, 26, 0.68);

    backdrop-filter:
        blur(12px);
}


/* =========================================
   결과 카드
========================================= */

#result .result-card {
    width:
        min(
            92vw,
            455px
        );

    position: relative;

    overflow: hidden;

    padding:
        36px 30px 30px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.85
        );

    border-radius:
        32px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(
                255,
                205,
                226,
                0.36
            ),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #fff8fb
        );

    box-shadow:
        0 35px 100px
        rgba(
            34,
            10,
            27,
            0.42
        ),
        0 0 35px
        rgba(
            255,
            87,
            152,
            0.16
        );
}


/*
   카드 위쪽 빛
*/

#result .result-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 48%;
    height: 100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.48
            ),
            transparent
        );

    transform:
        skewX(-16deg);

    pointer-events: none;

    animation:
        resultCardShine
        2.8s
        ease-in-out
        infinite;
}


@keyframes resultCardShine {

    0%,
    42% {
        left:
            -70%;
    }

    70%,
    100% {
        left:
            135%;
    }

}


/* =========================================
   모드 배지
========================================= */

#result .result-mode-badge {
    position: relative;
    z-index: 2;

    padding:
        7px 11px;

    border-radius:
        999px;

    background:
        #ffe5ef;

    color:
        #db3777;

    box-shadow:
        0 5px 15px
        rgba(
            218,
            55,
            119,
            0.1
        );
}


/* =========================================
   상단 별
========================================= */

#result .result-confetti {
    margin-top:
        18px;

    font-size:
        20px;

    letter-spacing:
        5px;

    animation:
        resultStarsPulse
        1.15s
        ease-in-out
        infinite alternate;
}


@keyframes resultStarsPulse {

    from {
        opacity:
            0.5;

        transform:
            scale(0.94);
    }

    to {
        opacity:
            1;

        transform:
            scale(1.06);
    }

}


/* =========================================
   YOU GOT IT / CHALLENGE HIT
========================================= */

#result .result-title {
    margin-top:
        8px;

    font-size:
        clamp(
            29px,
            7vw,
            36px
        );

    font-weight:
        1000;

    line-height:
        1;

    letter-spacing:
        -0.055em;

    color:
        #35262e;

    text-shadow:
        0 6px 22px
        rgba(
            255,
            70,
            140,
            0.12
        );
}


/* =========================================
   상품 아이콘을 주인공으로
========================================= */

#result .result-icon {
    width:
        122px;

    height:
        122px;

    margin:
        24px auto 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    border:
        3px solid
        rgba(
            255,
            255,
            255,
            0.95
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 38% 30%,
            #ffffff,
            #ffe8f2 54%,
            #ffc1da 100%
        );

    box-shadow:
        0 16px 35px
        rgba(
            207,
            61,
            120,
            0.2
        ),
        0 0 28px
        rgba(
            255,
            108,
            165,
            0.17
        );

    font-size:
        66px;
}


/* 아이콘 주변 반짝임 */

#result .result-icon::before {
    content:
        "✦";

    position:
        absolute;

    top:
        -13px;

    right:
        1px;

    color:
        #ffbf33;

    font-size:
        21px;

    animation:
        resultSparkle
        0.9s
        ease-in-out
        infinite alternate;
}


#result .result-icon::after {
    content:
        "✦";

    position:
        absolute;

    bottom:
        1px;

    left:
        -6px;

    color:
        #ff5f9c;

    font-size:
        16px;

    animation:
        resultSparkle
        1.1s
        ease-in-out
        infinite alternate-reverse;
}


@keyframes resultSparkle {

    from {
        opacity:
            0.35;

        transform:
            rotate(0deg)
            scale(0.75);
    }

    to {
        opacity:
            1;

        transform:
            rotate(25deg)
            scale(1.2);
    }

}


/* =========================================
   브랜드 / 상품명
========================================= */

#result .result-brand {
    display:
        inline-block;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        #fff0f6;

    color:
        #df3678;

    font-size:
        10px;

    font-weight:
        1000;

    letter-spacing:
        0.12em;
}


#result .result-card h2 {
    margin-top:
        10px;

    color:
        #362a30;

    font-size:
        25px;

    line-height:
        1.25;

    letter-spacing:
        -0.04em;
}


/* =========================================
   가격
========================================= */

#result .price-card {
    margin-top:
        23px;

    padding:
        16px 17px;

    border:
        1px solid
        #f2dce5;

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            #fff7fa,
            #fff0f6
        );
}


#result .price-card strong {
    font-size:
        20px;

    font-weight:
        1000;
}


/* =========================================
   상품 보러가기
========================================= */

#result .price-link {
    min-height:
        52px;

    margin-top:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #ff67a1,
            #ed397c
        );

    box-shadow:
        0 10px 24px
        rgba(
            231,
            55,
            120,
            0.24
        );

    transition:
        transform
        0.16s ease,
        box-shadow
        0.16s ease;
}


#result .price-link:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 13px 28px
        rgba(
            231,
            55,
            120,
            0.31
        );
}


/* 다시 뽑기 */

#result .retry-button {
    min-height:
        46px;

    margin-top:
        10px;

    border-radius:
        15px;

    transition:
        transform
        0.15s ease,
        background
        0.15s ease;
}


#result .retry-button:hover {
    transform:
        translateY(-1px);

    background:
        #e9dfe5;
}


/* =========================================
   도전 결과는 완전히 다른 분위기
========================================= */

body.challenge-active
#result {
    background:
        radial-gradient(
            circle at 50% 33%,
            rgba(
                255,
                45,
                101,
                0.32
            ),
            transparent 40%
        ),
        rgba(
            13,
            3,
            13,
            0.8
        );
}


body.challenge-active
#result .result-card {
    border:
        2px solid
        rgba(
            255,
            113,
            153,
            0.58
        );

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(
                255,
                80,
                130,
                0.18
            ),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #fffefe,
            #fff5f8
        );

    box-shadow:
        0 35px 110px
        rgba(
            0,
            0,
            0,
            0.58
        ),
        0 0 55px
        rgba(
            255,
            43,
            105,
            0.34
        );
}


body.challenge-active
#result .result-mode-badge {
    background:
        linear-gradient(
            135deg,
            #ff3e70,
            #a71f68
        );

    color:
        #ffffff;

    box-shadow:
        0 7px 20px
        rgba(
            255,
            44,
            103,
            0.3
        );
}


body.challenge-active
#result .result-title {
    color:
        #e72c6b;

    text-shadow:
        0 0 25px
        rgba(
            255,
            45,
            105,
            0.2
        );
}


body.challenge-active
#result .result-icon {
    background:
        radial-gradient(
            circle at 38% 28%,
            #ffffff,
            #ffe2ea 45%,
            #ff7398 100%
        );

    box-shadow:
        0 17px 38px
        rgba(
            150,
            27,
            72,
            0.28
        ),
        0 0 35px
        rgba(
            255,
            52,
            108,
            0.3
        );

    animation:
        challengeResultIconPulse
        1.45s
        ease-in-out
        infinite;
}


@keyframes challengeResultIconPulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.035);
    }

}


body.challenge-active
#result .price-link {
    background:
        linear-gradient(
            135deg,
            #ff3f70,
            #c92169
        );

    box-shadow:
        0 11px 28px
        rgba(
            214,
            30,
            92,
            0.31
        );
}


/* =========================================
   모바일
========================================= */

@media (
    max-width: 600px
) {

    #result {
        padding:
            12px;
    }


    #result .result-card {
        width:
            100%;

        max-height:
            calc(
                100dvh - 24px
            );

        padding:
            29px 20px 21px;

        overflow-y:
            auto;

        border-radius:
            25px;
    }


    #result .result-title {
        font-size:
            29px;
    }


    #result .result-icon {
        width:
            104px;

        height:
            104px;

        margin:
            20px auto 14px;

        font-size:
            57px;
    }


    #result .result-card h2 {
        font-size:
            22px;
    }


    #result .price-card {
        margin-top:
            18px;
    }

}


/* =========================================
   움직임 최소화
========================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    #result .result-card::before,

    #result .result-confetti,

    #result .result-icon::before,

    #result .result-icon::after,

    body.challenge-active
    #result .result-icon {

        animation:
            none;

    }

}

/* =========================================
   GIFTCHA MOBILE FINAL LAYOUT
========================================= */


/* 새 광고주 영역 구조 */

.brand-entry {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 7px;
}


/* 기존 버튼이 wrapper 안에서도 정상 폭 유지 */

.brand-entry .brand-button {
    align-self: flex-end;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    /* 전체 위아래 공간 절약 */

    .main {
        width: 100%;

        padding:
            12px 7px
            48px;
    }


    /* =====================================
       광고주 CTA
    ===================================== */

    .brand-entry {
        width: 94%;

        align-items: center;

        gap: 5px;
    }


    .brand-entry .brand-button {
        width: 100%;

        min-height: 54px;

        align-self: center;

        padding:
            10px 13px;

        justify-content:
            space-between;

        gap: 10px;

        border-radius: 20px;
    }


    .brand-entry .brand-button span {
        flex: 1;

        min-width: 0;

        font-size: 11px;
        line-height: 1.35;

        text-align: left;
    }


    .brand-entry .brand-button small {
        flex-shrink: 0;

        max-width: 120px;

        font-size: 9px;
        line-height: 1.25;

        text-align: right;
    }


    .brand-entry .advertiser-login-button {
        align-self: flex-end;

        margin:
            0 7px 0 0;

        padding:
            5px 8px;

        background:
            transparent;

        border: 0;

        font-size: 9px;

        box-shadow: none;
    }


    /* =====================================
       로고
    ===================================== */

    .logo {
        margin-top: 18px;

        font-size:
            clamp(
                48px,
                14vw,
                61px
            );
    }


    .subtitle {
        margin-top: 9px;

        font-size: 14px;
    }


    /* =====================================
       모드 선택
    ===================================== */

    .mode-selector {
        width: 94%;

        margin-top: 21px;

        padding: 5px;

        border-radius: 21px;
    }


    .mode-button {
        min-height: 64px;

        padding:
            9px 8px;

        gap: 10px;

        border-radius: 17px;
    }


    .mode-icon {
        font-size: 21px;
    }


    .mode-text strong {
        font-size: 14px;
    }


    .mode-text small {
        margin-top: 2px;

        font-size: 9px;
    }


    /* =====================================
       현재 모드 카드
    ===================================== */

    .mode-info {
        width: 94%;

        min-height: 68px;

        margin-top: 9px;

        padding:
            11px 13px;

        border-radius: 18px;

        align-items: center;
    }


    .mode-info-left {
        gap: 9px;
    }


    .mode-info-left strong {
        font-size: 13px;
    }


    .mode-info-left small {
        font-size: 10px;
    }


    .mode-badge {
        padding:
            6px 7px;

        font-size: 8px;
    }


    .challenge-counter {
        padding:
            6px 8px;

        font-size: 9px;
    }


    .challenge-counter strong {
        font-size: 15px;
    }


    /* =====================================
       오늘의 선물
    ===================================== */

    .daily-gift {
        width: 94%;

        margin-top: 9px;

        padding:
            11px 12px;

        border-radius: 18px;
    }


    .daily-gift-icon {
        font-size: 25px;
    }


    .daily-gift-text strong {
        font-size: 12px;
        line-height: 1.35;
    }


    .daily-gift-status {
        padding:
            6px 8px;

        font-size: 8px;
    }


    /* =====================================
       게임을 조금 더 위로
    ===================================== */

    .game {
        margin-top: 18px;
    }


    .claw-machine {
        width:
            calc(
                100vw - 12px
            );

        max-width: 560px;

        border-radius:
            28px 28px
            38px 38px;
    }


    .machine-top {
        height: 62px;

        padding:
            0 15px;
    }


    .machine-title {
        font-size: 22px;
    }


    .glass {
        width:
            calc(
                100% - 18px
            );

        height: 425px;

        border-radius: 20px;
    }


    /* 캡슐이 너무 꽉 차 보이지 않게 */

    .prizes {
        left: 12px;
        right: 12px;

        bottom: 67px;

        height: 190px;

        gap:
            4px 2px;
    }


    .prize,
    .capsule,
    .gift-capsule {
        width: 54px;
        height: 54px;

        flex-basis: 54px;

        font-size: 22px;
    }


    .claw.claw-drop,
    body.challenge-active
    .claw.claw-drop {
        top: 202px;
    }


    /* =====================================
       조작부
    ===================================== */

    .control-panel {
        padding:
            17px 14px
            23px;
    }


    .screen {
        width: 86%;

        height: 34px;

        margin-bottom: 15px;

        font-size: 10px;
    }


    .controls {
        gap: 11px;
    }


    .arrow-button {
        width: 56px;
        height: 56px;
    }


    .drop-button {
        width: 80px;
        height: 80px;
    }


    .guide {
        margin-top: 13px;

        gap: 12px;

        font-size: 9px;
    }

}


/* =========================================
   아주 작은 휴대폰
========================================= */

@media (max-width: 410px) {

    .brand-entry .brand-button small {
        max-width: 105px;

        font-size: 8px;
    }


    .logo {
        font-size: 52px;
    }


    .mode-selector {
        margin-top: 19px;
    }


    .glass {
        height: 405px;
    }


    .prizes {
        height: 176px;
    }


    .prize,
    .capsule,
    .gift-capsule {
        width: 51px;
        height: 51px;

        flex-basis: 51px;

        font-size: 21px;
    }


    .claw.claw-drop,
    body.challenge-active
    .claw.claw-drop {
        top: 185px;
    }

}

/* =========================================
   MOBILE FINAL SPACING POLISH
========================================= */

@media (max-width: 650px) {

    .brand-entry {
        gap: 2px;
    }


    .brand-entry .advertiser-login-button {
        margin-right: 8px;
        margin-bottom: -4px;
    }


    .logo {
        margin-top: 10px;
    }


    .subtitle {
        margin-top: 6px;
    }


    .mode-selector {
        margin-top: 16px;
    }


    .mode-button {
        min-height: 60px;
    }


    .mode-info {
        min-height: 62px;

        padding:
            9px 12px;
    }


    .game {
        margin-top: 14px;
    }

}

/* =========================================
   MOBILE TOUCH CONTROL
   모바일 갈고리 드래그 조작
========================================= */

@media (max-width: 650px) {

    /*
       유리창에서는
       세로 스크롤은 허용하고
       좌우 움직임은 갈고리 조작에 사용
    */

    .glass {
        touch-action: pan-y;

        -webkit-user-select: none;
        user-select: none;

        -webkit-touch-callout: none;

        -webkit-tap-highlight-color:
            transparent;
    }


    /*
       가챠 기계 안 글자 / 장식이
       길게 눌러져 선택되는 현상 방지
    */

    .claw-machine,
    .machine-top,
    .rail,
    .claw,
    .prizes,
    .machine-floor,
    .prize-hole,
    .control-panel,
    .screen,
    .controls {

        -webkit-user-select: none;
        user-select: none;

        -webkit-touch-callout: none;
    }


    /*
       조작 버튼은 모바일 탭에 최적화
    */

    .arrow-button,
    .drop-button {

        touch-action: manipulation;

        -webkit-user-select: none;
        user-select: none;

        -webkit-touch-callout: none;

        -webkit-tap-highlight-color:
            transparent;
    }


    /*
       모바일에서 버튼을 빠르게 눌러도
       브라우저 확대 제스처가 끼어들지 않도록
    */

    .controls button {
        touch-action: manipulation;
    }


    /*
       유리창을 움직일 수 있다는 느낌
    */

    .glass {
        cursor: grab;
    }


    .glass:active {
        cursor: grabbing;
    }

}