@charset "utf-8";
/**
 * 박스 오픈 공용 컴포넌트
 *   - 모달 + 박스 그리드 + 오픈 연출 + 결과 카드
 *   - 어드민 시뮬레이터 / 프론트 박스 오픈 양쪽에서 사용
 */

/* ───────── 모달 오버레이 ───────── */
.boxopen_modal {display:none;max-width: 640px;position:fixed;inset:0;margin: auto;z-index:9999;background:rgba(15,23,42,0.6);backdrop-filter:blur(4px);justify-content:center;align-items:flex-start;padding:40px 16px;overflow-y:auto;}

/* ───────── 미니멀 모드 (프론트 박스 오픈) ───────── */
/* 미니멀 모드 — 항상 위에서 시작 + 외부 스크롤 OFF, 내부에 스크롤 */
.boxopen_modal.minimal {
    background:rgba(10,12,20,0.92);
    backdrop-filter:blur(8px);
    align-items:stretch;
    justify-content:center;
    padding:0;
    overflow:hidden;             /* 외부 스크롤 차단 */
}
.boxopen_modal.minimal .boxopen_minimal_inner {
    width:100%;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:60px 16px 40px;       /* 상단 ✕ 영역 확보 */
    overflow-y:auto;              /* 내부 세로 스크롤 */
    -webkit-overflow-scrolling:touch;
}
/* 스크롤바 다듬기 */
.boxopen_modal.minimal .boxopen_minimal_inner::-webkit-scrollbar { width:6px; }
.boxopen_modal.minimal .boxopen_minimal_inner::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.18); border-radius:3px; }
.boxopen_modal.minimal .boxopen_minimal_inner::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.32); }

/* 그리드 — auto-fill 기반 반응형 (셀 수와 화면폭에 따라 자동 정렬) */
.boxopen_modal.minimal .boxopen_grid {
    display:grid; gap:10px; width:100%;
    justify-content:center;
    grid-auto-rows:1fr;
}
/* 갯수별 셀 사이즈 가이드 (auto-fill 사용 — minmax로 너비/갯수 자동) */
.boxopen_modal.minimal .boxopen_grid.cols-1 { grid-template-columns:minmax(220px, 300px); }
.boxopen_modal.minimal .boxopen_grid.cols-2 { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); max-width:480px; margin:0 auto; }
.boxopen_modal.minimal .boxopen_grid.cols-3 { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); max-width:600px; margin:0 auto; }
.boxopen_modal.minimal .boxopen_grid.cols-4 {grid-template-columns:repeat(auto-fill, minmax(142px, 1fr));/* max-width: 600px; */margin:0 auto;}
.boxopen_modal.minimal .boxopen_grid.cols-5 { grid-template-columns:repeat(auto-fill, minmax(95px, 1fr));  max-width:800px; margin:0 auto; }
.boxopen_modal.minimal .boxopen_grid.cols-6 { grid-template-columns:repeat(auto-fill, minmax(82px, 1fr));  max-width:900px; margin:0 auto; }

/* 모바일 좁은 화면 — 한 줄 셀 갯수 줄이기 */
@media (max-width:640px) {
    .boxopen_modal.minimal .boxopen_minimal_inner { padding:50px 10px 30px; }
    .boxopen_modal.minimal .boxopen_grid { gap:8px; }
    .boxopen_modal.minimal .boxopen_grid.cols-3,
    .boxopen_modal.minimal .boxopen_grid.cols-4,
    .boxopen_modal.minimal .boxopen_grid.cols-5,
    .boxopen_modal.minimal .boxopen_grid.cols-6 {
        grid-template-columns:repeat(auto-fill, minmax(142px, 1fr));
    }
}

/* 미니멀 모드 — 카드 안 여백 최소화, 썸네일이 거의 다 채우게 */
.boxopen_modal.minimal .boxopen_grid .cell { container-type:inline-size; }
.boxopen_modal.minimal .boxopen_grid .item_card {
    padding:3% 3% 3.5%;
    border-radius:12px;
    border-width:3px;
    justify-content:flex-start;
}
.boxopen_modal.minimal .boxopen_grid .item_card .thumb {
    width:100%; height:auto; aspect-ratio:1;
    min-height:0; border-radius:8px;
    margin-bottom:2%;
    background:transparent;
}
.boxopen_modal.minimal .boxopen_grid .item_card .name {
    font-size: min(15px, 9.79cqw);
    line-height:1.25;
    margin-top:1%;
}
.boxopen_modal.minimal .boxopen_grid .item_card .price {
    font-size: min(14px, 8.4cqw);
    margin-top:0.5%;
}
.boxopen_modal.minimal .boxopen_grid .cycle_card { border-radius:12px; border-width:3px; }
.boxopen_modal.minimal .boxopen_close_x {
    position:fixed; top:14px; right:14px; z-index:100;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,0.18); color:#fff;
    border:0; cursor:pointer; font-size:24px; line-height:1;
    transition:background 0.15s;
    box-shadow:0 4px 14px rgba(0,0,0,0.4);
}
.boxopen_modal.minimal .boxopen_close_x:hover { background:rgba(255,255,255,0.3); }
.boxopen_modal.minimal .boxopen_error { background:rgba(255,0,0,0.2); color:#fff; padding:10px 14px; border-radius:6px; margin-bottom:14px; font-size:13px; }</str>
</invoke>
.boxopen_modal.on { display:flex; }
.boxopen_modal .box { width:100%; max-width:820px; background:#fff; border-radius:14px; padding:24px; box-shadow:0 24px 80px rgba(0,0,0,0.4); }
.boxopen_modal .head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.boxopen_modal .head h3 { font-size:18px; font-weight:700; color:#222; }
.boxopen_modal .head .close { width:32px; height:32px; border:0; background:#f0f1f5; border-radius:50%; cursor:pointer; font-size:18px; color:#666; }
.boxopen_modal .head .close:hover { background:#e5e7eb; color:#333; }

/* ───────── 폼 영역 ───────── */
.boxopen_form { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; }
.boxopen_form label { display:block; font-size:12px; color:#666; margin-bottom:5px; }
.boxopen_form select, .boxopen_form input[type=number] { width:100%; padding:10px 12px; border:1px solid #d6dae0; border-radius:6px; font-size:14px; background:#fff; }
.boxopen_form .btn_open { padding:11px 24px; background:#3057ff; color:#fff; border:0; border-radius:6px; font-size:14px; font-weight:700; cursor:pointer; }
.boxopen_form .btn_open:hover { background:#2547e2; }

/* ───────── 박스 그리드 ───────── */
.boxopen_grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; margin-top:18px; min-height:200px; }
.boxopen_grid .cell { position:relative; aspect-ratio:1; perspective:600px; }

/* 박스 (닫힌 상태) */
.boxopen_grid .box_img { position:absolute; inset:0; background:linear-gradient(135deg, #ffb444, #ff7e00); border-radius:10px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 16px rgba(255,126,0,0.3); transform-origin:center; will-change:transform, filter, opacity; }
.boxopen_grid .box_img img { width:100%; height:100%; object-fit:contain; border-radius:10px; pointer-events:none; }
.boxopen_grid .box_img.shake       { animation:bo_shake 0.32s infinite; }
.boxopen_grid .box_img.shake_hard  { animation:bo_shake_hard 0.18s infinite; }
.boxopen_grid .box_img.opening     { animation:bo_open 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }

/* 색 사이클 카드 (에픽/전설 전용) */
.boxopen_grid .cycle_card {
    position:absolute; inset:0;
    background:#fff;
    border:4px solid #888;
    border-radius:10px;
    box-shadow:0 0 0 2px rgba(255,255,255,0.3), 0 0 30px var(--cyc, #888);
    transition:border-color 0.08s, box-shadow 0.08s;
}
.boxopen_grid .cycle_card.settling { animation:bo_settle 0.4s forwards; }
.boxopen_grid .cycle_card .pulse {
    position:absolute; inset:-2px; border-radius:10px;
    background:transparent;
    pointer-events:none;
}

/* 상품 결과 카드 (열린 후) */
.boxopen_grid .item_card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; background:#fff; border:3px solid var(--rar, #ddd); border-radius:10px; opacity:0; transform:scale(0.5); box-shadow:0 6px 20px rgba(0,0,0,0.12); }
.boxopen_grid .item_card.show { animation:bo_popin 0.4s forwards; }
.boxopen_grid .item_card .thumb { width:72px; height:72px; background:#fafbfc; border-radius:6px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; overflow:hidden; }
.boxopen_grid .item_card .thumb img { width:100%; height:100%; object-fit:cover; }
.boxopen_grid .item_card .name { font-size:12px; font-weight:600; color:#222; text-align:center; line-height:1.3; word-break:keep-all; }
.boxopen_grid .item_card .price { font-size:11px; color:#3057ff; margin-top:3px; font-weight:700; }
.boxopen_grid .item_card.error { border-color:#e74c3c; color:#b00020; font-size:11px; }
.boxopen_grid .item_card .err_msg { font-size:11px; color:#b00020; text-align:center; }

/* ───────── 통계 영역 ───────── */
.boxopen_stats { margin-top:22px; padding:16px; background:#fafbfc; border-radius:10px; }
.boxopen_stats h4 { font-size:13px; font-weight:700; color:#444; margin-bottom:10px; }
.boxopen_stats .rows { display:grid; gap:5px; }
.boxopen_stats .row { display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; font-size:13px; padding:5px 0; }
.boxopen_stats .row .dot { width:10px; height:10px; border-radius:50%; }
.boxopen_stats .row .name { color:#333; }
.boxopen_stats .row .cnt { color:#666; font-family:Menlo,Consolas,monospace; }
.boxopen_stats .row .pct { color:#3057ff; font-weight:700; min-width:60px; text-align:right; font-family:Menlo,Consolas,monospace; }

/* ───────── 액션 버튼 ───────── */
.boxopen_actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
.boxopen_actions .btn { padding:10px 20px; border-radius:6px; border:1px solid #ddd; background:#fff; cursor:pointer; font-size:13px; }
.boxopen_actions .btn.primary { background:#3057ff; color:#fff; border-color:#3057ff; }

/* ───────── 빈 상태 / 에러 ───────── */
.boxopen_empty { padding:40px; text-align:center; color:#999; font-size:13px; }
.boxopen_error { padding:14px; background:#fff0f0; color:#b00020; border:1px solid #ffd6d6; border-radius:6px; font-size:13px; margin-top:12px; }

/* ───────── 키프레임 ───────── */

/* 가볍게 부르르 (대기 상태) */
@keyframes bo_shake {
    0%, 100% { transform:translate(0,0) rotate(0); }
    25% { transform:translate(-2px,-1px) rotate(-2deg); }
    50% { transform:translate(2px, 1px) rotate(2deg);  }
    75% { transform:translate(-1px,2px) rotate(-1deg); }
}

/* 부르르르르 (펑 직전) — 살짝 진동 */
@keyframes bo_shake_hard {
    0%   { transform:translate(-2px,-1px) rotate(-2deg); }
    20%  { transform:translate(2px, 1px) rotate(2deg);  }
    40%  { transform:translate(-2px,1px) rotate(-2deg); }
    60%  { transform:translate(2px,-1px) rotate(2deg);  }
    80%  { transform:translate(-1px,1px) rotate(-1deg); }
    100% { transform:translate(0,0)     rotate(0);      }
}

/* 박스 열기 (간단 톤 다운: 살짝 부풀었다 사라짐) */
@keyframes bo_open {
    0%   { transform:scale(1);    opacity:1; filter:brightness(1); }
    40%  { transform:scale(0.85); opacity:1; filter:brightness(1.1); }
    75%  { transform:scale(1.15); opacity:0.5; filter:brightness(1.3); }
    100% { transform:scale(0.4);  opacity:0; filter:brightness(1); }
}

/* 색 사이클 카드 settle (실제 등급 색으로 안정화) */
@keyframes bo_settle {
    0%   { transform:scale(1); box-shadow:0 0 30px var(--rar, #888); }
    40%  { transform:scale(1.1); box-shadow:0 0 50px var(--rar, #888), 0 0 80px var(--rar, #888); }
    100% { transform:scale(1); box-shadow:0 0 20px var(--rar, #888); }
}

/* 상품 카드 등장 */
@keyframes bo_popin {
    0%   { opacity:0; transform:scale(0.3) rotate(-8deg); }
    40%  { opacity:1; transform:scale(1.2) rotate(3deg);  }
    70%  { opacity:1; transform:scale(0.95) rotate(-1deg);}
    100% { opacity:1; transform:scale(1)   rotate(0);     }
}

/* 전설/에픽 글로우 (기존) */
@keyframes bo_glow {
    0%,100% { filter:blur(4px) brightness(1); }
    50%     { filter:blur(8px) brightness(1.3); }
}

/* ═════════ 박스 오픈 영상 연출 (영상 → 밝기 스르륵 → 결과 짠) ═════════ */

/* 영상 모드: 회색 배경 꽉 채움 (영상 재생 중 닫기 불가) */
.boxopen_modal.minimal.video_mode { backdrop-filter:none; }

/* 영상 스테이지 — 화면 전체를 덮고 영상 중앙 정렬 (배경 투명 → 뒤 비침) */
.boxopen_stage {
    max-width: 640px;
    width: 100%;
    position:fixed;
    inset:0;
    margin: auto;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    opacity:1;
    transition:opacity 0.6s ease;
}
.boxopen_stage .boxopen_video {
    max-width: 100%;
    max-height:100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
    /* 밝기는 .brighten 에서 스르륵 상승 */
    filter:brightness(1);
    transition:filter 0.75s ease-in;
}
/* 화이트 플래시 오버레이 — 영상 끝 무렵 밝기 상승 연출 */
.boxopen_stage .boxopen_flash {
    position:absolute; inset:0;
    background:#fff;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.75s ease-in;
}

/* 영상 끝 임박: 스르륵 밝아짐 (영상은 끝까지 보이게 — 과한 화이트아웃 X) */
.boxopen_stage.brighten .boxopen_video { filter:brightness(1.5); }
.boxopen_stage.brighten .boxopen_flash { opacity:0.4; }

/* 결과 공개 시: 영상 스테이지 페이드아웃 */
.boxopen_stage.reveal_out { opacity:0; pointer-events:none; }

/* ───────── 결과 카드 짠 등장 (영상 후) ───────── */
/* reveal 셀은 기본 .show 애니메이션을 무력화하고 pop 시점에만 등장 */
.boxopen_grid .cell.reveal .item_card {
    opacity:0;
    transform:scale(0.5);
    animation:none;
}
.boxopen_grid .cell.reveal.pop .item_card {
    animation:bo_popin 0.42s forwards;
}

@media (max-width:640px) {
    .boxopen_stage .boxopen_video { width:100%; }
}