@charset "utf-8";

/* ───────── 언박싱 체험 (unboxing.php) ───────── */
.unboxing {max-width:640px;margin:0 auto;padding: 14px 0 80px;}

/* 히어로 */
.unboxing .ub_hero { background:linear-gradient(135deg,#0f172a 0%,#312e81 50%,#831843 100%); color:#fff; border-radius:18px; padding:24px 22px 22px; margin-bottom:16px; text-align:center; box-shadow:0 12px 30px rgba(15,23,42,.25); position:relative; overflow:hidden; }
.unboxing .ub_hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(251,191,36,.15) 0%, transparent 40%); pointer-events:none; }
.unboxing .ub_hero .badge { position:relative; display:inline-block; padding:4px 12px; background:linear-gradient(135deg,#fbbf24,#f97316); color:#fff; font-size:11px; font-weight:800; letter-spacing:1.5px; border-radius:50px; margin-bottom:12px; box-shadow:0 4px 10px rgba(249,115,22,.4); }
.unboxing .ub_hero .ttl { position:relative; font-size:22px; font-weight:900; line-height:1.4; margin:0 0 10px; letter-spacing:-.5px; }
.unboxing .ub_hero .ttl span { background:linear-gradient(135deg,#fbbf24,#f59e0b); -webkit-background-clip:text; background-clip:text; color:transparent; }
.unboxing .ub_hero .desc { position:relative; font-size:12.5px; opacity:.85; margin:0; line-height:1.6; }

/* 섹션 공통 */
.unboxing .ub_sec { background:#fff; border:1px solid #e7eaef; border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 2px 6px rgba(20,25,40,.04); }
.unboxing .ub_sec .sec_ttl {font-size: 16px;font-weight:800;color:#1f2330;margin:0 0 12px;padding-left:8px;border-left: 3px solid var(--color-main);}
.unboxing .empty { text-align:center; color:#9aa0ad; padding:30px 0; font-size:13px; }

/* 박스 선택 그리드 */
.unboxing .box_picker { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(95px, 1fr)); gap:8px; }
.unboxing .box_picker .opt { background:#f8f9ff; border:2px solid transparent; border-radius:12px; padding:10px 6px 8px; text-align:center; cursor:pointer; transition:all .15s; }
.unboxing .box_picker .opt:hover { background:#eef2ff; }
.unboxing .box_picker .opt.on { background:#fff; border-color:#6366f1; box-shadow:0 4px 12px rgba(99,102,241,.2); transform:translateY(-2px); }
.unboxing .box_picker .opt .thumb { width:60px; height:60px; margin:0 auto 6px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.unboxing .box_picker .opt .thumb img { width:100%; height:100%; object-fit:cover; }
.unboxing .box_picker .opt .thumb .emoji { font-size:30px; }
.unboxing .box_picker .opt .name {font-size: 12px;font-weight:700;color:#5b5e6b;margin:0 0 3px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.unboxing .box_picker .opt .price {font-size: 14px;font-weight:800;color: var(--color-main);margin:0;}
.unboxing .box_picker .opt.on .price {color: var(--color-main);}

/* 횟수 선택 */
.unboxing .cnt_picker { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.unboxing .cnt_picker .opt { background:#f8f9ff; border:2px solid transparent; border-radius:10px; padding:12px 0; text-align:center; font-size:13px; font-weight:800; color:#5b5e6b; cursor:pointer; transition:all .15s; }
.unboxing .cnt_picker .opt:hover { background:#eef2ff; }
.unboxing .cnt_picker .opt.on {background: linear-gradient(135deg,#456DEA 0%,#2B53CF 100%);border-color: var(--color-main);color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.3);}

/* 체험 시작 버튼 */
.unboxing .btn_start {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:18px 0;margin-bottom:14px;background:linear-gradient(135deg,#f97316,#dc2626);border:0;border-radius:14px;color:#fff;font-size: 17px;font-weight: 700;letter-spacing:-.3px;cursor:pointer;box-shadow:0 10px 25px rgba(249,115,22,.35);transition:filter .15s, transform .12s;}
.unboxing .btn_start::before { content:'🎰'; font-size:20px; }
.unboxing .btn_start:hover { filter:brightness(1.05); }
.unboxing .btn_start:active { transform:scale(.98); }

/* 안내 */
.unboxing .ub_note { background:#fffbeb; border:1px solid #fde68a; border-radius:12px; padding:14px 16px; }
.unboxing .ub_note h4 {font-size: 15px;font-weight:800;color:#92400e;margin:0 0 8px;}
.unboxing .ub_note p {font-size: 14px;color:#78350f;margin:0 0 4px;line-height:1.6;}
.unboxing .ub_note p:last-child { margin:0; }
.unboxing .ub_note p strong { color:#9a3412; font-weight:800; }

/* ───────── 비회원 로그인 유도 — 박스오픈 모달 내부 하단 슬라이드업 ───────── */
.ub_floating_cta {
    position:absolute; left:14px; right:14px; bottom:14px;
    background:linear-gradient(135deg,#1e1b4b,#312e81);
    border:1px solid rgba(139,92,246,.4);
    border-radius:14px;
    padding:14px 16px;
    box-shadow:0 -8px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(139,92,246,.15) inset;
    color:#fff;
    z-index:5;
    transform:translateY(110%);
    opacity:0;
    transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    pointer-events:none;
}
.ub_floating_cta.on {
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}
.ub_floating_cta .cta_close {
    position:absolute; top:8px; right:8px;
    width:26px; height:26px;
    border:0; background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.7);
    font-size:16px; line-height:1; cursor:pointer;
    border-radius:50%;
    transition:background .15s;
}
.ub_floating_cta .cta_close:hover { background:rgba(255,255,255,.18); color:#fff; }

.ub_floating_cta .cta_body { display:flex; align-items:center; gap:12px; margin-bottom:12px; padding-right:30px; }
.ub_floating_cta .cta_emoji { font-size:32px; line-height:1; flex-shrink:0; filter:drop-shadow(0 2px 6px rgba(251,191,36,.4)); }
.ub_floating_cta .cta_texts { flex:1; min-width:0; }
.ub_floating_cta .cta_ttl { font-size:14px; font-weight:900; margin:0 0 2px; letter-spacing:-.3px; background:linear-gradient(135deg,#fbbf24,#fde68a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ub_floating_cta .cta_sub { font-size:12px; color:rgba(255,255,255,.75); margin:0; line-height:1.4; }

.ub_floating_cta .cta_btns { display:flex; gap:8px; }
.ub_floating_cta .cta_btn { flex:1; display:flex; align-items:center; justify-content:center; padding:11px 0; border-radius:10px; font-size:13px; font-weight:800; text-decoration:none; transition:filter .15s, transform .12s; }
.ub_floating_cta .cta_btn.primary { background:linear-gradient(135deg,#fbbf24,#f97316); color:#fff; box-shadow:0 4px 14px rgba(249,115,22,.45); }
.ub_floating_cta .cta_btn.outline { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; }
.ub_floating_cta .cta_btn:hover { filter:brightness(1.1); }
.ub_floating_cta .cta_btn:active { transform:scale(.97); }

/* 박스오픈 모달이 position:relative 가 아니면 absolute 가 안 먹으니 보강 */
.boxopen_modal { position:fixed; }
.boxopen_modal .ub_floating_cta { position:fixed; bottom:14px; left:14px; right:14px; max-width:612px; margin:0 auto; }