/* ============================================================
 * 체험P 히어로 — 메인 최상단 온보딩 섹션
 * 톤: 기존 1분빙고 사이버틱 네온 (다크 + 시안/보라 글로우)
 * 변수는 :root에 — 내일 테더 입출금 섹션과 톤 일치시키기 위함
 * ============================================================ */
:root {
    --dc-bg-0: #05080f;
    --dc-bg-1: #0a1120;
    --dc-bg-2: #0f1830;
    --dc-line: #1c2744;
    --dc-ink-0: #ffffff;
    --dc-ink-1: #c5d0e6;
    --dc-ink-2: #7a87a7;
    --dc-cyan: #00f5ff;
    --dc-violet: #a855f7;
    --dc-emerald: #10b981;
    --dc-gold: #ffcc33;
    --dc-red: #ff4577;
}

.dc-hero {
    position: relative;
    margin: 12px 0 0px;
    padding: 28px 32px;
    border-radius: 18px;
    background:
        radial-gradient(1200px 300px at 10% 0%, rgba(168, 85, 247, .18), transparent 60%),
        radial-gradient(1000px 280px at 100% 100%, rgba(0, 245, 255, .14), transparent 60%),
        linear-gradient(180deg, #0a1120 0%, #060913 100%);
    border: 1px solid var(--dc-line);
    overflow: hidden;
    isolation: isolate;
}

.dc-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.dc-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    animation: dcFloat 10s ease-in-out infinite;
}
.dc-orb-1 { width: 340px; height: 340px; top: -90px; left: -60px;
    background: radial-gradient(circle, rgba(168, 85, 247, .9), transparent 70%); }
.dc-orb-2 { width: 280px; height: 280px; bottom: -100px; right: 10%;
    background: radial-gradient(circle, rgba(0, 245, 255, .8), transparent 70%); animation-delay: -3s; }
.dc-orb-3 { width: 220px; height: 220px; top: 40%; right: -80px;
    background: radial-gradient(circle, rgba(16, 185, 129, .7), transparent 70%); animation-delay: -6s; }
@keyframes dcFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(20px, -20px); }
}

.dc-hero-inner {
    position: relative;
    z-index: 1;
}

.dc-panel {
    display: grid;
    grid-template-columns: 1.3fr .9fr;
    gap: 28px;
    align-items: center;
    min-height: 220px;
}

.dc-left { display: flex; flex-direction: column; gap: 12px; }

.dc-tag {
    display: inline-block;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(168, 85, 247, .14);
    border: 1px solid rgba(168, 85, 247, .4);
    color: var(--dc-violet);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.dc-tag-warn {
    background: rgba(255, 69, 119, .12);
    border-color: rgba(255, 69, 119, .4);
    color: var(--dc-red);
}

.dc-headline {
    margin: 0;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 900;
    color: var(--dc-ink-0);
    letter-spacing: -.02em;
}
.dc-neon {
    background: linear-gradient(90deg, var(--dc-cyan), var(--dc-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px rgba(168, 85, 247, .4);
}
.dc-neon-warn {
    background: linear-gradient(90deg, var(--dc-gold), var(--dc-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dc-sub {
    margin: 0;
    color: var(--dc-ink-1);
    font-size: 14px;
    line-height: 1.6;
}
.dc-sub b { color: var(--dc-cyan); font-weight: 700; }

.dc-cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.dc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    font-family: inherit;
}
.dc-cta-primary {
    background: linear-gradient(135deg, var(--dc-cyan), var(--dc-violet));
    color: #0a1120;
    box-shadow: 0 8px 24px rgba(168, 85, 247, .35), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.dc-cta-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.dc-cta-warn {
    background: linear-gradient(135deg, var(--dc-gold), var(--dc-red));
    color: #140a14;
}
.dc-cta-ghost {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--dc-line);
    color: var(--dc-ink-1);
}
.dc-cta-ghost:hover { background: rgba(255, 255, 255, .08); color: var(--dc-ink-0); }
.dc-arr { font-style: normal; font-size: 18px; font-weight: 900; }

/* ===== 미션 그리드 (fresh) ===== */
.dc-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    margin-top: 10px;
}
.dc-mission {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--dc-line);
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    text-align: left;
    color: var(--dc-ink-0);
}
.dc-mission:hover { background: rgba(0, 245, 255, .06); border-color: rgba(0, 245, 255, .35); }
.dc-mission.dc-done { opacity: .55; cursor: default; }
.dc-mission.dc-done::after {
    content: '✓';
    position: absolute;
}
.dc-mission.dc-featured {
    background: linear-gradient(135deg, rgba(0, 245, 255, .14), rgba(168, 85, 247, .14));
    border-color: rgba(0, 245, 255, .5);
    box-shadow: 0 0 0 1px rgba(0, 245, 255, .25), 0 10px 28px rgba(0, 245, 255, .12);
    animation: dcPulse 2.2s ease-in-out infinite;
}
@keyframes dcPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0, 245, 255, .25), 0 10px 28px rgba(0, 245, 255, .12); }
    50%      { box-shadow: 0 0 0 2px rgba(0, 245, 255, .5),  0 12px 32px rgba(0, 245, 255, .24); }
}
.dc-m-no {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(168, 85, 247, .18);
    color: var(--dc-violet);
    font-weight: 900;
    font-size: 12px;
}
.dc-mission.dc-featured .dc-m-no { background: rgba(0, 245, 255, .22); color: var(--dc-cyan); }
.dc-m-txt { display: flex; flex-direction: column; gap: 2px; }
.dc-m-txt b { font-size: 14px; color: var(--dc-ink-0); font-weight: 800; }
.dc-m-txt small { font-size: 11px; color: var(--dc-ink-2); }
.dc-m-amt {
    font-size: 14px;
    font-weight: 900;
    color: var(--dc-emerald);
    white-space: nowrap;
}
.dc-mission.dc-featured .dc-m-amt { color: var(--dc-cyan); font-size: 16px; }

.dc-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--dc-ink-2);
}

/* ===== 체험 코인 프리뷰 ===== */
.dc-right { display: flex; align-items: center; justify-content: center; }
.dc-preview-coin {
    position: relative;
    width: 220px; height: 220px;
}
.dc-preview-coin-lg { width: 260px; height: 260px; }

.dc-coin-face {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #ffe5a0 0%, #ffcc33 30%, #b8860b 75%, #5a3e0a 100%);
    box-shadow:
        0 20px 60px rgba(255, 204, 51, .4),
        inset 0 -10px 20px rgba(0, 0, 0, .3),
        inset 0 10px 20px rgba(255, 255, 255, .3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.dc-coin-sym {
    font-size: 14px;
    font-weight: 900;
    color: #5a3e0a;
    letter-spacing: .1em;
}
.dc-coin-amount {
    font-size: 42px;
    font-weight: 900;
    color: #2a1a04;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dc-preview-coin-lg .dc-coin-amount { font-size: 52px; }
.dc-coin-unit {
    font-size: 12px;
    font-weight: 700;
    color: #5a3e0a;
    margin-top: 4px;
    letter-spacing: .05em;
}
.dc-coin-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(255, 204, 51, .5);
    animation: dcSpin 14s linear infinite;
}
.dc-coin-glow {
    position: absolute;
    inset: -15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 204, 51, .3), transparent 60%);
    animation: dcGlow 2.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes dcSpin { to { transform: rotate(360deg); } }
@keyframes dcGlow {
    0%, 100% { opacity: .4; transform: scale(1); }
    50%      { opacity: .8; transform: scale(1.08); }
}
.dc-coin-empty .dc-coin-face {
    background: radial-gradient(circle at 30% 30%, #2a2a2a 0%, #1a1a1a 40%, #0a0a0a 80%);
}
.dc-coin-empty .dc-coin-sym,
.dc-coin-empty .dc-coin-amount,
.dc-coin-empty .dc-coin-unit { color: #555; text-shadow: none; }

/* ===== 잔액 + 액션 (active) ===== */
.dc-panel-active {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: auto;
}
.dc-balance-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, .03);
    border-radius: 12px;
    border: 1px solid var(--dc-line);
}
.dc-balance-label { display: flex; flex-direction: column; gap: 4px; }
.dc-bal-tag { font-size: 11px; font-weight: 700; color: var(--dc-ink-2); letter-spacing: .08em; }
.dc-bal-nick { font-size: 16px; font-weight: 800; color: var(--dc-ink-0); }
.dc-balance-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-self: center;
}
.dc-bal-sym { font-size: 14px; font-weight: 900; color: var(--dc-gold); }
.dc-bal-val {
    font-size: 38px;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 20px rgba(255, 204, 51, .4);
}
.dc-bal-unit { font-size: 12px; color: var(--dc-ink-2); font-weight: 700; }
.dc-balance-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--dc-ink-2);
    text-align: right;
}
.dc-balance-meta b { color: var(--dc-ink-1); font-weight: 700; }

.dc-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.dc-play {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 18px 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--dc-line);
    text-decoration: none;
    color: var(--dc-ink-0);
    transition: all .2s ease;
}
.dc-play:hover { transform: translateY(-2px); border-color: rgba(0, 245, 255, .5); box-shadow: 0 12px 28px rgba(0, 245, 255, .12); }
.dc-play-bingo:hover { border-color: rgba(0, 245, 255, .55); }
.dc-play-betroom:hover { border-color: rgba(168, 85, 247, .55); }
.dc-play-ico { font-size: 28px; }
.dc-play-txt { display: flex; flex-direction: column; gap: 3px; }
.dc-play-txt b { font-size: 15px; font-weight: 800; }
.dc-play-txt small { font-size: 11px; color: var(--dc-ink-2); }
.dc-play-badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(16, 185, 129, .14);
    color: var(--dc-emerald);
    border: 1px solid rgba(16, 185, 129, .4);
}
.dc-play-badge.dc-done {
    background: rgba(122, 135, 167, .14);
    color: var(--dc-ink-2);
    border-color: var(--dc-line);
}

.dc-checklist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.dc-chk {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--dc-line);
    font-size: 12px;
}
.dc-chk-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--dc-line); border: 2px solid var(--dc-ink-2);
}
.dc-chk.dc-done .dc-chk-dot { background: var(--dc-emerald); border-color: var(--dc-emerald); box-shadow: 0 0 10px rgba(16, 185, 129, .5); }
.dc-chk-lbl { color: var(--dc-ink-1); font-weight: 600; }
.dc-chk.dc-done .dc-chk-lbl { color: var(--dc-ink-0); }
.dc-chk-done { font-size: 11px; font-weight: 800; color: var(--dc-emerald); }
.dc-chk-pending { font-size: 11px; color: var(--dc-ink-2); }
.dc-chk-btn {
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(0, 245, 255, .12);
    border: 1px solid rgba(0, 245, 255, .4);
    color: var(--dc-cyan);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
}
.dc-chk-btn:hover { background: rgba(0, 245, 255, .2); }

/* ===== 영상 모달 — 다른 섹션(슬롯 스트립/강력픽)보다 위에 뜨도록 최상위 z-index ===== */
.dc-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dc-modal-bd {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 15, .82);
    backdrop-filter: blur(6px);
}
.dc-modal-box {
    position: relative;
    width: min(640px, 92vw);
    background: linear-gradient(180deg, #0f1830, #0a1120);
    border: 1px solid var(--dc-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}
.dc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dc-line);
}
.dc-modal-head h3 { margin: 0; font-size: 15px; color: var(--dc-ink-0); font-weight: 800; }
.dc-modal-x {
    background: transparent;
    border: 0;
    color: var(--dc-ink-2);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    font-family: inherit;
}
.dc-modal-x:hover { color: var(--dc-ink-0); }
.dc-modal-body { padding: 16px 20px 20px; }
.dc-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}
.dc-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.dc-video-progress {
    height: 4px;
    background: rgba(255, 255, 255, .06);
    border-radius: 999px;
    margin-top: 12px;
    overflow: hidden;
}
.dc-video-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--dc-cyan), var(--dc-violet));
    transition: width .25s linear;
}
.dc-video-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.dc-video-msg { font-size: 12px; color: var(--dc-ink-2); }
.dc-video-claim {
    padding: 10px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--dc-cyan), var(--dc-violet));
    color: #0a1120;
    border: 0;
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s ease;
}
.dc-video-claim:disabled {
    background: rgba(255, 255, 255, .06);
    color: var(--dc-ink-2);
    cursor: not-allowed;
}
.dc-video-claim:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.1); }

/* ===== 토스트 ===== */
.dc-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 2147483001;
    padding: 12px 22px;
    background: linear-gradient(135deg, rgba(0, 245, 255, .2), rgba(168, 85, 247, .2));
    border: 1px solid rgba(0, 245, 255, .5);
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}
.dc-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.dc-toast.dc-toast-error {
    background: linear-gradient(135deg, rgba(255, 69, 119, .25), rgba(255, 204, 51, .15));
    border-color: rgba(255, 69, 119, .5);
}

/* ===== 반응형 ===== */
@media (max-width: 960px) {
    .dc-hero { padding: 20px 18px; }
    .dc-panel { grid-template-columns: 1fr; gap: 18px; }
    .dc-headline { font-size: 24px; }
    .dc-right { order: -1; }
    .dc-preview-coin, .dc-preview-coin-lg { width: 160px; height: 160px; }
    .dc-coin-amount { font-size: 32px; }
    .dc-preview-coin-lg .dc-coin-amount { font-size: 36px; }
    .dc-balance-row { grid-template-columns: 1fr; text-align: center; gap: 10px; }
    .dc-balance-amount { justify-self: center; }
    .dc-balance-meta { flex-direction: row; justify-content: center; text-align: center; }
    .dc-action-row { grid-template-columns: 1fr; }
    .dc-checklist { grid-template-columns: 1fr; }
    .dc-mission-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .dc-hero { padding: 16px 14px; margin: 8px 0 14px; }
    .dc-headline { font-size: 20px; }
    .dc-cta { padding: 12px 18px; font-size: 13px; }
    .dc-preview-coin, .dc-preview-coin-lg { width: 140px; height: 140px; }
}