/* ── 폰 홈바 배경 (theme-color가 처리) — html bg = body bg 통일 ── */
html { background: #f1f5f9; }
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
word-break: keep-all;
}
button, input, textarea, select { font: inherit; line-height: 1; }
button { display: inline-flex; align-items: center; justify-content: center; }
:root{
--primary:#6366f1;
--brand:#5046e5;
--brand-dark:#3730a3;
--brand-light:#818cf8;
--accent:#7c3aed;
--muted:#6b7280;
--bg:#eef2ff;
--shadow:0 12px 30px rgba(99,102,241,.10);
--panel-h:520px;
--nav-h:60px;
--safe-top: 0px;
--hdr-total: var(--nav-h);
--tab-h: 47px; /* 상단 탭바 높이 (JS로 실측값 갱신) */
--bottom-nav:56px;
--surface:#ffffff;
--surface-2:#f8fafc;
--border:#e2e8f0;
--text-1:#0f172a;
--text-2:#334155;
--text-3:#64748b;
--text-4:#94a3b8;
--danger:#ef4444;
--success:#22c55e;
--warn:#f59e0b;
--radius:12px;
--radius-sm:8px;
--shadow-sm:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
--shadow-md:0 4px 16px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
--shadow-lg:0 10px 40px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.06);
}
/* ══ 전체 페이지 세로 레이아웃 (flex column) ══
body를 flex 컨테이너로, .wrap을 flex:1로 설정하여
콘텐츠가 적은 탭에서도 footer가 하단 탭바 바로 위에 붙음.
긴 탭은 자연스럽게 스크롤 유지. JS/기능 변경 없음. ══ */
body{ background:#f1f5f9; min-height:100vh; color:var(--text-1); margin:0; padding:0;
padding-top: var(--hdr-total);
padding-bottom: 0;
font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
/* flex column: footer가 항상 뷰포트 하단에 붙도록 */
display: flex; flex-direction: column;
overflow-x: hidden; /* 가로 스크롤 방지 */
}
@media (max-width: 560px) {
body {
/* footer 자체 padding-bottom으로 처리하므로 body 여백 불필요 */
padding-bottom: 0 !important;
}
}
img { max-width:100%; height:auto; }
a { text-decoration:none; }
.wrap{ position:relative; z-index:1; }
/* flex:1 → 남은 세로 공간 전부 차지 → footer가 항상 뷰포트 하단에 붙음 */
.wrap{ max-width:1200px; margin:0 auto; padding:0 20px 24px; flex:1; }
/* ══ STICKY HEADER ══ */
.lk-site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 500;
background: var(--surface);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 var(--border), 0 2px 12px rgba(80,70,229,.06);
padding-top: 0;
}
/* 헤더 높이에 safe-area 포함: iOS에서 env() 정상 동작, Android은 View가 이미 처리 */
.lk-site-header-gap {
height: env(safe-area-inset-top, 0px);
width: 100%;
}
.lk-site-header::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 50%, transparent 100%);
opacity: .5;
}
.lk-header-inner {
max-width: 1200px; margin: 0 auto;
width: 100%; padding: 0 20px;
height: var(--nav-h);
display: flex; align-items: center; gap: 12px;
}
/* 로고 */
.lk-hdr-logo {
display: flex; align-items: center; gap: 10px;
color: var(--text-1); flex-shrink: 0; text-decoration: none;
}
.lk-hdr-logo-mark {
width: 38px; height: 38px; border-radius: 11px;
background: linear-gradient(145deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 17px; font-weight: 900;
box-shadow: 0 4px 16px rgba(99,102,241,.5), 0 1px 3px rgba(0,0,0,.15),
inset 0 1px 0 rgba(255,255,255,.2);
flex-shrink: 0;
overflow: hidden;
position: relative;
transition: box-shadow .2s, transform .15s;
}
.lk-hdr-logo:hover .lk-hdr-logo-mark {
box-shadow: 0 6px 22px rgba(99,102,241,.65), 0 2px 6px rgba(0,0,0,.15),
inset 0 1px 0 rgba(255,255,255,.25);
transform: translateY(-1px);
}
.lk-hdr-logo-mark img { width:100%; height:100%; object-fit:cover; border-radius:11px; }
.lk-hdr-logo-words { min-width: 0; }
.lk-hdr-logo-name {
font-size: 15px; font-weight: 900;
background: linear-gradient(135deg, var(--brand), var(--accent));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -.4px; line-height: 1;
}
.lk-hdr-logo-tagline {
font-size: 9.5px; font-weight: 600;
color: var(--text-4); margin-top: 3px; letter-spacing: .02em;
}
.lk-hdr-gap { flex: 1; }
/* 사용자 정보 (로그인 시) */
.lk-hdr-user-badge {
display: none; align-items: center; gap: 8px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 999px; padding: 4px 12px 4px 4px;
}
.lk-hdr-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--accent));
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 12px; font-weight: 900; flex-shrink: 0;
}
.lk-hdr-nick {
font-size: 13px; font-weight: 700; color: var(--text-2);
max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 헤더 우측 버튼 그룹 */
.lk-hdr-actions {
display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.lk-hdr-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 13px; border-radius: 10px;
border: 1.5px solid transparent;
background: var(--surface-2, #f1f5f9);
color: var(--text-2); font-size: 12px; font-weight: 700;
cursor: pointer; font-family: inherit; text-decoration: none;
transition: all .17s; white-space: nowrap;
line-height: 1;
}
.lk-hdr-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lk-hdr-btn:active { transform: scale(.96); filter: brightness(.96); }
/* 공지사항 — 앰버/주황 */
#lkHdrNoticeBtn2 {
background: rgba(245,158,11,.12);
border-color: rgba(245,158,11,.35);
color: #b45309;
}
#lkHdrNoticeBtn2:hover {
background: rgba(245,158,11,.22);
border-color: rgba(245,158,11,.6);
box-shadow: 0 3px 12px rgba(245,158,11,.22);
}
/* 채팅 — 에메랄드/청록 */
#lkHdrChatBtn {
background: rgba(16,185,129,.10);
border-color: rgba(16,185,129,.30);
color: #065f46;
}
#lkHdrChatBtn:hover {
background: rgba(16,185,129,.20);
border-color: rgba(16,185,129,.55);
box-shadow: 0 3px 12px rgba(16,185,129,.20);
}
/* 이용방법 — 인디고/브랜드 */
#lkHdrGuideBtn {
background: rgba(99,102,241,.10);
border-color: rgba(99,102,241,.30);
color: #3730a3;
}
#lkHdrGuideBtn:hover {
background: rgba(99,102,241,.20);
border-color: rgba(99,102,241,.55);
box-shadow: 0 3px 12px rgba(99,102,241,.22);
}
/* 로그아웃 — 레드 */
#lkHdrLogoutBtn {
background: rgba(239,68,68,.08);
border-color: rgba(239,68,68,.28);
color: #b91c1c;
}
#lkHdrLogoutBtn:hover {
background: rgba(239,68,68,.16);
border-color: rgba(239,68,68,.5);
box-shadow: 0 3px 12px rgba(239,68,68,.18);
}
.lk-hdr-btn.primary {
background: linear-gradient(135deg, var(--brand), var(--accent));
border-color: transparent; color: #fff;
box-shadow: 0 3px 10px rgba(80,70,229,.35);
}
.lk-hdr-btn.primary:hover { opacity: .9; transform: translateY(-1px); }
/* 포인트 배지 */
.lk-hdr-points {
display: none; align-items: center; gap: 6px;
}
/* 각 포인트 항목 — 네온 카드 버튼 */
.lk-hdr-point-item {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 6px 16px 7px;
border-radius: 12px;
cursor: pointer;
position: relative;
transition: transform .15s, box-shadow .15s;
user-select: none;
}
.lk-hdr-point-item:hover { transform: translateY(-2px); }
.lk-hdr-point-item:active { transform: scale(.96); }
/* 쿠지 — 인디고 진한 단색 */
#hdrPtKuji {
background: #1e1b4b;
border: 2px solid #818cf8;
box-shadow: 0 0 0 1px rgba(129,140,248,.15),
0 0 12px rgba(129,140,248,.7),
0 0 24px rgba(129,140,248,.35),
inset 0 1px 0 rgba(165,180,252,.15);
}
#hdrPtKuji:hover {
background: #2e27a3;
box-shadow: 0 0 0 1px rgba(129,140,248,.3),
0 0 18px rgba(129,140,248,.9),
0 0 36px rgba(129,140,248,.5);
}
/* 포인트 — 황금 진한 단색 */
#hdrPtPoint {
background: #451a03;
border: 2px solid #f59e0b;
box-shadow: 0 0 0 1px rgba(245,158,11,.15),
0 0 12px rgba(245,158,11,.7),
0 0 24px rgba(245,158,11,.35),
inset 0 1px 0 rgba(253,230,138,.15);
}
#hdrPtPoint:hover {
background: #6b2d08;
box-shadow: 0 0 0 1px rgba(245,158,11,.3),
0 0 18px rgba(245,158,11,.9),
0 0 36px rgba(245,158,11,.5);
}
/* 온라인쿠지 — 핑크 진한 단색 */
#hdrPtOkuji {
background: #4a0d2b;
border: 2px solid #f472b6;
box-shadow: 0 0 0 1px rgba(244,114,182,.15),
0 0 12px rgba(244,114,182,.7),
0 0 24px rgba(244,114,182,.35),
inset 0 1px 0 rgba(251,207,232,.15);
}
#hdrPtOkuji:hover {
background: #7a1444;
box-shadow: 0 0 0 1px rgba(244,114,182,.3),
0 0 18px rgba(244,114,182,.9),
0 0 36px rgba(244,114,182,.5);
}
/* 라벨 — 각 테마 밝은 색 */
.lk-hdr-point-label {
font-size: 10px; font-weight: 800;
letter-spacing: .03em;
line-height: 1; white-space: nowrap;
}
#hdrPtKuji .lk-hdr-point-label { color: #c7d2fe; text-shadow: 0 0 8px rgba(129,140,248,.8); }
#hdrPtPoint .lk-hdr-point-label { color: #fef08a; text-shadow: 0 0 8px rgba(245,158,11,.8); }
#hdrPtOkuji .lk-hdr-point-label { color: #fce7f3; text-shadow: 0 0 8px rgba(244,114,182,.8); }
/* 금액 — 순백 + 글로우 */
.lk-hdr-point-val {
font-size: 15px; font-weight: 900; line-height: 1; white-space: nowrap;
color: #ffffff;
text-shadow: 0 0 6px rgba(255,255,255,.6), 0 1px 0 rgba(0,0,0,.4);
}
/* 클릭 힌트 삼각 화살표 */
.lk-hdr-point-item::after {
content: '▾';
font-size: 8px;
position: absolute;
bottom: 2px; right: 5px;
opacity: .7;
line-height: 1;
color: #fff;
}
.lk-hdr-sep { display: none; }
/* 대기열 상태 점 */
.lk-hdr-queue {
display: none; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 700; color: var(--text-3);
}
.lk-hdr-queue-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #10b981; flex-shrink: 0;
animation: lkQueuePulse 1.5s ease-in-out infinite;
}
@keyframes lkQueuePulse {
0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(16,185,129,.4); }
50% { opacity:.7; box-shadow:0 0 0 4px rgba(16,185,129,0); }
}
/* ══ 탭 바 — 풀 블리드 ══ */
.lk-tabbar {
display: flex;
justify-content: center;
background: var(--surface);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 12px rgba(80,70,229,.08);
overflow-x: auto; flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
position: sticky; top: var(--hdr-total); z-index: 400;
/* 풀 너비 */
width: 100%; margin: 0; padding: 0;
flex-shrink: 0; /* body flex column 내에서 높이 압축 방지 */
}
.lk-tabbar::-webkit-scrollbar { display: none; }
.tab-btn {
flex: 0 0 auto;
padding: 14px 18px;
border: none;
border-bottom: 3px solid transparent;
background: transparent; cursor: pointer;
font-weight: 700; font-size: 13px; color: var(--text-3);
transition: color .15s, border-color .15s, background .15s;
white-space: nowrap;
font-family: inherit;
line-height: 1.2;
box-sizing: border-box;
}
.tab-btn:hover { color: var(--brand); background: rgba(80,70,229,.05); }
.tab-btn.active {
color: var(--brand);
border-bottom-color: var(--brand);
background: rgba(80,70,229,.07);
}
/* ── 모바일 헤더: 기본 공통 (≤768px) ── */
@media (max-width: 768px) {
.lk-hdr-points { display: none !important; }
.lk-hdr-logo-tagline { display: none; }
}
/* ── 모바일 헤더 공간 최적화 (≤560px) ─────────────────────
560px 이하에서 로고 텍스트 숨기고 마크만, 버튼 텍스트 제거
────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
/* 로고: 마크만, 텍스트 완전 숨김 */
.lk-hdr-logo-words { display: none !important; }
.lk-hdr-logo-mark { width: 36px; height: 36px; font-size: 17px; }
/* 헤더 내부 여백/간격 최소화 */
.lk-header-inner { padding: 0 12px; gap: 7px; }
/* 유저 뱃지: 닉네임 최대 56px */
.lk-hdr-user-badge { padding: 3px 10px 3px 3px; gap: 5px; }
.lk-hdr-nick { max-width: 56px; font-size: 11.5px; }
/* 모든 lk-hdr-btn: 텍스트 숨기고 이모지만 */
.lk-hdr-btn span:last-child { display: none; }
.lk-hdr-btn { padding: 6px 9px; font-size: 15px; gap: 0; }
/* 로그인 버튼: '로그인' 텍스트 유지 */
#lkHdrLoginBtn { padding: 6px 11px; font-size: 12px; }
/* 이용방법 버튼 — 온라인쿠지 탭일 때만 표시 (JS로 제어) */
#lkHdrGuideBtn { display: none; }
/* actions 간격 최소화 */
.lk-hdr-actions { gap: 4px; }
}
@media (max-width: 380px) {
.lk-hdr-logo-mark { width: 32px; height: 32px; font-size: 15px; }
.lk-header-inner { padding: 0 10px; gap: 5px; }
.lk-hdr-nick { max-width: 40px; font-size: 11px; }
.lk-hdr-btn { padding: 5px 7px; }
}
/* ── 더보기 시트 ── */
.more-sheet-btn {
display: flex; align-items: center; gap: 8px;
padding: 12px 14px; border-radius: var(--radius-sm);
background: var(--surface-2); border: 1px solid var(--border);
font-size: 13px; font-weight: 700; color: var(--text-2);
cursor: pointer; font-family: inherit; text-align: left;
transition: background .15s; width: 100%;
}
.more-sheet-btn:hover { background: var(--border); }
/* ── 피규어·굿즈 서브탭 ── */
.goods-subtab-bar {
display: flex; gap: 6px;
margin: 0 0 18px;
padding: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.goods-subtab {
flex: 1; padding: 9px 16px;
border-radius: calc(var(--radius) - 3px);
border: none; background: transparent; cursor: pointer;
font-weight: 800; font-size: 13px; color: var(--text-3);
transition: all .15s; white-space: nowrap;
font-family: inherit; line-height: 1.2;
}
.goods-subtab:hover { background: rgba(80,70,229,.07); color: var(--brand); }
.goods-subtab.active {
background: linear-gradient(135deg, var(--brand), var(--accent));
color: #fff;
box-shadow: 0 3px 12px rgba(80,70,229,.35);
}
/* ── 경매 입찰 폼 ── */
.bid-form { display: flex; flex-direction: column; gap: 12px; }
.bid-input {
width: 100%; padding: 12px 16px;
border: 1.5px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text-1);
font-size: 15px; font-weight: 700; font-family: inherit;
transition: border-color .15s;
}
.bid-input:focus { border-color: var(--brand); outline: none; }
/* ── 헤더 내부 레이아웃 ── */
.lk-hdr-inner {
max-width: 1200px; margin: 0 auto;
display: flex; align-items: center; gap: 12px;
padding: 0 20px; height: 100%;
}
.toolbar{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:0 0 12px;}
.select{
padding:8px 12px;border:1.5px solid #e2e8f0;border-radius:12px;
background:#fff;font-size:13px;color:#334155;
transition:border-color .15s;
}
.select:focus{border-color:#6366f1;outline:none;}
.select option{background:#fff;color:#334155;}
.alert{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.alert-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.alert-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.pill{
display:inline-flex; align-items:center; gap:.4rem;
padding:6px 12px; border-radius:999px;
font-weight:800; line-height:1;
border:1px solid rgba(0,0,0,.06);
box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.04);
}
.pill.green{background:#16a34a;color:#fff}
.pill.blue{background:#2563eb;color:#fff}
.pill.ready{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.pill.running{background:#16a34a;color:#fff}
.pill.ended{background:#fca5a5;color:#7f1d1d}
.pill-deadline{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
.pill-deadline b{ font-variant-numeric: tabular-nums; }
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }
@media (max-width:768px) { .shop-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }
/* 모바일에서도 항상 2열 유지 */
@media (max-width:420px) { .shop-grid{ grid-template-columns:repeat(2,1fr) !important; gap:8px; } }
#eventSection #eventGrid.shop-grid{
grid-template-columns: repeat(auto-fill, minmax(210px,1fr));
justify-content: start;
gap: 18px;
}
/* ── 상품 카드 ── */
.product{
background:#fff;
border:1.5px solid rgba(99,102,241,.15);
border-radius:18px;
box-shadow:0 2px 12px rgba(99,102,241,.08), 0 1px 3px rgba(0,0,0,.04);
overflow:hidden;
display:flex; flex-direction:column;
transition:box-shadow .22s, transform .22s, border-color .22s;
cursor:pointer;
position:relative;
}
.product::before{
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg,#6366f1,#ec4899,#f59e0b,#6366f1);
background-size:200% auto;
animation:cardRainbow 3s linear infinite;
opacity:0; transition:opacity .3s;
z-index:1;
}
.product:hover::before{opacity:1;}
@keyframes cardRainbow{0%{background-position:0%}100%{background-position:200%}}
.product:hover{
box-shadow:0 12px 32px rgba(99,102,241,.2), 0 4px 12px rgba(0,0,0,.08);
transform:translateY(-4px);
border-color:rgba(99,102,241,.35);
}
/* 이미지 영역 */
.img-wrapper{
position:relative;
aspect-ratio:3/4;
overflow:hidden;
background:#f1f5f9;
cursor:zoom-in;
}
.img-wrapper img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .35s ease;
}
.product:hover .img-wrapper img{ transform:scale(1.06); }
/* 이미지 확대 힌트 */
.img-zoom-hint{
position:absolute; top:8px; right:8px;
background:rgba(0,0,0,.48); color:#fff;
font-size:13px; border-radius:8px; padding:3px 7px;
opacity:0; transition:opacity .2s; pointer-events:none;
}
.img-wrapper:hover .img-zoom-hint{ opacity:1; }
/* 품절 오버레이 */
.sold-out-overlay{
position:absolute; inset:0;
background:rgba(220,38,38,.52); color:#fff;
font-weight:900; font-size:26px;
display:flex; align-items:center; justify-content:center;
pointer-events:none;
animation:fadePulse 2.2s infinite ease-in-out;
}
@keyframes fadePulse{ 0%,100%{ background:rgba(220,38,38,.38) } 50%{ background:rgba(220,38,38,.72) } }
/* 카드 본문 */
.product-name{
font-weight:800; font-size:15px;
margin:12px 14px 5px;
line-height:1.35;
color:#1e1b4b;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.price{
margin:2px 14px;
font-size:17px; font-weight:900; color:#6366f1;
letter-spacing:-.02em;
}
.stock{
margin:2px 14px 0;
font-size:12px; color:#64748b; font-weight:600;
}
.stock.out{ color:#ef4444; font-weight:800; }
.card-actions{ margin:12px 14px 14px; margin-top:auto; }
/* 구매 버튼 */
.buy-button{
width:100%;
padding:11px 0;
border-radius:12px;
background:linear-gradient(135deg,#6366f1,#8b5cf6);
color:#fff; font-weight:800; font-size:14px;
border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
line-height:1;
transition:opacity .18s, transform .12s;
box-shadow:0 3px 12px rgba(99,102,241,.30);
}
.buy-button:hover{ opacity:.88; transform:translateY(-1px); }
.buy-button:active{ transform:translateY(0); opacity:1; }
.buy-button[disabled]{
background:linear-gradient(135deg,#cbd5e1,#94a3b8);
box-shadow:none; cursor:not-allowed; opacity:.7;
}
/* 구매샵 전용 – 현금 결제 버튼 */
.buy-button-cash{
background:linear-gradient(135deg,#ef4444,#dc2626) !important;
box-shadow:0 3px 12px rgba(239,68,68,.30) !important;
}
.buy-button-cash:hover{ opacity:.88; transform:translateY(-1px); }
.buy-button-cash[disabled]{
background:linear-gradient(135deg,#cbd5e1,#94a3b8) !important;
box-shadow:none !important;
}
/* 포인트 뱃지 (구매샵 카드 이미지 위) */
.cash-badge{
position:absolute; top:8px; left:8px;
background:linear-gradient(135deg,#6366f1,#8b5cf6);
color:#fff; font-size:11px; font-weight:800;
padding:3px 8px; border-radius:20px;
box-shadow:0 2px 8px rgba(99,102,241,.4);
letter-spacing:.03em;
z-index:2;
}
/* 품절 카드 흑백 처리 */
.sold-card .img-wrapper img{ filter:grayscale(.7); }
/* ══ 공통 테이블 래퍼 ══ */
.tbl-wrap {
background: #fff;
border: 1.5px solid rgba(99,102,241,.15);
border-radius: 16px;
/* overflow:hidden 제거 → 내부 .tbl-scroll의 overflow-x:auto가 정상 동작 */
box-shadow: 0 4px 20px rgba(99,102,241,.08);
margin-top: 8px;
}
.tbl-header {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid rgba(99,102,241,.1);
background: linear-gradient(135deg,#eef2ff,#f5f3ff);
border-radius: 14px 14px 0 0;
}
.tbl-header-title { font-size: 14px; font-weight: 900; color: #4338ca; }
/* 스크롤 래퍼: 가로 스크롤 허용 */
.tbl-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 0 0 14px 14px;
}
table.history{
width:100%; border-collapse:collapse;
background:#fff;
/* 모바일에서도 최소 너비 보장 */
min-width: 420px;
}
table.history th, table.history td{
padding:11px 12px; border-bottom:1px solid #f1f5f9;
text-align:center; color:#334155; font-size:13px; white-space:nowrap;
}
table.history th{
background: linear-gradient(135deg,#eef2ff,#f5f3ff);
font-weight:900; color:#4338ca; font-size:12px;
position: sticky; top: 0; z-index: 1;
}
table.history tr:last-child td { border-bottom: none; }
table.history tbody tr:hover { background: rgba(99,102,241,.04); }
/* ── 구매내역 탭 버튼 ── */
.hist-tab-btn {
background: transparent; border: none; border-bottom: 2.5px solid transparent;
padding: 10px 16px; font-size: 13px; font-weight: 800; color: #64748b;
cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s;
margin-bottom: -2px;
}
.hist-tab-btn.active { color: #6366f1; border-bottom-color: #6366f1; }
.hist-tab-btn:hover:not(.active) { color: #4338ca; }
/* ══ 쿠지 구매내역 카드 — 아케이드 빛나는 스타일 ══ */
@keyframes khCardIn { from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes khGold { 0%,100%{box-shadow:0 0 16px rgba(251,191,36,.5),0 0 40px rgba(245,158,11,.2),0 4px 20px rgba(0,0,0,.5)} 50%{box-shadow:0 0 30px rgba(251,191,36,.8),0 0 60px rgba(245,158,11,.35),0 4px 20px rgba(0,0,0,.5)} }
@keyframes khShimmer { 0%{left:-100%} 100%{left:200%} }
@keyframes khPurpleGlow { 0%,100%{box-shadow:0 0 12px rgba(139,92,246,.4),0 4px 24px rgba(0,0,0,.5)} 50%{box-shadow:0 0 24px rgba(139,92,246,.65),0 0 40px rgba(99,102,241,.2),0 4px 24px rgba(0,0,0,.5)} }
.kuji-hist-card {
background: #fff;
border: 1.5px solid rgba(99,102,241,.2);
border-radius: 18px; padding: 0;
overflow: hidden;
margin-bottom: 12px;
transition: transform .2s, border-color .2s, box-shadow .2s;
animation: khCardIn .3s cubic-bezier(.22,.61,.36,1) both;
box-shadow: 0 2px 12px rgba(99,102,241,.08), 0 1px 3px rgba(0,0,0,.04);
position: relative;
}
.kuji-hist-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b, #6366f1);
background-size: 200% auto;
animation: cardRainbow 3s linear infinite;
z-index: 1;
}
.kuji-hist-card::after {
content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
animation: khShimmer 3.5s ease-in-out infinite;
pointer-events: none; z-index: 0;
}
.kuji-hist-card:hover {
border-color: rgba(99,102,241,.4);
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(99,102,241,.18), 0 4px 12px rgba(0,0,0,.06);
}
.kuji-hist-card.has-lastone {
background: linear-gradient(145deg,#fffbeb,#fff7e6,#fffdf0);
border-color: rgba(245,158,11,.5);
animation: khGold 2.5s ease-in-out infinite, khCardIn .3s cubic-bezier(.22,.61,.36,1) both;
}
.kuji-hist-card.has-lastone::before {
background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b, #fbbf24);
background-size: 200% auto;
animation: cardRainbow 2s linear infinite;
}
.kuji-hist-inner {
display: flex; flex-direction: column; align-items: stretch; gap: 0;
padding: 16px 16px 12px;
position: relative; z-index: 1;
}
.kuji-hist-thumb {
width: 60px; height: 60px; border-radius: 14px;
object-fit: cover; flex-shrink: 0;
border: 2.5px solid rgba(99,102,241,.3);
box-shadow: 0 4px 12px rgba(99,102,241,.15);
}
.kuji-hist-thumb-ph {
width: 60px; height: 60px; border-radius: 14px; flex-shrink: 0;
background: linear-gradient(135deg,#eef2ff,#f5f3ff);
border: 2.5px solid rgba(99,102,241,.25);
display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.kuji-hist-info { flex: 1; min-width: 0; }
.kuji-hist-title {
font-size: 15px; font-weight: 900; color: #1e1b4b;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
letter-spacing: -.01em;
}
.kuji-hist-meta { font-size: 11px; color: #64748b; margin-top: 3px; }
.kuji-hist-tags {
display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
}
.kuji-hist-tag {
display: inline-flex; align-items: center;
background: #eef2ff;
border: 1.5px solid rgba(99,102,241,.3);
border-radius: 8px; padding: 3px 10px;
font-size: 11.5px; font-weight: 800; color: #4338ca;
}
.kuji-hist-tag-lo {
display: inline-flex; align-items: center; gap: 4px;
background: linear-gradient(135deg,#fffbeb,#fef3c7);
border: 1.5px solid rgba(245,158,11,.5);
border-radius: 8px; padding: 3px 10px;
font-size: 11.5px; font-weight: 900; color: #b45309;
box-shadow: 0 2px 8px rgba(245,158,11,.2);
}
.kuji-hist-right {
text-align: right; flex-shrink: 0; min-width: 84px;
}
.kuji-hist-price-val {
font-size: 17px; font-weight: 900; color: #d97706;
white-space: nowrap;
letter-spacing: -.01em;
}
.kuji-hist-count {
font-size: 11px; color: #64748b; margin-top: 3px; font-weight: 700;
}
.kuji-hist-lo-badge {
display: inline-block; margin-top: 5px;
font-size: 10px; font-weight: 900; color: #b45309;
background: #fffbeb;
border: 1.5px solid rgba(245,158,11,.4);
border-radius: 999px; padding: 2px 10px;
}
/* 쿠지 내역 카드 하단 푸터 */
.kuji-hist-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 18px 12px;
border-top: 1px solid rgba(99,102,241,.1);
gap: 8px;
}
.kuji-hist-deliv-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 800; border-radius: 999px;
padding: 4px 10px;
}
.kuji-hist-deliv-badge.ok {
background: #d1fae5; color: #065f46; border: 1.5px solid #6ee7b7;
}
.kuji-hist-deliv-badge.no {
background: #fee2e2; color: #991b1b; border: 1.5px solid #fca5a5;
}
.kuji-hist-addr-btn {
flex-shrink: 0;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff; border: none; padding: 6px 14px; border-radius: 8px;
font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit;
box-shadow: 0 2px 8px rgba(99,102,241,.3);
transition: filter .15s, transform .1s;
}
.kuji-hist-addr-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
/* ══ 쿠지 구매내역 v2 — 리디자인 ══ */
/* 카드 헤더: 아이콘+제목 / 메타정보 세로 배치 */
.kuji-hist-inner { flex-direction: column; align-items: stretch; gap: 0; padding: 16px 16px 12px; }
.kh-header { display:flex; align-items:center; gap:10px; }
.kh-thumb {
width:52px; height:52px; border-radius:12px; flex-shrink:0;
object-fit:cover; border:2px solid rgba(99,102,241,.25);
box-shadow:0 3px 10px rgba(99,102,241,.15);
}
.kh-thumb-ph {
width:52px; height:52px; border-radius:12px; flex-shrink:0;
background:linear-gradient(135deg,#eef2ff,#f5f3ff);
border:2px solid rgba(99,102,241,.2);
display:flex; align-items:center; justify-content:center; font-size:24px;
}
.kh-title-wrap { flex:1; min-width:0; }
.kh-title {
font-size:15px; font-weight:900; color:#1e1b4b;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kh-meta-row {
display:flex; gap:10px; margin-top:8px; flex-wrap:wrap;
}
.kh-meta-chip {
display:inline-flex; align-items:center; gap:4px;
background:#f1f5ff; border:1.5px solid rgba(99,102,241,.15);
border-radius:8px; padding:4px 10px;
font-size:11.5px; font-weight:800; color:#4338ca;
white-space:nowrap;
}
.kh-meta-chip .kh-mc-label { color:#64748b; font-weight:600; margin-right:2px; }
/* 상품 그리드: 모바일 2열 / PC 6열 */
.kh-items-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 모바일 기본 2열 */
gap: 8px;
margin-top: 12px;
}
.kh-item-cell {
display: flex; flex-direction: column;
background: #f8faff;
border: 1.5px solid rgba(99,102,241,.15);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: border-color .15s, transform .12s, box-shadow .15s;
}
.kh-item-cell:hover { border-color:rgba(99,102,241,.4); transform:translateY(-2px); box-shadow:0 6px 18px rgba(99,102,241,.12); }
/* 라스트원 셀 - 골드 테두리 강조 */
.kh-item-cell.is-lastone { border-color:#fbbf24; background:linear-gradient(160deg,#fffbeb 0%,#fef3c7 100%); }
.kh-item-cell.is-lastone:hover { border-color:#f59e0b; box-shadow:0 6px 18px rgba(251,191,36,.25); }
/* 이미지 래퍼 — relative로 배지 오버레이 기준 */
.kh-item-img-wrap {
position: relative;
width:100%; aspect-ratio:1/1; overflow:hidden; background:#e5e7eb; flex-shrink:0;
}
.kh-item-img-wrap img {
width:100%; height:100%; object-fit:cover; display:block;
}
.kh-item-img-ph {
width:100%; height:100%;
background:linear-gradient(135deg,#eef2ff,#f5f3ff);
display:flex; align-items:center; justify-content:center; font-size:28px;
}
/* 라스트원 플레이스홀더 - 골드 배경 */
.kh-item-img-ph.lo-ph {
background: linear-gradient(135deg,#fef3c7,#fde68a);
font-size: 32px;
}
/* 이미지 위 왼쪽 상단 등급 배지 오버레이 */
.kh-item-badge-ov {
position: absolute; top: 5px; left: 5px; z-index: 2;
font-size: 9px; font-weight: 900; line-height: 1.4;
border-radius: 5px; padding: 1px 6px;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.kh-item-badge-ov.ga { background:#fef3c7; color:#92400e; border:1.5px solid #fcd34d; }
.kh-item-badge-ov.gb { background:#dbeafe; color:#1e40af; border:1.5px solid #93c5fd; }
.kh-item-badge-ov.gc { background:#d1fae5; color:#065f46; border:1.5px solid #6ee7b7; }
.kh-item-badge-ov.gd { background:#f3f4f6; color:#374151; border:1.5px solid #d1d5db; }
.kh-item-badge-ov.glo { background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#fff; border:1.5px solid #d97706; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.kh-item-badge-ov.gother { background:#eef2ff; color:#4338ca; border:1.5px solid rgba(99,102,241,.3); }
/* 하단 정보 바: 피규어명(왼) + 수량(오른) */
.kh-item-info {
padding: 5px 7px 6px;
display: flex; flex-direction: row; align-items: center;
gap: 4px; flex-wrap: nowrap; min-width: 0;
}
/* 하위 호환 badge 클래스 (info 내부) */
.kh-item-badge {
display:inline-block; font-size:9.5px; font-weight:900;
border-radius:5px; padding:1px 6px; line-height:1.5;
flex-shrink: 0; white-space: nowrap;
}
.kh-item-badge.ga { background:#fef3c7; color:#92400e; border:1.5px solid #fcd34d; }
.kh-item-badge.gb { background:#dbeafe; color:#1e40af; border:1.5px solid #93c5fd; }
.kh-item-badge.gc { background:#d1fae5; color:#065f46; border:1.5px solid #6ee7b7; }
.kh-item-badge.gd { background:#f3f4f6; color:#374151; border:1.5px solid #d1d5db; }
.kh-item-badge.glo { background:#fffbeb; color:#b45309; border:1.5px solid #fbbf24; }
.kh-item-badge.gother { background:#eef2ff; color:#4338ca; border:1.5px solid rgba(99,102,241,.3); }
.kh-item-name {
font-size:11px; font-weight:800; color:#1e1b4b; line-height:1.3;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
flex: 1; min-width: 0;
}
.kh-item-cnt {
font-size:10px; font-weight:700; color:#6366f1;
flex-shrink: 0; white-space: nowrap;
}
/* 오른쪽 상단 반납 상태 뱃지 */
.kh-item-return-ov {
position: absolute; top: 5px; right: 5px; z-index: 3;
font-size: 9px; font-weight: 800; line-height: 1.4;
border-radius: 5px; padding: 1px 6px;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0,0,0,.22);
pointer-events: none;
}
.kh-item-return-ov.rv-all { background:#ef4444; color:#fff; border:1.5px solid #dc2626; }
.kh-item-return-ov.rv-part { background:#f97316; color:#fff; border:1.5px solid #ea580c; opacity:0.88; }
/* 반납된 셀 전체 흐리게 */
.kh-item-cell.is-returned { opacity: 0.62; }
/* ══ 구매내역 상단 안내 배너 ══ */
.kh-notice-banner {
display: flex; align-items: flex-start; gap: 10px;
background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
border: 1.5px solid #bfdbfe;
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 14px;
font-size: 13px; line-height: 1.6; color: #1e40af;
}
.kh-notice-banner .kh-nb-icon {
font-size: 20px; flex-shrink: 0; margin-top: 1px;
}
.kh-notice-banner .kh-nb-text strong {
display: block; font-size: 13.5px; font-weight: 700;
color: #1d4ed8; margin-bottom: 2px;
}
.kh-notice-banner .kh-nb-text span {
color: #3b82f6; font-size: 12.5px;
}
/* ══ 전체 상품 요약 카드 ══ */
.kh-summary-card {
background: #fff;
border: 1.5px solid rgba(99,102,241,.18);
border-radius: 14px;
padding: 14px 16px 12px;
margin-bottom: 16px;
box-shadow: 0 2px 10px rgba(99,102,241,.07);
}
.kh-summary-title {
font-size: 12px; font-weight: 700; color: #6366f1;
letter-spacing: .04em; text-transform: uppercase;
margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.kh-summary-title::before {
content: ''; display: inline-block;
width: 3px; height: 13px; border-radius: 2px;
background: linear-gradient(180deg,#6366f1,#818cf8);
}
.kh-summary-grid {
display: flex; flex-wrap: wrap; gap: 7px;
}
.kh-summary-chip {
display: inline-flex; align-items: center; gap: 5px;
background: #f8faff; border: 1.5px solid rgba(99,102,241,.18);
border-radius: 20px; padding: 4px 11px 4px 8px;
font-size: 12.5px; font-weight: 600; color: #374151;
white-space: nowrap;
}
.kh-summary-chip .kh-sc-rank {
font-size: 11px; font-weight: 800; padding: 1px 6px;
border-radius: 4px; line-height: 1.4;
}
.kh-summary-chip .kh-sc-rank.ga { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.kh-summary-chip .kh-sc-rank.gb { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
.kh-summary-chip .kh-sc-rank.gc { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.kh-summary-chip .kh-sc-rank.gd { background:#f3f4f6; color:#374151; border:1px solid #d1d5db; }
.kh-summary-chip .kh-sc-rank.glo { background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#fff; border:1px solid #d97706; }
.kh-summary-chip .kh-sc-rank.gother { background:#eef2ff; color:#4338ca; border:1px solid rgba(99,102,241,.3); }
.kh-summary-chip .kh-sc-cnt { font-size: 13px; font-weight: 800; color: #111827; }
.kh-summary-chip .kh-sc-unit { font-size: 11px; color: #6b7280; font-weight: 500; }
.kh-summary-total {
margin-top: 10px; padding-top: 9px;
border-top: 1px dashed rgba(99,102,241,.15);
font-size: 12px; color: #6b7280;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kh-summary-total strong { color: #111827; font-weight: 700; }
/* PC: 6열 + 글자·뱃지 크기 업 */
@media(min-width:700px){
.kh-items-grid { grid-template-columns: repeat(6, 1fr); gap:10px; }
.kh-item-badge-ov { font-size:10.5px; padding:2px 7px; top:6px; left:6px; }
.kh-item-badge { font-size:11px; padding:2px 8px; }
.kh-item-name { font-size:12.5px; }
.kh-item-cnt { font-size:11.5px; }
.kh-item-img-ph{ font-size:34px; }
.kh-item-img-ph.lo-ph { font-size:38px; }
.kh-item-info { padding:6px 10px 7px; gap:5px; }
.kh-title { font-size:17px; }
.kh-meta-chip { font-size:13px; padding:5px 12px; }
.kh-thumb, .kh-thumb-ph { width:62px; height:62px; }
}
/* 상세 모달 오버레이 */
#khDetailModal {
display:none; position:fixed; inset:0; z-index:10001;
background:rgba(5,7,20,.82); backdrop-filter:blur(10px);
align-items:center; justify-content:center;
padding:0 16px; box-sizing:border-box;
}
#khDetailModal.open { display:flex; }
.khd-sheet {
width:100%; max-width:560px;
background:#fff; border-radius:24px;
overflow:hidden; display:flex; flex-direction:column;
/* 화면 세로 60% 고정 */
height: 60vh; max-height: 60vh;
animation: khdSlideUp .28s cubic-bezier(.22,.61,.36,1);
box-sizing:border-box;
}
@keyframes khdSlideUp { from{transform:translateY(20px);opacity:.5} to{transform:translateY(0);opacity:1} }
.khd-handle {
display: none; /* 바텀시트 핸들 — 중앙 모달에서 불필요 */
}
.khd-header {
display:flex; align-items:center; justify-content:space-between;
padding:14px 18px 10px; border-bottom:1px solid rgba(99,102,241,.12);
flex-shrink:0;
}
.khd-title {
font-size:15px; font-weight:900; color:#1e1b4b;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;
}
.khd-sub { font-size:11px; color:#64748b; font-weight:600; margin-top:2px; }
.khd-close {
width:32px; height:32px; border-radius:50%; border:none;
background:#f1f5ff; color:#6366f1; font-size:16px;
cursor:pointer; flex-shrink:0; font-family:inherit;
display:flex; align-items:center; justify-content:center;
}
.khd-body {
flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
padding:14px 16px 20px;
overscroll-behavior:contain;
}
/* 모달 내 태그 목록: 4열 그리드 */
.khd-tag-grid {
display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.khd-tag {
display:flex; flex-direction:column; align-items:center;
background:#eef2ff; border:1.5px solid rgba(99,102,241,.25);
border-radius:10px; padding:6px 4px 5px; gap:2px; min-width:0;
}
.khd-tag-num { font-size:10px; font-weight:900; color:#6366f1; }
.khd-tag-name {
font-size:10px; font-weight:700; color:#1e1b4b; text-align:center;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
width:100%; max-width:100%;
}
.khd-tag-lo {
display:flex; flex-direction:column; align-items:center;
background:linear-gradient(135deg,#fffbeb,#fef3c7);
border:1.5px solid rgba(245,158,11,.4);
border-radius:10px; padding:6px 4px 5px; gap:2px; grid-column:span 2;
}
.khd-tag-lo-ico { font-size:14px; }
.khd-tag-lo-name {
font-size:10px; font-weight:800; color:#b45309; text-align:center;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%;
}
/* 반납하기 버튼 */
.kuji-hist-return-btn {
flex-shrink: 0;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff; border: none; padding: 6px 14px; border-radius: 8px;
font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit;
box-shadow: 0 2px 8px rgba(245,158,11,.3);
transition: filter .15s, transform .1s;
}
.kuji-hist-return-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.kuji-hist-return-btn:disabled {
background: linear-gradient(135deg, #d1d5db, #9ca3af);
color: #fff; cursor: not-allowed; opacity: .7;
box-shadow: none; transform: none; filter: none;
}
/* 반납됨 배지 */
.kuji-hist-deliv-badge.returned {
background: #fff7ed; color: #92400e; border: 1.5px solid #fcd34d;
}
/* footer 버튼 묶음 */
.kuji-hist-footer-btns {
display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
/* 배송지 입력 모달 */
#kujiHistDelivModal {
display: none; position: fixed; inset: 0; z-index: 9999;
background: rgba(5,7,20,.85); backdrop-filter: blur(12px);
align-items: center; justify-content: center; padding: 16px;
}
#kujiHistDelivModal.open { display: flex; }
#kujiHistDelivModal .khdm-card {
background: #fff; border-radius: 20px; width: 100%; max-width: 440px;
max-height: 90vh; overflow-y: auto;
box-shadow: 0 24px 80px rgba(0,0,0,.5);
animation: portoneModalIn .3s cubic-bezier(.22,.61,.36,1);
}
#kujiHistDelivModal .khdm-header {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
padding: 20px 20px 16px; border-radius: 20px 20px 0 0;
display: flex; align-items: center; justify-content: space-between;
}
#kujiHistDelivModal .khdm-title {
font-size: 17px; font-weight: 900; color: #fff; letter-spacing: -.02em;
}
#kujiHistDelivModal .khdm-close {
background: rgba(255,255,255,.2); border: none; color: #fff;
width: 30px; height: 30px; border-radius: 50%; font-size: 16px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
font-weight: 700; transition: background .15s;
}
#kujiHistDelivModal .khdm-close:hover { background: rgba(255,255,255,.35); }
#kujiHistDelivModal .khdm-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
#kujiHistDelivModal .khdm-field-label {
font-size: 11px; font-weight: 800; color: #374151; margin-bottom: 6px;
text-transform: uppercase; letter-spacing: .04em;
}
#kujiHistDelivModal .khdm-input {
width: 100%; box-sizing: border-box; background: #f8fafc;
border: 2px solid #e2e8f0; border-radius: 10px; padding: 11px 12px;
color: #111827; font-size: 14px; font-weight: 600; font-family: inherit;
outline: none; transition: border-color .18s, box-shadow .18s;
}
#kujiHistDelivModal .khdm-input:focus {
border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); background: #fff;
}
#kujiHistDelivModal .khdm-submit {
width: 100%; background: linear-gradient(135deg, #10b981, #059669);
color: #fff; border: none; padding: 14px; border-radius: 12px;
font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
box-shadow: 0 3px 12px rgba(16,185,129,.35);
transition: transform .15s, box-shadow .15s;
}
#kujiHistDelivModal .khdm-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(16,185,129,.45); }
/* ══ 반납 선택 모달 ══ */
#kujiReturnModal {
display: none; position: fixed; inset: 0; z-index: 9000;
background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
align-items: center; justify-content: center;
padding: 0 16px;
box-sizing: border-box;
}
#kujiReturnModal.open { display: flex; }
#kujiReturnModal .krm-card {
background: #fff; border-radius: 22px; width: 100%; max-width: 560px;
box-shadow: 0 24px 64px rgba(0,0,0,.28);
/* overflow:hidden 제거 — body 내부 스크롤을 막지 않도록 */
height: 60vh; max-height: 60vh;
display: flex; flex-direction: column;
box-sizing: border-box;
overflow: hidden; /* border-radius 클리핑용 — 내부는 krm-body가 스크롤 */
}
#kujiReturnModal .krm-header {
background: linear-gradient(135deg,#ef4444,#f97316);
padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
#kujiReturnModal .krm-title { color:#fff; font-size:16px; font-weight:800; letter-spacing:-.3px; }
#kujiReturnModal .krm-title-count { font-size:12px; font-weight:600; opacity:.85; margin-left:6px; }
#kujiReturnModal .krm-close {
background: rgba(255,255,255,.2); border: none; color: #fff;
width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
font-size: 14px; font-weight: 800; display:flex; align-items:center; justify-content:center;
transition: background .15s;
}
#kujiReturnModal .krm-close:hover { background: rgba(255,255,255,.35); }
#kujiReturnModal .krm-body { padding: 12px 14px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
#kujiReturnModal .krm-notice {
background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: 12px;
padding: 10px 12px; font-size: 11.5px; color: #92400e; line-height: 1.6; flex-shrink: 0;
}
/* ── 등급 그룹 ── */
#kujiReturnModal .krm-grade-group { display: flex; flex-direction: column; gap: 6px; }
#kujiReturnModal .krm-grade-header {
display: flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, #1e293b, #334155);
border-radius: 12px; padding: 8px 12px;
position: relative; overflow: hidden;
}
#kujiReturnModal .krm-grade-header::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, transparent 60%);
pointer-events: none;
}
#kujiReturnModal .krm-grade-img {
width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
flex-shrink: 0; border: 1.5px solid rgba(255,255,255,.18);
background: #334155;
}
#kujiReturnModal .krm-grade-img-ph {
width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
background: linear-gradient(135deg,#475569,#334155);
display: flex; align-items: center; justify-content: center;
font-size: 16px; border: 1.5px solid rgba(255,255,255,.15);
}
/* PC: 이미지·등급명·상품명·개수 가로 한 줄 */
#kujiReturnModal .krm-grade-info {
flex: 1; min-width: 0;
display: flex; flex-direction: row; align-items: center; gap: 6px;
overflow: hidden;
}
#kujiReturnModal .krm-grade-name { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -.2px; white-space: nowrap; flex-shrink: 0; }
#kujiReturnModal .krm-grade-prize { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
#kujiReturnModal .krm-grade-sub { font-size: 11px; color: rgba(255,255,255,.6); white-space: nowrap; flex-shrink: 0; }
/* 등급별 헤더 컬러 */
#kujiReturnModal .krm-grade-header.grade-a { background: linear-gradient(135deg,#b45309,#d97706); }
#kujiReturnModal .krm-grade-header.grade-b { background: linear-gradient(135deg,#7c3aed,#a855f7); }
#kujiReturnModal .krm-grade-header.grade-c { background: linear-gradient(135deg,#0369a1,#0ea5e9); }
#kujiReturnModal .krm-grade-header.grade-d { background: linear-gradient(135deg,#166534,#16a34a); }
#kujiReturnModal .krm-grade-header.grade-last { background: linear-gradient(135deg,#9f1239,#e11d48); }
#kujiReturnModal .krm-grade-header.grade-other { background: linear-gradient(135deg,#1e293b,#475569); }
/* 전체선택 버튼 */
#kujiReturnModal .krm-select-all-btn {
background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
color: #fff; border-radius: 8px; padding: 4px 10px;
font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
flex-shrink: 0; transition: background .15s; font-family: inherit;
}
#kujiReturnModal .krm-select-all-btn:hover { background: rgba(255,255,255,.28); }
#kujiReturnModal .krm-select-all-btn.all-selected { background: rgba(255,255,255,.32); }
/* ── 등급 그룹 컨테이너 (기본/PC) — 수직 스택 ── */
#kujiReturnModal .krm-grade-list { display: flex; flex-direction: column; gap: 12px; width: 100%; box-sizing: border-box; }
/* ── 아이템 2열 그리드 (기본/PC) ── */
#kujiReturnModal .krm-item-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; box-sizing: border-box; overflow: hidden; }
#kujiReturnModal .krm-item {
display: flex; align-items: center; gap: 8px;
background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 11px;
padding: 9px 10px; cursor: pointer; transition: border-color .12s, background .12s;
min-width: 0; box-sizing: border-box; overflow: hidden;
}
#kujiReturnModal .krm-item:hover { border-color: #ef4444; background: #fff5f5; }
#kujiReturnModal .krm-item.selected { border-color: #ef4444; background: #fff5f5; box-shadow: 0 0 0 2px rgba(239,68,68,.12); }
#kujiReturnModal .krm-item input[type=checkbox] { width:15px; height:15px; accent-color:#ef4444; cursor:pointer; flex-shrink:0; }
#kujiReturnModal .krm-item-num { font-size:10.5px; color:#94a3b8; font-weight:700; white-space:nowrap; }
#kujiReturnModal .krm-item-name { font-size:11.5px; color:#1e293b; font-weight:700; word-break:keep-all; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
#kujiReturnModal .krm-empty { text-align:center; padding:24px 0; color:#64748b; font-size:13px; }
/* ━━━ 모바일 전용 (max-width:699px) ━━━ */
@media (max-width: 699px) {
/* ① 카드: 화면 60vh, 세로 flex */
#kujiReturnModal .krm-card {
width: calc(100vw - 32px); max-width: calc(100vw - 32px);
height: 60vh; max-height: 60vh;
display: flex; flex-direction: column;
box-sizing: border-box;
}
/* ② body: 남은 공간 모두 차지 + 세로 스크롤 */
#kujiReturnModal .krm-body {
flex: 1 1 0; min-height: 0;
overflow-y: scroll; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 10px 12px 20px;
box-sizing: border-box;
display: flex; flex-direction: column; gap: 12px;
}
/* ③ 등급 그룹 컨테이너: 수직 스택 */
#kujiReturnModal .krm-grade-list {
display: flex; flex-direction: column; gap: 12px;
width: 100%; box-sizing: border-box;
}
/* ④ 등급 그룹 하나: 헤더 + 아이템 리스트 수직 배치 */
#kujiReturnModal .krm-grade-group {
display: flex; flex-direction: column; gap: 0;
width: 100%; box-sizing: border-box;
border-radius: 14px; overflow: hidden;
border: 1.5px solid rgba(0,0,0,.07);
}
/* ⑤ 등급 헤더: [이미지] [등급명 · N개] ────── [전체선택] */
#kujiReturnModal .krm-grade-header {
display: flex; flex-direction: row; align-items: center;
gap: 10px; padding: 11px 14px;
width: 100%; box-sizing: border-box;
border-radius: 0; flex-shrink: 0;
}
#kujiReturnModal .krm-grade-img {
width: 38px; height: 38px; min-width: 38px; flex-shrink: 0;
border-radius: 9px; object-fit: cover;
border: 1.5px solid rgba(255,255,255,.25);
}
#kujiReturnModal .krm-grade-img-ph {
width: 38px; height: 38px; min-width: 38px; flex-shrink: 0;
border-radius: 9px; font-size: 18px;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid rgba(255,255,255,.2);
}
/* 등급명·상품명·개수: 가로 한 줄 */
#kujiReturnModal .krm-grade-info {
flex: 1; min-width: 0;
display: flex; flex-direction: row; align-items: center; gap: 5px;
overflow: hidden;
}
#kujiReturnModal .krm-grade-name {
font-size: 14px; font-weight: 900; color: #fff; line-height: 1;
white-space: nowrap; flex-shrink: 0;
}
/* 대표 상품명 */
#kujiReturnModal .krm-grade-prize {
font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
flex: 1; min-width: 0;
}
#kujiReturnModal .krm-grade-sub {
font-size: 12px; color: rgba(255,255,255,.65); font-weight: 600;
white-space: nowrap; margin-top: 0; flex-shrink: 0;
}
/* 전체선택 버튼: 맨 오른쪽 */
#kujiReturnModal .krm-select-all-btn {
margin-left: auto; flex-shrink: 0;
padding: 5px 13px; font-size: 12px; font-weight: 700;
border-radius: 8px;
background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.45);
color: #fff; white-space: nowrap;
}
/* ⑥ 아이템 리스트: 1열 세로 나열 */
#kujiReturnModal .krm-item-list {
display: flex; flex-direction: column;
gap: 0;
width: 100%; box-sizing: border-box;
background: #fff;
}
/* ⑦ 아이템 한 줄: [체크] [#번호] [상품명] 가로 배치 */
#kujiReturnModal .krm-item {
position: relative;
display: flex; flex-direction: row; align-items: center;
gap: 10px;
padding: 13px 14px;
min-height: 52px; box-sizing: border-box; width: 100%;
border-radius: 0;
border: none;
border-top: 1px solid #f1f5f9;
background: #fff;
}
/* 첫 번째 아이템 구분선 제거 */
#kujiReturnModal .krm-item:first-child {
border-top: none;
}
/* 체크박스 표시 */
#kujiReturnModal .krm-item input[type=checkbox] {
position: static;
opacity: 1; width: 18px; height: 18px;
accent-color: #ef4444;
flex-shrink: 0; cursor: pointer;
pointer-events: none;
}
/* #번호 */
#kujiReturnModal .krm-item-num {
font-size: 13px; font-weight: 800; color: #94a3b8;
white-space: nowrap; flex-shrink: 0;
}
/* 상품명 표시 (숨김 해제) */
#kujiReturnModal .krm-item-name {
display: block;
font-size: 14px; font-weight: 700; color: #1e293b;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 1; min-width: 0;
}
/* ⑧ 선택 상태: 초록 배경 + 체크 */
#kujiReturnModal .krm-item.selected {
background: #f0fdf4;
border-color: transparent;
}
#kujiReturnModal .krm-item.selected .krm-item-num { color: #16a34a; }
#kujiReturnModal .krm-item.selected .krm-item-name { color: #15803d; }
/* ⑨ 터치 hover 잔상 완전 차단 */
#kujiReturnModal .krm-item:hover { background: #f8fafc !important; border-color: transparent !important; }
#kujiReturnModal .krm-item:not(.selected):hover { background: #f8fafc !important; border-color: transparent !important; }
#kujiReturnModal .krm-item.selected:hover { background: #f0fdf4 !important; }
}
/* 터치 전용(실제 마우스 없는 기기): hover 완전 무력화 */
@media (max-width: 699px) and (hover: none) and (pointer: coarse) {
#kujiReturnModal .krm-item { -webkit-tap-highlight-color: transparent; }
#kujiReturnModal .krm-item:hover,
#kujiReturnModal .krm-item:not(.selected):hover {
background: #f8fafc !important;
border-color: transparent !important;
box-shadow: none !important;
}
#kujiReturnModal .krm-item.selected,
#kujiReturnModal .krm-item.selected:hover {
background: #f0fdf4 !important;
}
}
#kujiReturnModal .krm-footer {
padding: 12px 14px; border-top: 1px solid #f1f5f9; display:flex; gap:10px; flex-shrink: 0;
background: #fff;
}
#kujiReturnModal .krm-cancel {
flex:1; background:#f1f5f9; border:none; border-radius:12px; padding:13px;
font-size:14px; font-weight:700; color:#64748b; cursor:pointer; font-family:inherit;
transition: background .15s;
}
#kujiReturnModal .krm-cancel:hover { background:#e2e8f0; }
#kujiReturnModal .krm-submit {
flex:2; background:linear-gradient(135deg,#ef4444,#f97316); border:none; border-radius:12px;
padding:13px; font-size:14px; font-weight:800; color:#fff; cursor:pointer;
font-family:inherit; box-shadow:0 4px 14px rgba(239,68,68,.3);
transition: transform .15s, box-shadow .15s, opacity .15s;
}
#kujiReturnModal .krm-submit:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 20px rgba(239,68,68,.42); }
#kujiReturnModal .krm-submit:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
/* ══ 경매 섹션 - 게임형 고급 디자인 ══ */
.auction-pro{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:20px; align-items:start; }
@media (max-width:1000px){ .auction-pro{ grid-template-columns:1fr } }
/* 경매 왼쪽 히어로 */
.hero{
position:relative; border-radius:22px; overflow:hidden;
background:#0a0a1a;
border:1.5px solid rgba(99,102,241,.35);
box-shadow:
0 0 0 1px rgba(99,102,241,.12),
0 20px 60px rgba(0,0,0,.55),
0 0 80px rgba(99,102,241,.12);
aspect-ratio: 1 / 1; /* ✅ 정사각형 고정 */
}
.hero img{
width:100%; height:100%; display:block; object-fit:cover;
opacity:.88;
filter: contrast(1.05) saturate(1.1);
position:absolute; inset:0;
}
.hero::after{
content:''; display:block; padding-bottom:100%; /* 정사각형 1:1 비율 */
}
/* 히어로 상단 글로우 라인 */
.hero::before{
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, transparent, #6366f1, #a78bfa, #6366f1, transparent);
z-index:2;
animation: aucTopLine 3s linear infinite;
}
@keyframes aucTopLine{
0%{ background-position:0% 0%; }
100%{ background-position:200% 0%; }
}
/* 글라스 패널 - 다크 테마 */
.hero-glass{
position:absolute; left:12px; right:12px; bottom:12px;
backdrop-filter: blur(18px) saturate(1.8);
background:rgba(10,10,26,.72);
border:1px solid rgba(99,102,241,.30);
border-radius:16px; padding:14px 16px;
display:flex; flex-wrap:wrap; gap:10px; align-items:center;
box-shadow:0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-title{
font-weight:900; font-size:17px; margin-right:auto;
display:flex; gap:8px; align-items:center; flex-wrap:wrap;
color:#f1f5f9;
text-shadow: 0 0 20px rgba(139,92,246,.5);
}
.hero .pill{ padding:5px 12px; font-weight:800; border-radius:999px; font-size:12px; }
/* 배지 색상 */
.pill.running{
background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(52,211,153,.15));
color:#6ee7b7; border:1px solid rgba(52,211,153,.4);
animation: aucRunPulse 1.8s ease-in-out infinite;
box-shadow:0 0 12px rgba(52,211,153,.25);
}
@keyframes aucRunPulse{
0%,100%{ box-shadow:0 0 8px rgba(52,211,153,.25); }
50%{ box-shadow:0 0 20px rgba(52,211,153,.55); }
}
.pill.ready{ background:rgba(250,204,21,.15); color:#fde68a; border:1px solid rgba(250,204,21,.35); }
.pill.ended{ background:rgba(239,68,68,.15); color:#fca5a5; border:1px solid rgba(239,68,68,.30); }
.pill-deadline{
background:rgba(245,158,11,.14); color:#fcd34d;
border:1px solid rgba(245,158,11,.35);
font-variant-numeric:tabular-nums;
}
.pill-deadline b{ font-variant-numeric:tabular-nums; letter-spacing:.04em; }
/* 통계 패널 */
.stats{ color:#e2e8f0; font-weight:700; }
.stats strong{ font-weight:900; color:#fff; }
.stats-compact{
margin-top:10px;
display:grid; grid-template-columns:1fr 1fr; gap:8px 12px;
width:100%;
}
.stats-compact .stat{
display:flex; align-items:center; gap:8px;
padding:10px 13px; border-radius:12px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.stats-compact .stat .label{
font-weight:700; color:rgba(148,163,184,.85);
font-size:12px; letter-spacing:.04em;
}
.stats-compact .stat strong{
font-weight:900; color:#f1f5f9; font-size:16px;
text-shadow:0 0 12px rgba(139,92,246,.4);
}
/* 현재가 강조 */
#aucCurrent{
font-size:20px !important; color:#fde68a !important;
text-shadow:0 0 18px rgba(250,204,21,.55) !important;
animation: aucPricePulse 2s ease-in-out infinite;
}
@keyframes aucPricePulse{
0%,100%{ text-shadow:0 0 10px rgba(250,204,21,.45); }
50%{ text-shadow:0 0 28px rgba(250,204,21,.9); }
}
.stats-compact .span2{ grid-column: 1 / span 2; }
/* 입찰 버튼 - 게임형 */
.bid-buttons{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.bid-buttons.pro{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; width:100%; }
.bid-btn{
appearance:none; border:0; cursor:pointer;
flex:1; min-width:90px;
padding:13px 16px; border-radius:14px;
font-weight:900; font-size:15px; letter-spacing:.01em;
display:flex; align-items:center; justify-content:center;
line-height:1;
position:relative; overflow:hidden;
background:linear-gradient(160deg, #4338ca 0%, #6366f1 50%, #7c3aed 100%);
color:#fff;
border:1px solid rgba(139,92,246,.45);
box-shadow:
0 0 0 1px rgba(139,92,246,.20),
0 6px 20px rgba(99,102,241,.45),
inset 0 1px 0 rgba(255,255,255,.18);
transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
text-shadow:0 1px 4px rgba(0,0,0,.4);
user-select:none;
}
.bid-btn::before{
content:'';
position:absolute; top:0; left:-100%; width:60%; height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
transition:left .4s ease;
}
.bid-btn:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:
0 0 0 1px rgba(139,92,246,.35),
0 12px 32px rgba(99,102,241,.65),
inset 0 1px 0 rgba(255,255,255,.22);
filter:brightness(1.08);
}
.bid-btn:hover::before{ left:150%; }
.bid-btn:active{
transform:translateY(1px) scale(.97);
box-shadow:
0 0 0 1px rgba(139,92,246,.5),
0 2px 8px rgba(99,102,241,.5),
inset 0 3px 8px rgba(0,0,0,.25);
filter:brightness(.95);
}
.bid-btn[disabled]{
background:linear-gradient(160deg,#1e293b,#334155);
color:#475569; border-color:rgba(255,255,255,.06);
box-shadow:none; cursor:not-allowed; filter:none; transform:none;
}
/* 새로고침 버튼 */
.ghost-btn{
appearance:none; cursor:pointer;
padding:12px 16px; border-radius:12px;
background:rgba(255,255,255,.05);
border:1px dashed rgba(148,163,184,.35);
color:#94a3b8; font-weight:800; font-size:13px;
transition:all .15s ease;
display:inline-flex; align-items:center; justify-content:center;
line-height:1;
}
.ghost-btn:hover{
border-color:rgba(148,163,184,.6); color:#e2e8f0;
background:rgba(255,255,255,.08);
transform:translateY(-1px);
}
.ghost-btn:active{ background:rgba(255,255,255,.12); transform:translateY(0); }
/* 입찰 이펙트 레이어 */
#bidFxLayer{
position:fixed; inset:0; pointer-events:none; z-index:9999;
overflow:hidden;
}
.bid-fx-ring{
position:absolute; border-radius:50%;
border:3px solid rgba(99,102,241,.9);
animation:bidRingOut .7s ease-out forwards;
pointer-events:none;
}
@keyframes bidRingOut{
0%{ transform:scale(0); opacity:1; }
100%{ transform:scale(4); opacity:0; }
}
.bid-fx-num{
position:absolute;
font-weight:900; font-size:22px; color:#fde68a;
text-shadow:0 0 16px rgba(250,204,21,.8), 0 2px 6px rgba(0,0,0,.6);
animation:bidNumFloat .9s ease-out forwards;
pointer-events:none; white-space:nowrap;
}
@keyframes bidNumFloat{
0%{ transform:translateY(0) scale(.8); opacity:1; }
60%{ transform:translateY(-60px) scale(1.15); opacity:1; }
100%{ transform:translateY(-100px) scale(1); opacity:0; }
}
/* 현재가 갱신 플래시 */
.price-flash{
animation:priceFlash .5s ease-out;
}
@keyframes priceFlash{
0%{ background:rgba(250,204,21,.35); border-radius:8px; }
100%{ background:transparent; }
}
/* 최고입찰자 강조 */
#aucLeader{
color:#a78bfa !important;
text-shadow:0 0 12px rgba(167,139,250,.6) !important;
}
/* ══ 카카오톡 스타일 채팅 ══ */
.auction-and-chat{
display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px;
align-items:start; min-height:0;
}
.auction-and-chat .chat-card{
display:flex; flex-direction:column; box-sizing:border-box;
height:var(--chatH, 600px); min-height:0;
background:#b2c7da; /* 카카오 배경색 */
border-radius:18px;
overflow:hidden;
box-shadow:0 8px 28px rgba(0,0,0,.13);
border:none;
}
/* 채팅 헤더 */
.chat-head{
padding:13px 16px;
font-weight:900; font-size:15px; color:#1a1a1a;
background:linear-gradient(135deg,#3c1f6e,#512da8);
color:#fff;
display:flex; align-items:center; gap:8px;
border-radius:0;
flex-shrink:0;
}
/* chat-head 아이콘은 HTML에서 직접 지정 */
/* 채팅 바디 */
.auction-and-chat .chat-body{
flex:1 1 auto; min-height:0; overflow-y:auto;
padding:14px 12px;
background:#b2c7da;
display:flex; flex-direction:column; gap:6px;
}
/* 개별 메시지 */
.chat-msg{
display:flex; flex-direction:column; align-items:flex-start;
max-width:78%;
margin:0;
}
.chat-msg.me{ align-self:flex-end; align-items:flex-end; }
/* 닉네임 */
.chat-msg .nick{
font-size:11px; font-weight:700; color:#4b5563;
margin-bottom:2px; padding-left:2px;
}
.chat-msg.me .nick{ display:none; }
/* 말풍선 */
.chat-msg .bubble{
display:inline-block;
padding:9px 13px;
border-radius:18px 18px 18px 4px;
background:#f1f5f9;
font-size:13px; font-weight:600; color:#1a1a1a;
line-height:1.45;
box-shadow:0 1px 3px rgba(0,0,0,.08);
word-break:break-word;
max-width:100%;
}
.chat-msg.me .bubble{
border-radius:18px 18px 4px 18px;
background:#fee500; /* 카카오 노랑 */
color:#1a1a1a;
}
/* 시스템 메시지 */
.chat-system{
align-self:center;
font-size:11px; color:#fff;
background:rgba(0,0,0,.30);
border-radius:999px; padding:3px 12px;
font-weight:700; margin:2px 0;
}
/* 채팅 입력창 */
.chat-send{
display:flex; gap:8px; padding:10px 12px;
border-top:1px solid #f1f5f9;
background:#fafbff;
flex-shrink:0;
}
.chat-send .input{
flex:1 1 auto; padding:10px 14px;
border:1.5px solid #e2e8f0;
border-radius:22px;
font-size:14px; font-weight:600;
background:#fff;
color:#1a1a1a;
outline:none; transition:border-color .15s;
}
.chat-send .input:focus{ border-color:#6366f1; }
.chat-send .button.primary{
padding:10px 18px; border-radius:22px;
background:#fee500; color:#1a1a1a;
font-weight:800; font-size:14px; border:none;
cursor:pointer; transition:opacity .15s;
box-shadow:0 2px 8px rgba(0,0,0,.12);
white-space:nowrap;
display:inline-flex; align-items:center; justify-content:center;
line-height:1;
}
.chat-send .button.primary:hover{ opacity:.85; }
@keyframes bidShake{
0%{transform:translate(0,0);}
20%{transform:translate(-4px,2px);}
40%{transform:translate(4px,-2px);}
60%{transform:translate(-3px,1px);}
80%{transform:translate(3px,-1px);}
100%{transform:translate(0,0);}
}
/* 입찰 내역 행 애니메이션 */
@keyframes bidRowIn{
from{background:rgba(250,204,21,.22);transform:translateX(-8px);}
to{background:transparent;transform:translateX(0);}
}
#aucBidBody tr:first-child{
animation:bidRowIn .5s ease-out;
color:#fde68a;
}
#aucBidBody td{
padding:8px 12px;
border-bottom:1px solid rgba(255,255,255,.04);
color:#cbd5e1; font-size:13px; font-weight:600;
}
#aucBidBody tr:first-child td{ color:#fde68a; font-weight:800; }
/* 참여자 배지 */
.pcount-badge{
display:inline-flex; align-items:center; gap:5px;
font-size:12px; font-weight:700;
}
.pcount-dot{
width:7px;height:7px;border-radius:50%;
background:#34d399;
box-shadow:0 0 6px rgba(52,211,153,.8);
animation:pCountBlink 1.5s ease-in-out infinite;
}
@keyframes pCountBlink{
0%,100%{opacity:1;}50%{opacity:.4;}
}
.subtle{ color:#6b7280; font-size:13px; }
.hidden{ display:none !important; }
@media (max-width:1024px){
.auction-and-chat{ grid-template-columns:1fr; }
.auction-and-chat .chat-card{ height:420px; }
}
@media (max-width:560px){
body{ font-size:16px; -webkit-text-size-adjust:100%; }
/* ── 공통 좌우 여백 4px — 모든 탭 카드/목록이 화면에 꽉 차게 ── */
.wrap{ max-width:100%; padding:0 0 20px; }
/* 탭바 모바일: 완전 숨김 — 하단 바텀 네비로 탭 전환 */
.lk-tabbar { display:none !important; }
.tabs{ display:none !important; }
.toolbar{ justify-content:stretch; padding:0 2px; }
.select{ width:100%; padding:10px 12px; font-size:16px; }
/* 섹션 내부 좌우 패딩 0 (wrap 4px이 외부 여백 담당)
goodsSection/auctionSection/eventSection은 wrap 바깥 → 별도 4px 룰 적용 */
#historySection, #couponListSection,
#pointPullSection, #profileSection{ padding-left:0 !important; padding-right:0 !important; }
/* OnlineKuji 내부 컴포넌트 */
.ok-charge-bar{ padding-left:4px !important; padding-right:4px !important; margin-left:0 !important; margin-right:0 !important; }
.ok-filter-row{ margin-left:0 !important; margin-right:0 !important; gap:4px !important; }
.ok-detail-header{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
.ok-select-bar{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
.ok-queue-wrapper{ padding-left:0 !important; padding-right:0 !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }
.ok-queue-set-info{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
.ok-queue-set-desc-wrap{ margin-left:0 !important; margin-right:0 !important; }
/* 프로필 */
.pf-wrap{ padding-left:0 !important; padding-right:0 !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }
/* 이벤트 섹션 */
.ev-hero{ padding-left:0 !important; padding-right:0 !important; }
.ev-rank-panel{ padding-left:0 !important; padding-right:0 !important; }
.ev-rank-header{ padding-left:0 !important; padding-right:0 !important; }
.ev-rank-cols{ padding-left:0 !important; padding-right:0 !important; }
/* 상품 그리드 */
.shop-grid{ grid-template-columns:repeat(2,1fr) !important; width:100%; gap:3px; padding:0 !important; margin:0 !important; }
.product{ width:100%; border-radius:10px; }
.img-wrapper{ aspect-ratio:3/4; }
/* 상품 이름/가격 텍스트 */
.product-name{ font-size:12px; margin:5px 5px 2px; font-weight:900; color:#0f172a; }
.price,.stock{ margin:2px 5px; font-size:11px; font-weight:700; }
.card-actions{ margin:4px 5px 5px; }
.buy-button{ padding:8px 6px; font-size:12px; font-weight:800; border-radius:9px; }
/* 모바일 테이블 */
table.history{ display:table; font-size:12px; width:100%; min-width:420px; border-radius:0; }
table.history th, table.history td{ padding:7px 6px; white-space:nowrap; font-size:11px; }
.tbl-scroll{ overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
input, textarea, select, button{ font-size:16px; }
/* ok-set-card 모바일: 아래 @media(max-width:768px) 블록에서 처리 */
/* 온라인쿠지 세트 그리드 - 2열 */
.ok-set-grid{ grid-template-columns:repeat(2,1fr) !important; gap:3px !important; padding:0 8px 20px !important; margin:0 !important; }
/* 경매 - 단일 컬럼 스택, 이미지+입찰 오버레이 */
.auction-and-chat{ display:flex !important; flex-direction:column !important; gap:8px !important; padding:0 !important; }
.auction-pro{ padding:0 !important; }
/* 경매+채팅+내역 모두 동일 좌우 여백 0 (섹션의 4px 패딩 활용) */
.auction-left, .auction-right, #aucBidHistoryBox{
margin-left:0 !important; margin-right:0 !important;
width:100% !important; box-sizing:border-box !important;
}
/* 경매 히어로: 이미지를 꽉 채우고 glass 오버레이 */
.auction-left .hero{
aspect-ratio:unset !important; min-height:0 !important;
height:auto !important; border-radius:14px; position:relative !important;
}
.auction-left .hero img{
position:relative !important; inset:unset !important;
width:100% !important; height:220px !important;
object-fit:cover !important; display:block !important;
border-radius:14px 14px 0 0;
}
.auction-left .hero::after{ display:none !important; }
/* hero-glass: 이미지 바로 아래 정보+버튼 패널 */
.hero-glass{
position:relative !important; inset:unset !important;
border-radius:0 0 14px 14px !important;
background:rgba(10,6,28,.93) !important;
padding:10px 12px 12px !important;
gap:8px !important;
}
.hero-title{ font-size:13px; gap:4px; flex-wrap:wrap; }
/* 입찰 버튼 3개 나란히 + 새로고침 */
.bid-buttons.pro{ display:grid !important; grid-template-columns:1fr 1fr 1fr auto !important; gap:5px !important; width:100% !important; }
.bid-buttons.pro .bid-btn{ padding:10px 4px !important; font-size:12px !important; border-radius:10px !important; }
.bid-buttons.pro .ghost-btn{ padding:10px 8px !important; font-size:14px !important; }
/* 채팅 패널 */
.auction-and-chat .chat-card{ height:280px !important; border-radius:12px; }
.chat-head{ padding:9px 12px; font-size:13px; }
/* 모바일 입찰내역 박스 */
#aucBidHistoryBox{ border-radius:12px !important; margin-top:0 !important; width:100% !important; box-sizing:border-box !important; }
/* ══ 온라인쿠지 컨테이너 여백 제거 ══ */
/* ok-hero-banner 모바일: 새 스타일 블록에서 처리 */
.ok-charge-bar{ padding:8px 4px !important; margin-left:0 !important; margin-right:0 !important; }
.ok-charge-bar-btn{ padding:0 10px !important; height:36px !important; font-size:12px !important; }
.ok-charge-bar-icon{ font-size:18px !important; }
.ok-charge-bar-pt{ font-size:16px !important; }
.ok-filter-row{ margin-left:0 !important; margin-right:0 !important; gap:4px !important; }
.ok-detail-header{ padding:8px 6px !important; margin-left:0 !important; margin-right:0 !important; }
.ok-select-bar{ padding:8px 10px !important; margin-left:0 !important; margin-right:0 !important; border-radius:14px !important; }
.ok-queue-wrapper{ padding:24px 0 0 !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }
.ok-queue-set-info{ padding:10px 6px !important; margin-left:0 !important; margin-right:0 !important; }
.ok-queue-set-desc-wrap{ margin:0 6px !important; }
/* 온라인쿠지 결과/당첨 오버레이는 fixed라 영향없음 */
/* ══ 프로필 섹션 ══ */
.pf-wrap{ padding:0 !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }
.pf-banner{ padding:14px 10px !important; margin-left:0 !important; margin-right:0 !important; border-radius:14px !important; }
.pf-card{ margin-left:0 !important; margin-right:0 !important; border-radius:14px !important; }
.pf-card-header{ padding:10px 12px !important; }
.pf-card-body{ padding:12px 10px !important; }
/* ══ 이벤트 섹션 ══ */
.ev-rank-header{ padding:12px 10px 10px !important; }
.ev-rank-cols{ padding:8px 10px 7px !important; }
.ev-rank-list .rank-row{ padding:10px 10px !important; }
.ev-rank-footer{ padding:8px 10px 10px !important; }
.ev-rank-panel{ border-radius:12px !important; }
.ev-main-panel{ border-radius:12px !important; }
.ev-rank-icon{ width:36px !important; height:36px !important; font-size:18px !important; }
/* ══ 경매 통계 ══ */
.hero-glass{ padding:8px 10px 10px !important; }
/* ══ 포인트 가져오기 헤더 카드 inline 패딩 제거 ══ */
#pointPullSection > div:first-child{ padding:12px !important; border-radius:14px !important; }
/* ══ 신청 내역 테이블 헤더 패딩 축소 ══ */
#pointPullSection .history{ width:100% !important; font-size:12px !important; }
/* 테이블 래퍼 모바일 */
.tbl-wrap{ border-radius:12px !important; margin-top:6px !important; overflow:visible !important; }
.tbl-header{ padding:10px 12px !important; border-radius:11px 11px 0 0 !important; }
.tbl-header-title{ font-size:13px !important; }
.tbl-scroll{ overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; border-radius:0 0 11px 11px !important; }
table.history{ display:table !important; width:100% !important; min-width:360px; font-size:11px !important; border-radius:0 !important; }
table.history th, table.history td{ padding:7px 7px !important; font-size:11px !important; }
/* ══ 피규어·굿즈 서브탭 모바일 ══ */
.goods-subtab-bar { gap: 4px; padding: 3px; margin-bottom: 12px; }
.goods-subtab { padding: 8px 10px; font-size: 12px; }
/* ══ 경매 입찰 입력 모바일 ══ */
.bid-input { padding: 10px 12px; font-size: 15px; }
/* ══ 서브탭 바 여백 — 공통 spacing 규칙에서 처리 ══ */
}
@media (max-width:400px){
/* 작은 화면에서도 2열 유지 */
.shop-grid{ grid-template-columns:repeat(2,1fr) !important; gap:3px; padding:0 !important; }
.product-name{ font-size:11px; margin:5px 5px 2px; }
.price,.stock{ font-size:10px; margin:1px 5px; }
.auction-left .hero img{ height:180px !important; }
/* 극소형: 헤더 버튼 축소 */
.lk-hdr-btn { padding: 6px 9px; font-size: 11.5px; gap: 3px; }
}
/* ══════════════════════════════
📱 하단 네비게이션 바
══════════════════════════════ */
#bottomNavBar {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--surface);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 20px rgba(80,70,229,.10);
display: flex;
padding-bottom: 0;
z-index: 600;
}
/* 홈바 검정 띠 제거 — 앱 navBarView가 직접 처리 */
/* #bottomNavBar::after 제거 */
.bnav-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
flex: 1; min-height: var(--bottom-nav); gap: 3px;
border: none; background: transparent; cursor: pointer;
color: rgba(200,195,230,.55); font-size: 10px; font-weight: 700;
transition: color 0.15s;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
padding: 8px 4px;
position: relative;
}
.bnav-item::after {
content: '';
position: absolute; top: 0; left: 20%; right: 20%; height: 2px;
background: var(--brand); border-radius: 0 0 3px 3px;
opacity: 0; transition: opacity .15s;
}
.bnav-item .bnav-ico { font-size: 20px; line-height: 1; }
.bnav-item.active { color: var(--brand); }
.bnav-item.active::after { opacity: 1; }
.bnav-item:active { opacity: .7; }
/* ev-layout 은 새 CSS 블록에서 선언 */
.e-progress{ padding:10px 12px 0; }
.e-progress .bar{
height:10px;
border-radius:999px;
background: rgba(0,0,0,.08);
overflow:hidden;
margin-bottom:8px;
}
.e-progress .fill{
height:100%;
border-radius:999px;
background: linear-gradient(90deg, rgba(16,185,129,.9), rgba(59,130,246,.9));
}
.e-modal{
position:fixed; inset:0;
background: rgba(0,0,0,.45);
display:flex; align-items:center; justify-content:center;
z-index: 9999;
}
.e-modal.hidden{ display:none; }
.e-dialog{
width: min(560px, calc(100vw - 24px));
border-radius: 16px;
background: #fff;
border: 1.5px solid rgba(99,102,241,.2);
box-shadow: 0 18px 60px rgba(99,102,241,.18), 0 4px 20px rgba(0,0,0,.08);
overflow:hidden;
}
.e-head{
display:flex; justify-content:space-between; gap:12px;
padding:14px 16px;
border-bottom: 1.5px solid #f1f5f9;
background:linear-gradient(135deg,#eef2ff,#f5f3ff);
}
.e-title{ font-weight: 1000; font-size: 18px; color:#1e1b4b; }
.e-sub{ font-weight: 900; color:#6366f1; }
.e-body{ padding: 16px; display:grid; gap: 12px; color:#334155; }
.e-stepper{
display:flex; gap:10px; align-items:center;
}
.step-btn{
width:44px; height:44px; border-radius:12px;
border:1.5px solid #e2e8f0;
background: #fff;
color:#374151;
font-size:18px;
font-weight:900;
cursor:pointer;
}
.e-qty{
flex:1;
height:44px;
border-radius:12px;
border:1.5px solid #e2e8f0;
background:#fff;
color:#1e293b;
padding: 0 12px;
font-size: 16px;
font-weight: 900;
}
.e-actions{ display:flex; gap:10px; justify-content:flex-end; }
/* ══ 랭킹 카드 ══ */
.event-rank{
position: sticky !important;
top: 18px !important;
z-index: 1 !important;
max-width: 100% !important;
min-width: 0 !important;
width: auto !important;
background: linear-gradient(160deg,
rgba(67,56,202,.90) 0%,
rgba(91,33,182,.88) 50%,
rgba(109,40,217,.90) 100%
) !important;
border: 1px solid rgba(167,139,250,.35) !important;
border-radius: 24px !important;
padding: 22px 20px !important;
box-shadow:
0 16px 48px rgba(99,102,241,.30),
0 4px 16px rgba(109,40,217,.20),
inset 0 1px 0 rgba(255,255,255,.15) !important;
backdrop-filter: blur(20px) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* 랭킹 카드 내부 파티클 */
.event-rank::before {
content: '';
position: absolute; inset: 0;
background-image:
radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,.6), transparent),
radial-gradient(1.5px 1.5px at 55% 8%, rgba(255,255,255,.5), transparent),
radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.4), transparent),
radial-gradient(1px 1px at 30% 75%, rgba(255,255,255,.3), transparent),
radial-gradient(1.5px 1.5px at 72% 85%, rgba(255,255,255,.5), transparent);
pointer-events: none;
z-index: 0;
}
.event-rank .rank-head {
position: relative; z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,.18);
}
.event-rank .rank-left { min-width: 0; }
.event-rank .rank-kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
color: rgba(196,181,253,.95);
margin-bottom: 6px;
text-transform: uppercase;
}
.event-rank .rank-main {
font-size: 22px;
font-weight: 950;
line-height: 1.1;
white-space: nowrap;
background: linear-gradient(135deg, #e2e8f0 0%, #a5b4fc 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.event-rank .rank-meta {
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,.70);
white-space: nowrap;
text-align: right;
padding: 5px 10px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.20);
border-radius: 8px;
}
/* 랭킹 레이아웃 */
.event-rank .rank-body {
position: relative; z-index: 1;
margin-top: 0;
display: grid;
gap: 0;
max-height: 480px;
overflow: auto;
padding: 10px;
padding-right: 8px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.15);
border-radius: 16px;
align-content: start;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.30) transparent;
}
.event-rank .rank-body::-webkit-scrollbar { width: 4px; }
.event-rank .rank-body::-webkit-scrollbar-track { background: transparent; }
.event-rank .rank-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.30); border-radius: 4px; }
/* 열 헤더 */
.event-rank .rank-cols {
position: sticky;
top: 0;
z-index: 3;
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 10px;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(10px);
font-size: 11px;
font-weight: 900;
letter-spacing: .06em;
color: rgba(255,255,255,.80);
text-transform: uppercase;
margin-bottom: 4px;
}
/* 랭킹 행 */
.event-rank .rank-row {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 10px;
align-items: center;
padding: 11px 10px;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(255,255,255,.12);
border-radius: 0;
transition: background .15s;
}
.event-rank .rank-row:last-child { border-bottom: 0; }
.event-rank .rank-row:hover { background: rgba(255,255,255,.12); border-radius: 10px; }
.event-rank .rank-row.top1 {
background: linear-gradient(90deg, rgba(255,255,255,.18), transparent);
border-radius: 10px;
}
.event-rank .rank-row.top1 .rk {
background: linear-gradient(135deg, #fcd34d, #f59e0b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 16px;
}
.event-rank .rank-row .rk {
font-weight: 950;
text-align: center;
color: rgba(255,255,255,.70);
font-size: 13px;
}
.event-rank .rank-row .nm {
font-weight: 800;
color: rgba(255,255,255,.95);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
.event-rank .rank-row .ct {
font-weight: 900;
color: rgba(255,255,255,.95);
font-size: 13px;
}
.event-rank .rank-empty {
padding: 20px 0;
text-align: center;
font-weight: 700;
color: rgba(255,255,255,.50);
font-size: 13px;
}
@media (max-width: 1100px){
.event-wrap{ grid-template-columns: 1fr !important; }
.event-rank{ position: relative !important; top: 0 !important; }
}
/* ═══════════════════════════════════════════════════════════
🎮 GAME-STYLE EVENT SECTION — 완전 리메이크 v2
═══════════════════════════════════════════════════════════ */
/* ── 히어로 배너 ── */
.ev-hero {
position: relative;
margin: 0 0 20px;
padding: 24px 32px 24px;
border-radius: 28px;
overflow: hidden;
isolation: isolate;
contain: paint;
transform: translateZ(0);
-webkit-transform: translateZ(0);
/* 보라+핑크+인디고 다크 그라디언트 */
background:
radial-gradient(ellipse 70% 80% at 10% 20%, rgba(139,92,246,.65) 0%, transparent 55%),
radial-gradient(ellipse 55% 60% at 88% 15%, rgba(236,72,153,.50) 0%, transparent 50%),
radial-gradient(ellipse 80% 50% at 50% 100%, rgba(79,70,229,.45) 0%, transparent 60%),
radial-gradient(ellipse 40% 70% at 90% 85%, rgba(167,139,250,.35) 0%, transparent 55%),
linear-gradient(145deg, #0f0c29 0%, #1a0c3d 25%, #2d1060 55%, #1a0845 100%);
box-shadow:
0 32px 80px rgba(88,28,135,.55),
0 8px 24px rgba(79,70,229,.30),
inset 0 1px 0 rgba(255,255,255,.06);
}
/* 히어로 배너 — 빛 스캔 오버레이 */
.ev-hero::after {
content: '';
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(105deg,
transparent 0%, transparent 40%,
rgba(255,255,255,.04) 50%,
transparent 60%, transparent 100%
);
background-size: 200% 100%;
animation: evScanLine 4s linear infinite;
}
@keyframes evScanLine {
0% { background-position: -100% 0; opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { background-position: 200% 0; opacity: 0; }
}
/* 그리드 패턴 오버레이 */
.ev-bg-grid {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(167,139,250,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(167,139,250,.06) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 40%, transparent 75%);
}
/* 글로우 레이어 */
.ev-bg-glow {
position: absolute; z-index: 1; border-radius: 50%;
filter: blur(70px); pointer-events: none;
}
.ev-bg-glow--left {
width: 480px; height: 480px; top: -140px; left: -100px;
background: radial-gradient(circle, rgba(139,92,246,.70), transparent 65%);
animation: evGlowPulse 5s ease-in-out infinite;
}
.ev-bg-glow--right {
width: 400px; height: 400px; bottom: -100px; right: -80px;
background: radial-gradient(circle, rgba(236,72,153,.55), transparent 65%);
animation: evGlowPulse 5.5s ease-in-out infinite 1.2s;
}
.ev-bg-glow--center {
width: 600px; height: 350px; top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse, rgba(99,102,241,.30), transparent 65%);
animation: evGlowPulse 7s ease-in-out infinite 0.5s;
}
@keyframes evGlowPulse {
0%,100% { opacity:.6; transform: scale(1); }
50% { opacity:1; transform: scale(1.08); }
}
.ev-bg-glow--center { transform: translate(-50%,-50%); }
/* 파티클 스파클 */
.ev-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ev-p {
position: absolute; border-radius: 50%;
background: #fff; animation: evParticleFloat 4s ease-in-out infinite;
}
.ev-p:nth-child(1) { top:8%; left:6%; width:3px; height:3px; opacity:.9; animation-delay:0s; animation-duration:4.0s; }
.ev-p:nth-child(2) { top:18%; left:22%; width:2px; height:2px; opacity:.7; animation-delay:.6s; animation-duration:5.2s; }
.ev-p:nth-child(3) { top:6%; left:52%; width:3px; height:3px; opacity:.95;animation-delay:1.1s; animation-duration:3.7s; }
.ev-p:nth-child(4) { top:28%; left:74%; width:4px; height:4px; opacity:.6; animation-delay:1.7s; animation-duration:6.0s; }
.ev-p:nth-child(5) { top:58%; left:88%; width:2px; height:2px; opacity:.8; animation-delay:.2s; animation-duration:4.4s; }
.ev-p:nth-child(6) { top:72%; left:12%; width:3px; height:3px; opacity:.7; animation-delay:.9s; animation-duration:5.6s; }
.ev-p:nth-child(7) { top:84%; left:38%; width:2px; height:2px; opacity:.85;animation-delay:2.1s; animation-duration:3.9s; }
.ev-p:nth-child(8) { top:48%; left:48%; width:2px; height:2px; opacity:.6; animation-delay:1.3s; animation-duration:6.1s; }
.ev-p:nth-child(9) { top:12%; left:83%; width:3px; height:3px; opacity:.8; animation-delay:.7s; animation-duration:4.7s; }
.ev-p:nth-child(10) { top:42%; left:4%; width:2px; height:2px; opacity:.7; animation-delay:2.4s; animation-duration:5.0s; }
.ev-p:nth-child(11) { top:88%; left:68%; width:4px; height:4px; opacity:.6; animation-delay:.3s; animation-duration:5.9s; }
.ev-p:nth-child(12) { top:32%; left:94%; width:2px; height:2px; opacity:.9; animation-delay:1.9s; animation-duration:4.2s; }
/* 추가 별빛 */
.ev-p:nth-child(13) { top:55%; left:30%; width:2px; height:2px; opacity:.5; animation-delay:3.0s; animation-duration:4.8s; }
.ev-p:nth-child(14) { top:22%; left:44%; width:3px; height:3px; opacity:.75;animation-delay:0.4s; animation-duration:5.3s; background: #d8b4fe; }
.ev-p:nth-child(15) { top:78%; left:55%; width:2px; height:2px; opacity:.7; animation-delay:1.5s; animation-duration:4.6s; background: #fbcfe8; }
@keyframes evParticleFloat {
0%,100% { transform: translateY(0) scale(1); opacity: inherit; }
50% { transform: translateY(-12px) scale(1.5); opacity: 1; }
}
/* 내부 콘텐츠 컨테이너 */
.ev-hero-inner {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 22px;
}
/* 상단 시즌 배지 */
.ev-top-badges { display: flex; gap: 10px; justify-content: center; }
.ev-season-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 18px; border-radius: 999px;
background: rgba(139,92,246,.20);
border: 1px solid rgba(167,139,250,.40);
font-size: 11px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase;
color: rgba(216,180,254,.95); backdrop-filter: blur(12px);
box-shadow: 0 0 20px rgba(139,92,246,.20), inset 0 1px 0 rgba(255,255,255,.08);
}
.ev-season-dot {
width: 7px; height: 7px; border-radius: 50%; background: #c4b5fd;
box-shadow: 0 0 8px #a78bfa, 0 0 18px rgba(167,139,250,.7);
animation: evSeasonDot 2.2s ease-in-out infinite;
}
@keyframes evSeasonDot {
0%,100% { box-shadow: 0 0 8px #a78bfa, 0 0 18px rgba(167,139,250,.7); transform: scale(1); }
50% { box-shadow: 0 0 14px #c4b5fd, 0 0 28px rgba(196,181,253,.95); transform: scale(1.2); }
}
/* ── 타이틀 래퍼 ── */
.ev-title-wrap {
display: flex; align-items: center; gap: 18px;
width: 100%; justify-content: center;
}
/* 사이드 데코 ✦ */
.ev-title-deco {
font-size: 26px; color: rgba(250,204,21,.80); flex-shrink: 0;
text-shadow: 0 0 14px rgba(250,204,21,.70), 0 0 30px rgba(250,204,21,.40);
animation: evDecoSpin 10s linear infinite;
display: block;
}
@keyframes evDecoSpin {
from { transform: rotate(0deg) scale(1); }
25% { transform: rotate(90deg) scale(1.15); }
50% { transform: rotate(180deg) scale(1); }
75% { transform: rotate(270deg) scale(1.15); }
to { transform: rotate(360deg) scale(1); }
}
/* ── 메인 타이틀 ── */
.ev-title {
font-size: clamp(26px, 3.8vw, 52px);
font-weight: 1000; letter-spacing: -0.03em; line-height: 1.15;
text-align: center; margin: 0;
/* 홀로그래픽 그라디언트 */
background: linear-gradient(135deg,
#f3e8ff 0%,
#c4b5fd 15%,
#ffffff 30%,
#fde68a 48%,
#fbcfe8 65%,
#c4b5fd 80%,
#f3e8ff 100%
);
background-size: 400% 400%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: evTitleHolo 6s ease-in-out infinite;
filter: drop-shadow(0 4px 24px rgba(167,139,250,.55)) drop-shadow(0 0 48px rgba(250,204,21,.20));
}
@keyframes evTitleHolo {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ── 상태 배지 행 ── */
.ev-status-row {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap; justify-content: center;
}
/* LIVE 배지 */
.ev-live-badge {
position: relative;
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 22px; border-radius: 999px;
font-size: 13px; font-weight: 900; letter-spacing: .10em;
color: #bbf7d0;
background: rgba(16,185,129,.20);
border: 1px solid rgba(52,211,153,.45);
backdrop-filter: blur(12px);
box-shadow: 0 0 0 0 rgba(52,211,153,.3), inset 0 1px 0 rgba(255,255,255,.12);
animation: evLivePing 2.2s ease-in-out infinite;
}
.ev-live-badge.is-ended {
color: rgba(255,255,255,.40);
background: rgba(100,116,139,.12); border-color: rgba(100,116,139,.25);
animation: none; box-shadow: none;
}
@keyframes evLivePing {
0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.4), inset 0 1px 0 rgba(255,255,255,.12); }
50% { box-shadow: 0 0 0 10px rgba(52,211,153,.0), inset 0 1px 0 rgba(255,255,255,.12); }
}
.ev-live-ring {
position: absolute; inset: -4px; border-radius: 999px;
border: 1.5px solid rgba(52,211,153,.35);
animation: evLiveRing 2.2s ease-in-out infinite; pointer-events: none;
}
@keyframes evLiveRing {
0% { opacity:1; transform: scale(1); }
100% { opacity:0; transform: scale(1.30); }
}
.ev-live-dot {
width: 9px; height: 9px; border-radius: 50%;
background: #34d399; box-shadow: 0 0 10px rgba(52,211,153,.9);
animation: evDotBlink 1.3s ease-in-out infinite; flex-shrink: 0;
}
.ev-live-badge.is-ended .ev-live-dot { background:#64748b; box-shadow:none; animation:none; }
.ev-live-badge.is-ended .ev-live-ring { display:none; }
@keyframes evDotBlink {
0%,100% { opacity:1; box-shadow: 0 0 10px rgba(52,211,153,.9); }
50% { opacity:.5; box-shadow: 0 0 18px rgba(52,211,153,1); }
}
/* 보상 배지 */
.ev-reward-badge {
display: inline-flex; align-items: center; gap: 9px;
padding: 10px 22px; border-radius: 999px;
font-size: 13px; font-weight: 800;
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.20);
backdrop-filter: blur(12px);
box-shadow: 0 4px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12);
}
.ev-reward-icon { font-size: 16px; }
.ev-reward-text { color: rgba(255,255,255,.70); }
.ev-reward-amount {
background: linear-gradient(135deg, #fde68a, #f59e0b);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 950; font-size: 15px;
}
.ev-reward-count {
background: rgba(250,204,21,.18); border: 1px solid rgba(250,204,21,.40);
border-radius: 999px; padding: 3px 11px;
color: #fde68a; font-weight: 900; font-size: 12px;
box-shadow: 0 0 12px rgba(250,204,21,.25);
animation: evRewardGlow 2.4s ease-in-out infinite alternate;
}
/* 이벤트 포인트 배지 (구매권 배지와 동일 컨테이너 스타일, 포인트 값만 별도 처리) */
.ev-epoint-badge {
background: rgba(139,92,246,.18);
border-color: rgba(167,139,250,.45);
}
.ev-epoint-val {
font-size: 15px; font-weight: 900;
background: linear-gradient(135deg, #c4b5fd, #a78bfa);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ══ 이벤트 기록보기 버튼 ══ */
.ev-history-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 20px; border-radius: 999px;
font-size: 13px; font-weight: 800; cursor: pointer;
color: rgba(255,255,255,.92);
background: rgba(251,191,36,.15);
border: 1px solid rgba(251,191,36,.40);
backdrop-filter: blur(12px);
box-shadow: 0 4px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
transition: background .2s, box-shadow .2s, transform .15s;
}
.ev-history-btn:hover {
background: rgba(251,191,36,.28);
box-shadow: 0 6px 24px rgba(251,191,36,.25);
transform: translateY(-1px);
}
.ev-history-btn:active { transform: translateY(0); }
/* ════════════════════════════════════════════════════════
🏆 이벤트 당첨 내역 모달 v3 — 완전 리디자인
레이아웃: 좌(날짜 사이드바) + 우(회차 카드 목록)
════════════════════════════════════════════════════════ */
/* ── 오버레이 ── */
#evHistoryModal {
display: none; position: fixed; inset: 0;
z-index: 99999;
background: rgba(4,4,20,.82);
backdrop-filter: blur(14px) saturate(1.6);
align-items: center; justify-content: center;
padding: 16px;
}
#evHistoryModal.open { display: flex; }
/* ── 카드 전체 ── */
.evh-card {
width: 100%; max-width: 920px; max-height: min(88vh, 800px);
background:
radial-gradient(ellipse 70% 55% at 20% 0%, rgba(109,40,217,.22) 0%, transparent 60%),
radial-gradient(ellipse 55% 50% at 85% 100%, rgba(236,72,153,.14) 0%, transparent 55%),
linear-gradient(170deg, #12102a 0%, #0c0a1e 55%, #080816 100%);
border: 1px solid rgba(139,92,246,.28);
border-radius: 28px;
box-shadow:
0 40px 100px rgba(0,0,0,.75),
0 0 0 1px rgba(255,255,255,.04) inset,
0 1px 0 rgba(167,139,250,.12) inset;
display: flex; flex-direction: column; overflow: hidden;
position: relative;
}
/* 상단 글로우 라인 */
.evh-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, #7c3aed, #c4b5fd, #f0abfc, #818cf8, transparent);
opacity: .7; pointer-events: none; z-index: 1;
}
/* ── 헤더 ── */
.evh-header {
display: flex; align-items: center; gap: 14px;
padding: 22px 26px 18px;
border-bottom: 1px solid rgba(255,255,255,.07);
flex-shrink: 0; position: relative; z-index: 2;
}
.evh-header-icon {
width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
background: linear-gradient(145deg, rgba(124,58,237,.4), rgba(109,40,217,.25));
border: 1px solid rgba(167,139,250,.35);
display: flex; align-items: center; justify-content: center; font-size: 22px;
box-shadow: 0 4px 16px rgba(109,40,217,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.evh-header-title {
font-size: 19px; font-weight: 900; flex: 1;
background: linear-gradient(135deg, #e2e8f0 10%, #c4b5fd 50%, #f0abfc 90%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -.02em;
}
.evh-header-stats {
display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
.evh-stat-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: 999px;
font-size: 11px; font-weight: 800;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.55); white-space: nowrap;
}
.evh-stat-pill b { color: #c4b5fd; font-size: 13px; }
.evh-close-btn {
width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
color: #64748b; font-size: 16px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .18s;
}
.evh-close-btn:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.4); color: #fca5a5; }
/* ── 검색바 ── */
.evh-search-area {
padding: 14px 24px 0;
flex-shrink: 0; position: relative; z-index: 2;
}
.evh-search-row {
display: flex; gap: 8px; align-items: center;
}
.evh-search-field {
flex: 1; position: relative;
}
.evh-search-input {
width: 100%; padding: 11px 16px 11px 42px;
background: rgba(255,255,255,.07);
border: 1.5px solid rgba(255,255,255,.10);
border-radius: 14px; color: #e2e8f0;
font-size: 14px; font-weight: 500;
outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
box-sizing: border-box; font-family: inherit;
}
.evh-search-input:focus {
border-color: rgba(167,139,250,.55);
background: rgba(255,255,255,.10);
box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.evh-search-input::placeholder { color: rgba(255,255,255,.25); }
.evh-search-icon {
position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
color: #64748b; font-size: 15px; pointer-events: none;
}
/* 검색 타입 토글 버튼 */
.evh-filter-btns {
display: flex; gap: 4px; flex-shrink: 0;
}
.evh-filter-btn {
padding: 8px 14px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.05); color: rgba(255,255,255,.45);
font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
transition: all .18s; font-family: inherit;
}
.evh-filter-btn:hover { background: rgba(255,255,255,.10); color: rgba(255,255,255,.75); }
.evh-filter-btn.active {
background: rgba(139,92,246,.28); border-color: rgba(167,139,250,.55);
color: #c4b5fd; box-shadow: 0 2px 10px rgba(109,40,217,.25);
}
/* 검색 결과 카운트 */
.evh-search-hint {
font-size: 11.5px; color: rgba(255,255,255,.3); font-weight: 600;
padding: 6px 4px 0; height: 22px; line-height: 22px;
}
.evh-search-hint b { color: #fde68a; }
/* ── 메인 레이아웃: 사이드바 + 본문 ── */
.evh-layout {
display: flex; flex: 1; min-height: 0; overflow: hidden;
}
/* ── 좌측 날짜 사이드바 ── */
.evh-sidebar {
width: 130px; flex-shrink: 0;
border-right: 1px solid rgba(255,255,255,.07);
overflow-y: auto; padding: 14px 10px;
display: flex; flex-direction: column; gap: 4px;
scrollbar-width: none;
background: rgba(0,0,0,.18);
}
.evh-sidebar::-webkit-scrollbar { display: none; }
.evh-sidebar-title {
font-size: 9px; font-weight: 900; letter-spacing: .18em;
color: rgba(255,255,255,.2); text-transform: uppercase;
padding: 0 6px 8px; border-bottom: 1px solid rgba(255,255,255,.06);
margin-bottom: 4px;
}
.evh-date-btn {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 10px 6px; border-radius: 12px; border: 1px solid transparent;
background: transparent; cursor: pointer; transition: all .18s;
text-align: center; position: relative;
}
.evh-date-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10); }
.evh-date-btn.active {
background: linear-gradient(145deg, rgba(124,58,237,.32), rgba(109,40,217,.22));
border-color: rgba(167,139,250,.5);
box-shadow: 0 2px 12px rgba(109,40,217,.22);
}
.evh-date-btn.active::before {
content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
width: 3px; border-radius: 0 3px 3px 0;
background: linear-gradient(to bottom, #a78bfa, #7c3aed);
}
.evh-date-md {
font-size: 18px; font-weight: 950; color: rgba(255,255,255,.6);
line-height: 1; transition: color .18s;
}
.evh-date-btn.active .evh-date-md { color: #c4b5fd; }
.evh-date-yow {
font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.25);
transition: color .18s;
}
.evh-date-btn.active .evh-date-yow { color: rgba(167,139,250,.7); }
.evh-date-badge {
font-size: 9px; font-weight: 900;
background: rgba(139,92,246,.3); border: 1px solid rgba(167,139,250,.4);
color: #c4b5fd; border-radius: 999px; padding: 1px 7px; margin-top: 2px;
}
.evh-date-btn.active .evh-date-badge {
background: rgba(167,139,250,.4); color: #fff;
}
/* ── 우측 본문 ── */
.evh-body {
flex: 1; overflow-y: auto; padding: 16px 20px 24px;
scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.35) transparent;
}
.evh-body::-webkit-scrollbar { width: 4px; }
.evh-body::-webkit-scrollbar-thumb { background: rgba(139,92,246,.4); border-radius: 99px; }
/* 검색모드 레이블 */
.evh-search-mode-bar {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 10px; margin-bottom: 14px;
background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.2);
font-size: 12px; font-weight: 700; color: #fde68a;
}
.evh-search-mode-bar span { color: rgba(255,255,255,.45); margin-right: 2px; }
/* ── 날짜 제목 ── */
.evh-date-heading {
display: flex; align-items: center; gap: 10px;
margin: 0 0 14px; padding: 12px 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
}
.evh-date-heading-icon { font-size: 18px; }
.evh-date-heading-text {
font-size: 15px; font-weight: 900; color: #e2e8f0; flex: 1;
}
.evh-date-heading-count {
font-size: 11px; font-weight: 800; color: rgba(255,255,255,.3);
background: rgba(255,255,255,.06); border-radius: 999px; padding: 3px 10px;
}
/* ── 회차 카드 ── */
.evh-round-card {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 16px; margin-bottom: 12px; overflow: hidden;
transition: border-color .18s;
}
.evh-round-card:hover { border-color: rgba(167,139,250,.25); }
/* 회차 카드 헤더 (클릭하면 펼침) */
.evh-round-head {
display: flex; align-items: center; gap: 10px;
padding: 11px 16px; cursor: pointer;
transition: background .15s; min-width: 0;
}
.evh-round-head:hover { background: rgba(255,255,255,.04); }
.evh-round-num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 24px; border-radius: 8px; padding: 0 9px;
font-size: 11.5px; font-weight: 900;
background: rgba(139,92,246,.25); border: 1px solid rgba(167,139,250,.4);
color: #a78bfa; flex-shrink: 0;
}
.evh-round-time-label {
font-size: 11.5px; color: rgba(255,255,255,.3); font-weight: 600;
flex-shrink: 0; white-space: nowrap;
}
/* 미리보기 chip 영역 — flex:1 으로 남은 공간 모두 차지 */
.evh-round-winners-preview {
display: flex; gap: 5px; flex-wrap: wrap; flex: 1;
align-items: center; min-width: 0; overflow: hidden;
padding: 0 6px;
}
.evh-winner-chip {
flex-shrink: 0;
padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.6); white-space: nowrap;
max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.evh-winner-chip.is-last {
background: rgba(245,158,11,.22); border-color: rgba(251,191,36,.5);
color: #fde68a; box-shadow: 0 1px 6px rgba(245,158,11,.2);
}
/* +이외 N명 chip */
.evh-more-chip {
background: rgba(139,92,246,.15); border-color: rgba(167,139,250,.3);
color: rgba(167,139,250,.8); font-size: 10.5px;
}
.evh-round-toggle {
font-size: 11px; color: rgba(255,255,255,.25); flex-shrink: 0;
transition: transform .25s;
}
.evh-round-card.expanded .evh-round-toggle { transform: rotate(180deg); }
/* 회차 카드 테이블 영역 */
.evh-round-body { display: none; border-top: 1px solid rgba(255,255,255,.06); }
.evh-round-card.expanded .evh-round-body { display: block; }
/* 테이블 */
.evh-table { width: 100%; border-collapse: collapse; }
.evh-table thead th {
padding: 9px 14px;
font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.28); text-align: left;
background: rgba(0,0,0,.18); border-bottom: 1px solid rgba(255,255,255,.05);
}
.evh-table tbody tr {
border-bottom: 1px solid rgba(255,255,255,.04);
transition: background .12s;
}
.evh-table tbody tr:last-child { border-bottom: none; }
.evh-table tbody tr:hover { background: rgba(255,255,255,.04); }
.evh-table tbody td {
padding: 11px 14px;
font-size: 13px; font-weight: 600; color: #cbd5e1;
vertical-align: middle;
}
/* 라스트 행 */
.evh-table tbody tr.evh-row-last { background: rgba(245,158,11,.05); }
.evh-table tbody tr.evh-row-last:hover { background: rgba(245,158,11,.10); }
.evh-table tbody tr.evh-row-last td { color: #fde68a; }
/* 컬럼별 스타일 */
.evh-td-time { color: rgba(255,255,255,.25) !important; font-size: 11.5px !important; white-space: nowrap; min-width: 72px; }
.evh-td-rank { white-space: nowrap; min-width: 72px; }
.evh-td-nick { color: #e2e8f0 !important; font-weight: 800 !important; }
.evh-td-ball { text-align: center; min-width: 54px; }
.evh-td-prod { color: #a5b4fc !important; min-width: 100px; }
/* 순위 뱃지 */
.evh-rank-badge-last {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 900;
background: linear-gradient(135deg, #d97706, #f59e0b);
color: #fff; box-shadow: 0 2px 10px rgba(245,158,11,.4);
}
.evh-rank-badge-num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 22px; padding: 0 7px; border-radius: 7px;
font-size: 11.5px; font-weight: 900;
background: rgba(139,92,246,.22); color: #a78bfa;
border: 1px solid rgba(167,139,250,.3);
}
/* 공 번호 뱃지 */
.evh-ball-badge {
display: inline-flex; align-items: center; gap: 3px;
padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
background: rgba(16,185,129,.15); border: 1px solid rgba(52,211,153,.3);
color: #6ee7b7;
}
/* 검색 하이라이트 */
.evh-hl { background: rgba(251,191,36,.25); color: #fde68a; border-radius: 3px; padding: 0 2px; }
/* 빈 상태 */
.evh-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 56px 24px; gap: 12px;
color: rgba(255,255,255,.25); font-size: 14px; font-weight: 600;
}
.evh-empty-icon { font-size: 44px; opacity: .6; }
.evh-empty-sub { font-size: 12px; color: rgba(255,255,255,.18); }
/* 로딩 스피너 */
.evh-loading {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 60px 24px; gap: 14px; color: rgba(255,255,255,.35); font-size: 13px;
}
.evh-spinner {
width: 36px; height: 36px; border-radius: 50%;
border: 3px solid rgba(167,139,250,.15);
border-top-color: #a78bfa;
animation: evhSpin .8s linear infinite;
}
@keyframes evhSpin { to { transform: rotate(360deg); } }
/* 상품명 긴 텍스트 말줄임 */
.evh-prod-wrap {
max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── 삭제 버튼 (관리자 전용) ── */
.evh-del-btn {
display: none; /* JS로 관리자 확인 후 표시 */
align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25);
color: #f87171; font-size: 13px; cursor: pointer;
transition: all .18s; margin-left: 4px;
}
.evh-del-btn:hover { background: rgba(239,68,68,.28); border-color: rgba(239,68,68,.55); color: #fca5a5; }
.evh-del-row-btn {
display: none;
align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.20);
color: #f87171; font-size: 11px; cursor: pointer;
transition: all .15s;
}
.evh-del-row-btn:hover { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.5); }
/* 관리자 모드일 때 표시 */
.evh-admin-mode .evh-del-btn { display: flex; }
.evh-admin-mode .evh-del-row-btn { display: flex; }
/* ── 회차 추가 버튼 (운영자 전용) ── */
.evh-add-round-btn {
display: none; /* admin-mode 시에만 표시 */
align-items: center; justify-content: center; gap: 4px;
padding: 5px 11px; border-radius: 9px; flex-shrink: 0;
background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.35);
color: #a5b4fc; font-size: 12px; font-weight: 800; cursor: pointer;
transition: all .18s; margin-left: 6px; letter-spacing: .01em;
}
.evh-add-round-btn:hover { background: rgba(99,102,241,.30); border-color: rgba(99,102,241,.6); color: #c4b5fd; transform: translateY(-1px); }
.evh-admin-mode .evh-add-round-btn { display: flex; }
/* ── 회차 삽입 팝업 오버레이 ── */
.evh-insert-overlay {
position: fixed; inset: 0; z-index: 100020;
background: rgba(4,4,20,.92); backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.evh-insert-box {
background: linear-gradient(160deg, #1a1035 0%, #120c28 100%);
border: 1px solid rgba(99,102,241,.4); border-radius: 22px;
padding: 26px 24px 22px; max-width: 480px; width: 100%;
box-shadow: 0 28px 70px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04) inset;
max-height: 90vh; overflow-y: auto;
}
.evh-insert-title {
font-size: 17px; font-weight: 900; color: #c4b5fd; margin-bottom: 4px;
display: flex; align-items: center; gap: 8px;
}
.evh-insert-subtitle {
font-size: 12px; color: rgba(255,255,255,.38); margin-bottom: 18px; line-height: 1.5;
}
.evh-insert-row {
display: flex; gap: 8px; margin-bottom: 12px;
}
.evh-insert-label {
font-size: 12px; font-weight: 800; color: rgba(255,255,255,.55);
margin-bottom: 5px; display: block;
}
.evh-insert-input {
flex: 1; padding: 9px 13px; border-radius: 11px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
color: #e2e8f0; font-size: 13px; font-family: inherit;
transition: border-color .15s;
}
.evh-insert-input:focus { outline: none; border-color: rgba(99,102,241,.55); background: rgba(99,102,241,.08); }
.evh-insert-textarea {
width: 100%; box-sizing: border-box;
padding: 10px 13px; border-radius: 11px;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
color: #e2e8f0; font-size: 12px; font-family: 'Courier New', monospace; line-height: 1.6;
resize: vertical; min-height: 160px;
transition: border-color .15s;
}
.evh-insert-textarea:focus { outline: none; border-color: rgba(99,102,241,.55); background: rgba(99,102,241,.07); }
.evh-insert-preview {
background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.2);
border-radius: 11px; padding: 10px 13px; margin-top: 4px; margin-bottom: 14px;
font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.7; min-height: 36px;
}
.evh-insert-preview b { color: #a5b4fc; }
.evh-insert-preview-item { color: #e2e8f0; }
.evh-insert-preview-last { color: #fde68a; font-weight: 900; }
.evh-insert-btns { display: flex; gap: 10px; margin-top: 6px; }
.evh-insert-cancel {
flex: 1; padding: 11px; border-radius: 12px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.6); font-size: 14px; font-weight: 800;
cursor: pointer; font-family: inherit; transition: all .15s;
}
.evh-insert-cancel:hover { background: rgba(255,255,255,.12); color: #fff; }
.evh-insert-ok {
flex: 1.3; padding: 11px; border-radius: 12px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border: none; color: #fff; font-size: 14px; font-weight: 900;
cursor: pointer; font-family: inherit; transition: all .15s;
box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.evh-insert-ok:hover { background: linear-gradient(135deg, #4338ca, #6d28d9); transform: translateY(-1px); }
.evh-insert-ok:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.evh-confirm-overlay {
position: fixed; inset: 0; z-index: 100010;
background: rgba(4,4,20,.88); backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center; padding: 24px;
}
.evh-confirm-box {
background: linear-gradient(160deg, #1a1035 0%, #120c28 100%);
border: 1px solid rgba(239,68,68,.35); border-radius: 20px;
padding: 28px 26px; max-width: 340px; width: 100%;
box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
text-align: center;
}
.evh-confirm-icon { font-size: 36px; margin-bottom: 10px; }
.evh-confirm-title { font-size: 17px; font-weight: 900; color: #fca5a5; margin-bottom: 8px; }
.evh-confirm-desc { font-size: 13px; color: rgba(255,255,255,.45); font-weight: 600; margin-bottom: 20px; line-height: 1.6; }
.evh-confirm-btns { display: flex; gap: 10px; }
.evh-confirm-cancel {
flex: 1; padding: 11px; border-radius: 12px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.6); font-size: 14px; font-weight: 800;
cursor: pointer; font-family: inherit; transition: all .15s;
}
.evh-confirm-cancel:hover { background: rgba(255,255,255,.12); color: #fff; }
.evh-confirm-ok {
flex: 1; padding: 11px; border-radius: 12px;
background: linear-gradient(135deg, #dc2626, #ef4444);
border: none; color: #fff; font-size: 14px; font-weight: 900;
cursor: pointer; font-family: inherit; transition: all .15s;
box-shadow: 0 4px 14px rgba(239,68,68,.35);
}
.evh-confirm-ok:hover { background: linear-gradient(135deg, #b91c1c, #dc2626); transform: translateY(-1px); }
/* ── 모바일 날짜 탭바 (모바일 전용) ── */
.evh-tab-bar {
display: none; /* 모바일에서만 보임 */
}
/* 모바일 카드형 행 (모바일 전용) */
.evh-mobile-rows { display: none; }
.evh-mobile-row {
display: none;
}
/* ── 모바일 (640px 이하) ── */
@media (max-width: 640px) {
/* ▶ 모달 오버레이: 화면 하단 붙임 */
#evHistoryModal {
align-items: flex-end;
padding: 0;
}
/* ▶ 카드: 100dvh 전체 + safe-area-inset으로 노치/홈바 회피
탭바 완전 숨김 → bottom-nav 높이 제외 불필요, 화면 전체 활용
flex-column: header(고정) + search-area(고정) + layout(나머지) */
.evh-card {
border-radius: 22px 22px 0 0;
width: 100%;
max-width: 100%;
height: calc(100dvh - env(safe-area-inset-top, 0px));
max-height: calc(100dvh - env(safe-area-inset-top, 0px));
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ▶ 헤더 — 상단 노치 여백 (고정, 줄어들지 않음) */
.evh-header {
padding: 14px 14px 12px;
padding-top: 14px; /* Android: statusBarView가 상태바 공간 처리 */
gap: 10px;
flex-shrink: 0;
}
.evh-header-icon { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
.evh-header-title { font-size: 15px; }
.evh-header-stats { display: none; }
.evh-close-btn { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; }
/* ▶ 검색바 — 고정 (절대 잘리지 않음) */
.evh-search-area {
padding: 6px 12px 4px;
flex-shrink: 0;
}
.evh-search-input { padding: 8px 12px 8px 36px; font-size: 13px; border-radius: 11px; }
.evh-search-icon { font-size: 13px; left: 12px; }
.evh-filter-btns { display: none; }
.evh-search-hint { font-size: 11px; padding: 2px 2px 0; height: 14px; line-height: 14px; }
/* ▶ 레이아웃: 가로 → 세로 전환, 남은 높이 전부 차지 */
.evh-layout {
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* ▶ 사이드바 → 상단 가로 스크롤 탭바 (고정 높이) */
.evh-sidebar {
width: 100% !important;
height: auto !important;
flex-direction: row !important;
border-right: none !important;
border-bottom: 1px solid rgba(255,255,255,.07);
padding: 7px 12px !important;
gap: 6px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
flex-shrink: 0 !important;
-ms-overflow-style: none;
scrollbar-width: none;
}
.evh-sidebar::-webkit-scrollbar { display: none; }
.evh-sidebar-title { display: none; }
/* 날짜 탭 버튼: pill 형태 */
.evh-date-btn {
flex-direction: row !important;
align-items: center !important;
gap: 4px !important;
padding: 6px 11px !important;
border-radius: 999px !important;
white-space: nowrap;
flex-shrink: 0;
border: 1.5px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.05) !important;
}
.evh-date-btn.active {
background: rgba(139,92,246,.28) !important;
border-color: rgba(167,139,250,.6) !important;
}
.evh-date-btn.active::before { display: none; }
.evh-date-md { font-size: 13px !important; font-weight: 900; line-height: 1; }
.evh-date-yow { font-size: 11px !important; }
.evh-date-badge { font-size: 9px !important; padding: 1px 5px !important; }
/* ▶ 본문: 남은 공간 전부 차지 + 스크롤, 하단 홈바 safe-area */
.evh-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 8px 12px;
padding-bottom: 20px; /* navBarView가 홈바 처리 */
}
/* ▶ 날짜 헤더 */
.evh-date-heading { padding: 8px 12px; border-radius: 10px; margin-bottom: 6px; }
.evh-date-heading-icon { font-size: 13px; }
.evh-date-heading-text { font-size: 12px; }
.evh-date-heading-count { font-size: 11px; }
/* ▶ 회차 카드 */
.evh-round-card { border-radius: 12px; margin-bottom: 7px; }
.evh-round-head { padding: 10px 12px; gap: 8px; }
.evh-round-num { font-size: 12px; min-width: 32px; height: 20px; }
.evh-round-time-label { font-size: 11px; }
.evh-winner-chip { font-size: 11px; padding: 2px 7px; }
/* ▶ 테이블 숨김, 카드형으로 대체 */
.evh-table { display: none; }
.evh-mobile-rows { display: block; padding: 3px 10px 8px; }
/* ▶ 모바일 1줄 행: 등위 | 닉네임 | 공번호 | 상품명 */
.evh-mobile-row {
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 6px;
padding: 8px 2px;
border-bottom: 1px solid rgba(255,255,255,.05);
min-width: 0;
}
.evh-mobile-row:last-child { border-bottom: none; }
/* 2단 구조 div는 flat하게 보이도록 */
.evh-mobile-row-top { display: contents; }
.evh-mobile-row-bottom { display: contents; }
/* 등위 뱃지 */
.evh-mobile-row-rank { flex-shrink: 0; }
/* 닉네임 — 남은 공간 */
.evh-mobile-row-nick {
flex: 1; min-width: 0;
font-weight: 800; color: #e2e8f0; font-size: 13px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 공 번호 */
.evh-mobile-row-ball { flex-shrink: 0; }
/* 상품명 — 오른쪽 고정, 말줄임 */
.evh-mobile-row-prod {
flex-shrink: 0;
max-width: 88px;
font-size: 11px; color: #a5b4fc; font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-align: right;
}
/* 시간 숨김 */
.evh-mobile-row-time { display: none !important; }
/* 라스트 강조 */
.evh-mobile-row.is-last {
background: rgba(245,158,11,.07);
border-radius: 9px;
padding: 8px 8px;
margin: 2px 0;
}
.evh-mobile-row.is-last .evh-mobile-row-nick { color: #fde68a; }
.evh-mobile-row.is-last .evh-mobile-row-prod { color: #fbbf24; }
/* ▶ 삭제 버튼 크기 */
.evh-del-btn { width: 26px; height: 26px; font-size: 12px; border-radius: 7px; }
.evh-del-row-btn { width: 20px; height: 20px; font-size: 10px; }
}
@keyframes evRewardGlow {
from { box-shadow: 0 0 8px rgba(250,204,21,.18); }
to { box-shadow: 0 0 20px rgba(250,204,21,.45); }
}
/* ── 레이아웃 ── */
.ev-layout {
display: grid;
grid-template-columns: minmax(0,1fr) 380px;
gap: 22px; align-items: start;
}
@media (max-width: 1100px) {
.ev-layout { grid-template-columns: 1fr; }
}
.ev-grid-area { min-width: 0; }
#eventGrid.shop-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
#eventSection #eventGrid.shop-grid {
width: 100% !important; margin: 0 !important;
justify-content: stretch !important;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr)) !important;
}
/* ── 랭킹 패널 ── */
.ev-rank-panel {
position: sticky; top: 18px;
border-radius: 22px; overflow: hidden;
/* 프리미엄 다크 그라디언트 */
background:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(139,92,246,.30) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 90%, rgba(109,40,217,.25) 0%, transparent 55%),
linear-gradient(160deg, #130c2e 0%, #1e0e4a 35%, #1a0a3e 65%, #0f0828 100%);
border: 1px solid rgba(139,92,246,.35);
box-shadow:
0 24px 70px rgba(88,28,135,.50),
0 8px 24px rgba(79,70,229,.25),
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 0 0 1px rgba(139,92,246,.10);
}
/* 랭킹 헤더 */
.ev-rank-header {
position: relative; overflow: hidden;
padding: 20px 22px 18px;
border-bottom: 1px solid rgba(139,92,246,.22);
}
.ev-rank-header-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 100% 200% at 50% -20%, rgba(139,92,246,.28), transparent 60%),
linear-gradient(160deg, rgba(109,40,217,.18), rgba(79,70,229,.12), transparent);
pointer-events: none;
}
.ev-rank-title-row {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 14px;
}
.ev-rank-icon {
width: 46px; height: 46px; border-radius: 14px;
background:
radial-gradient(circle at 30% 30%, rgba(250,204,21,.35), transparent 60%),
linear-gradient(135deg, rgba(245,158,11,.22), rgba(250,204,21,.15));
border: 1px solid rgba(250,204,21,.35);
display: flex; align-items: center; justify-content: center;
font-size: 22px; flex-shrink: 0;
box-shadow:
0 6px 18px rgba(250,204,21,.20),
inset 0 1px 0 rgba(255,255,255,.15);
animation: evRankIconGlow 3s ease-in-out infinite alternate;
}
@keyframes evRankIconGlow {
from { box-shadow: 0 6px 18px rgba(250,204,21,.20), inset 0 1px 0 rgba(255,255,255,.15); }
to { box-shadow: 0 6px 26px rgba(250,204,21,.45), inset 0 1px 0 rgba(255,255,255,.20); }
}
.ev-rank-title-info { flex: 1; min-width: 0; }
.ev-rank-eyebrow {
font-size: 10px; font-weight: 900; letter-spacing: .22em;
text-transform: uppercase; color: rgba(167,139,250,.70); margin-bottom: 4px;
}
.ev-rank-title {
font-size: 19px; font-weight: 950; line-height: 1.1;
background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 40%, #c4b5fd 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.ev-rank-count {
flex-shrink: 0; font-size: 11px; font-weight: 800;
color: rgba(196,181,253,.80);
background: rgba(139,92,246,.15); border: 1px solid rgba(139,92,246,.28);
border-radius: 10px; padding: 6px 12px; white-space: nowrap;
}
/* 컬럼 헤더 */
.ev-rank-cols {
display: grid; grid-template-columns: 44px 1fr auto;
gap: 10px; padding: 10px 22px 9px;
font-size: 10px; font-weight: 900;
letter-spacing: .16em; text-transform: uppercase;
color: rgba(167,139,250,.55);
border-bottom: 1px solid rgba(139,92,246,.14);
background: rgba(139,92,246,.06);
}
.ev-rank-cols span:first-child { text-align: center; }
.ev-rank-cols span:last-child { text-align: right; }
/* 랭킹 리스트 */
.ev-rank-list {
max-height: 480px; overflow-y: auto; padding: 4px 0;
scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.45) transparent;
}
.ev-rank-list::-webkit-scrollbar { width: 3px; }
.ev-rank-list::-webkit-scrollbar-thumb { background: rgba(139,92,246,.45); border-radius: 3px; }
/* 랭킹 로우 */
.ev-rank-list .rank-row {
display: grid; grid-template-columns: 44px 1fr auto;
gap: 10px; align-items: center; padding: 12px 22px;
border-bottom: 1px solid rgba(255,255,255,.04);
transition: background .15s, border-color .15s; cursor: default;
}
.ev-rank-list .rank-row:last-child { border-bottom: none; }
.ev-rank-list .rank-row:hover {
background: rgba(139,92,246,.14);
border-color: rgba(139,92,246,.18);
}
/* 1위 */
.ev-rank-list .rank-row.top1 {
background: linear-gradient(90deg,
rgba(250,204,21,.14) 0%, rgba(245,158,11,.08) 50%, transparent 100%);
}
.ev-rank-list .rank-row.top1 .rk {
background: linear-gradient(135deg, #fef3c7, #fcd34d, #f59e0b);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; font-size: 16px; font-weight: 1000;
filter: drop-shadow(0 0 6px rgba(250,204,21,.70));
}
/* 2위 */
.ev-rank-list .rank-row.top2 {
background: linear-gradient(90deg, rgba(148,163,184,.10) 0%, transparent 80%);
}
.ev-rank-list .rank-row.top2 .rk { color: #cbd5e1; font-weight: 900; }
/* 3위 */
.ev-rank-list .rank-row.top3 {
background: linear-gradient(90deg, rgba(205,124,58,.10) 0%, transparent 80%);
}
.ev-rank-list .rank-row.top3 .rk { color: #d97706; font-weight: 900; }
/* 셀 스타일 */
.ev-rank-list .rank-row .rk {
font-size: 13px; font-weight: 800; text-align: center; color: rgba(255,255,255,.35);
}
.ev-rank-list .rank-row .nm {
font-size: 13px; font-weight: 700; color: rgba(255,255,255,.88);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-rank-list .rank-row .ct {
font-size: 13px; font-weight: 900; color: #a78bfa; text-align: right;
background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.22);
border-radius: 8px; padding: 2px 8px; white-space: nowrap;
}
.ev-rank-list .ev-rank-empty {
padding: 24px 20px; text-align: center;
font-size: 13px; font-weight: 600; color: rgba(255,255,255,.28);
}
/* 랭킹 풋터 */
.ev-rank-footer {
padding: 10px 22px 13px; border-top: 1px solid rgba(139,92,246,.14);
display: flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 800;
color: rgba(167,139,250,.50); letter-spacing: .05em;
}
.ev-rank-footer-dot {
width: 7px; height: 7px; border-radius: 50%; background: #7c3aed;
box-shadow: 0 0 8px rgba(124,58,237,.9); margin-left: auto;
animation: evDotBlink 1.3s ease-in-out infinite;
}
/* ── 이벤트 상품카드 ── */
#eventSection .product {
border: 1px solid rgba(139,92,246,.18) !important;
box-shadow: 0 4px 20px rgba(88,28,135,.08) !important;
transition: transform .22s, box-shadow .22s, border-color .22s !important;
}
#eventSection .product:hover {
border-color: rgba(167,139,250,.55) !important;
box-shadow:
0 10px 36px rgba(88,28,135,.28),
0 0 0 1px rgba(139,92,246,.22),
0 0 20px rgba(139,92,246,.12) !important;
transform: translateY(-5px) !important;
}
#eventSection .product.event-product.selected {
outline: 2px solid rgba(139,92,246,.75) !important;
box-shadow:
0 12px 36px rgba(88,28,135,.32),
0 0 24px rgba(139,92,246,.25) !important;
}
/* ── 반응형 ── */
@media (max-width: 760px) {
.ev-hero { padding: 18px 16px 18px; border-radius: 20px; }
.ev-title { font-size: clamp(22px, 5.5vw, 32px); }
.ev-live-badge, .ev-reward-badge { font-size: 12px; padding: 8px 14px; }
.ev-rank-panel { position: relative; top: 0; }
.ev-title-deco { font-size: 18px; }
}
/* ══════════════════════════════════════
📱 경매 모바일 최적화 (통합 CSS에서 처리됨)
══════════════════════════════════════ */
@media(max-width:560px){
/* 채팅 패널 */
.auction-and-chat .chat-card { border-radius:12px; }
.chat-head { padding:9px 12px; font-size:13px; }
}
@media (max-width:560px) {
/* 파티클/글로우/스캔라인 숨김 */
.ev-particles, .ev-bg-glow, .ev-bg-grid::before { display: none !important; }
.ev-bg-grid { animation: none !important; }
/* 빙글빙글 데코 중단 */
.ev-title-deco { animation: none !important; }
/* 타이틀 홀로그램 효과 제거 */
.ev-title { animation: none !important; background-image: none !important;
-webkit-text-fill-color: #f8fafc; color: #f8fafc; }
/* 시즌 닷 글로우 중단 */
.ev-season-dot { animation: none !important; box-shadow: none !important; }
/* 라이브 핑 중단 */
.ev-live-badge::before { animation: none !important; }
/* 카드 레인보우/시머/골드 중단 (경매) */
.ok-last-one-card { animation: none !important; }
/* 브랜드 오브 플로트 중단 */
.lk-brand-deco { animation: none !important; }
.lk-logo-ring { animation: none !important; }
.lk-kicker-dot { animation: none !important; }
/* 이벤트샵 영웅 hero 패딩 줄임 */
.ev-hero { padding: 18px 10px 14px !important; border-radius:14px; }
.ev-hero-inner { gap: 12px; }
.ev-top-badges { gap: 5px; }
.ev-season-badge { font-size: 10px; padding: 5px 10px; }
/* 이벤트 레이아웃 전체 패딩 제거 */
.ev-layout { padding: 0 !important; gap: 12px !important; }
.ev-main-panel, .ev-rank-panel { border-radius:12px !important; }
/* ev-title 크기 축소 */
.ev-title { font-size: clamp(18px, 5vw, 26px) !important; }
.ev-title-wrap { gap: 8px; }
.ev-title-deco { font-size: 16px !important; }
/* 이벤트 카드 내부 패딩 */
.e-body { padding: 12px !important; }
/* 온라인쿠지 상세뷰 */
.ok-detail-view { padding: 0 !important; }
}
/* ════════════════════════════════════════
🎁 온라인쿠지 스타일
════════════════════════════════════════ */
/* ── 히어로 배너 (wrap 바깥 — 진짜 풀블리드) ── */
/* ═══════════════════════════════════════════════════════════
OK HERO BANNER — B안 풀배너 리메이크 (v2 수정판)
═══════════════════════════════════════════════════════════ */
/* ── 배너 루트 ── */
.ok-hero-banner {
position: relative;
overflow: hidden;
width: 100%; box-sizing: border-box;
margin: 0; padding: 0;
background:
/* 좌측 인디고 광원 */
radial-gradient(ellipse 70% 80% at 5% 50%, rgba(99,102,241,.5) 0%, transparent 55%),
/* 우상단 바이올렛 광원 */
radial-gradient(ellipse 55% 70% at 85% 10%, rgba(139,92,246,.42) 0%, transparent 55%),
/* 중앙 골드 은은한 광원 — 구매 욕구 자극 포인트 */
radial-gradient(ellipse 40% 50% at 50% 60%, rgba(245,158,11,.14) 0%, transparent 60%),
/* 우측 하단 딥퍼플 */
radial-gradient(ellipse 60% 60% at 90% 90%, rgba(109,40,217,.3) 0%, transparent 55%),
/* 베이스: 거의 검정에 가까운 딥네이비 */
linear-gradient(160deg, #02010f 0%, #08052a 25%, #110833 55%, #06021a 100%);
}
/* ── 파티클 ── */
.ok-hero-particles {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
overflow: hidden;
}
.ok-ptc {
position: absolute; border-radius: 50%;
background: radial-gradient(circle, rgba(167,139,250,.9) 0%, transparent 70%);
animation: ok-ptc-float linear infinite;
}
/* 퍼플 스타 */
.ok-ptc-1 { width:4px; height:4px; left:8%; top:22%; animation-duration:8s; animation-delay:0s; opacity:.75; }
.ok-ptc-2 { width:3px; height:3px; left:15%; top:60%; animation-duration:11s; animation-delay:1.2s; opacity:.5; }
.ok-ptc-3 { width:4px; height:4px; left:28%; top:38%; animation-duration:9s; animation-delay:2.5s; opacity:.6; background:radial-gradient(circle,rgba(251,191,36,.95) 0%,transparent 70%); }
.ok-ptc-4 { width:3px; height:3px; left:44%; top:72%; animation-duration:13s; animation-delay:0.8s; opacity:.5; }
.ok-ptc-5 { width:6px; height:6px; left:58%; top:20%; animation-duration:10s; animation-delay:3s; opacity:.65; background:radial-gradient(circle,rgba(240,171,252,.9) 0%,transparent 70%); }
.ok-ptc-6 { width:3px; height:3px; left:72%; top:55%; animation-duration:12s; animation-delay:1.8s; opacity:.45; }
.ok-ptc-7 { width:4px; height:4px; left:83%; top:32%; animation-duration:9s; animation-delay:4s; opacity:.6; }
.ok-ptc-8 { width:5px; height:5px; left:91%; top:68%; animation-duration:14s; animation-delay:0.5s; opacity:.55; background:radial-gradient(circle,rgba(251,191,36,.9) 0%,transparent 70%); }
/* 골드 스파크 추가 — 구매웕구 심리적 포인트 */
.ok-ptc-9 { width:5px; height:5px; left:22%; top:80%; animation-duration:10s; animation-delay:2s; opacity:.7; background:radial-gradient(circle,rgba(251,191,36,1.0) 0%,transparent 70%); }
.ok-ptc-10 { width:3px; height:3px; left:38%; top:15%; animation-duration:12s; animation-delay:5s; opacity:.55; background:radial-gradient(circle,rgba(251,191,36,.85) 0%,transparent 70%); }
.ok-ptc-11 { width:4px; height:4px; left:65%; top:78%; animation-duration:8s; animation-delay:1.5s; opacity:.65; background:radial-gradient(circle,rgba(251,191,36,.9) 0%,transparent 70%); }
.ok-ptc-12 { width:6px; height:6px; left:78%; top:12%; animation-duration:15s; animation-delay:3.5s; opacity:.5; background:radial-gradient(circle,rgba(251,191,36,.8) 0%,transparent 70%); }
@keyframes ok-ptc-float {
0% { transform: translateY(0) scale(1); opacity: var(--op, .6); }
50% { transform: translateY(-28px) scale(1.4); opacity: calc(var(--op,.6) * .45); }
100% { transform: translateY(0) scale(1); opacity: var(--op, .6); }
}
/* ── 글로우 오브 ── */
.ok-hero-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ok-orb {
position: absolute; border-radius: 50%; filter: blur(80px);
animation: ok-orb-drift ease-in-out infinite alternate;
}
.ok-orb-1 {
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(99,102,241,.42) 0%, transparent 70%);
top: -150px; left: -100px;
animation-duration: 14s; animation-delay: 0s;
}
.ok-orb-2 {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(139,92,246,.32) 0%, transparent 70%);
bottom: -100px; right: -80px;
animation-duration: 17s; animation-delay: 3s;
}
/* 골드 오브 — 중앙 하단, 구매 에너지 */
.ok-orb-3 {
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(245,158,11,.22) 0%, transparent 70%);
top: 40%; left: 42%;
animation-duration: 11s; animation-delay: 1.5s;
}
/* 우측 컨텐츠 영역 글로우 */
.ok-orb-4 {
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(139,92,246,.18) 0%, transparent 70%);
top: -30px; right: -80px;
animation-duration: 13s; animation-delay: 2s;
}
/* 보너스: 좌측 하단 다크 인디고 */
.ok-orb-5 {
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(79,70,229,.25) 0%, transparent 70%);
bottom: 0; left: 10%;
animation-duration: 16s; animation-delay: 5s;
filter: blur(60px);
}
@keyframes ok-orb-drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(28px, 18px) scale(1.1); }
}
/* ── inner — 좌우 분할 레이아웃 ── */
.ok-hero-inner {
position: relative; z-index: 1;
max-width: 1400px; margin: 0 auto;
display: flex; flex-direction: row; align-items: stretch;
padding: 18px 0 14px 20px;
gap: 0;
width: 100%;
box-sizing: border-box;
}
/* ── 좌측: 텍스트 영역 ── */
.ok-hero-center {
flex: 1;
min-width: 0;
text-align: left;
padding-bottom: 0;
padding-right: 36px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
}
.ok-hero-label {
display: inline-flex; align-items: center; gap: 6px;
align-self: flex-start;
border: 1px solid rgba(167,139,250,.4);
background: rgba(109,40,217,.2);
backdrop-filter: blur(10px);
color: #c4b5fd;
font-size: 10.5px; font-weight: 800;
letter-spacing: 2.8px; text-transform: uppercase;
padding: 5px 14px; border-radius: 20px;
margin-bottom: 14px;
box-shadow: 0 0 24px rgba(139,92,246,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.ok-hero-title {
font-size: clamp(28px, 4.2vw, 52px);
font-weight: 900;
color: #fff; margin: 0 0 10px;
line-height: 1.08; letter-spacing: -1.5px;
text-shadow: 0 2px 40px rgba(99,102,241,.35);
}
.ok-hero-title em {
font-style: normal;
position: relative;
display: inline-block;
/*
* ── 고급 "빛 스캔" shimmer ──
* 두 개의 background 레이어를 합성:
* Layer 1 (위): 좁은 하이라이트 띠 — 왼→오른쪽으로 쓸고 지나감
* Layer 2 (아래): 차분한 라벤더-화이트 베이스 (고정)
*
* Layer 1 — 빛 띠 (움직임)
* Layer 2 — 라벤더 베이스 (고정)
*/
background:
/* 빛 띠: 좁고 밝은 하이라이트 */
linear-gradient(
105deg,
transparent 38%,
rgba(255,255,255,.0) 40%,
rgba(255,255,255,.6) 50%,
rgba(255,255,255,.0) 60%,
transparent 62%
),
/* 베이스: 라벤더-화이트 */
linear-gradient(
90deg,
#b8aef7 0%,
#ddd6fe 40%,
#ede9fe 60%,
#c4b5fd 100%
);
background-size: 280% auto, 100% auto;
background-position: 130% center, 0% center;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
animation: ok-title-light-sweep 4.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes ok-title-light-sweep {
/* 0~15%: 오른쪽 대기
15~55%: 왼쪽으로 쓸고 지나감 (ease-in-out 느낌)
55~100%: 오른쪽에서 다시 대기 → seamless */
0% { background-position: 145% center, 0% center; }
15% { background-position: 145% center, 0% center; }
60% { background-position: -45% center, 0% center; }
100% { background-position: -45% center, 0% center; }
}
.ok-hero-sub {
font-size: 13.5px; color: rgba(255,255,255,.45);
margin: 0 0 16px; line-height: 1.65;
max-width: 460px;
}
.ok-hero-trust {
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: flex-start;
margin-bottom: 0;
}
/* ── 사회적 증거 배지 행 ── */
.ok-hero-social-row {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.ok-hero-social-badge {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 700;
color: rgba(255,255,255,.65);
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px;
padding: 4px 11px;
white-space: nowrap;
}
.ok-hero-social-badge.ok-sb-hot {
color: #fcd34d;
background: rgba(245,158,11,.12);
border-color: rgba(245,158,11,.3);
box-shadow: 0 0 12px rgba(245,158,11,.15);
}
.ok-hero-social-badge.ok-sb-live {
color: #fca5a5;
background: rgba(239,68,68,.1);
border-color: rgba(239,68,68,.28);
}
.ok-sb-live-dot {
display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: #ef4444;
animation: ok-feed-pulse 1.4s ease-in-out infinite;
}
/* ── 희소성 게이지 (ok-hero-kuji-body 내부) ── */
.ok-kuji-scarcity-wrap { margin-bottom: 10px; }
.ok-kuji-scarcity-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 5px;
}
.ok-kuji-scarcity-label {
font-size: 10.5px; font-weight: 700;
color: rgba(255,255,255,.5);
}
.ok-kuji-scarcity-count {
font-size: 11.5px; font-weight: 900;
color: #fbbf24;
}
.ok-kuji-scarcity-count.ok-scarcity-danger {
color: #f87171;
animation: ok-scarcity-blink 1.1s ease-in-out infinite;
}
@keyframes ok-scarcity-blink {
0%,100% { opacity:1; } 50% { opacity:.5; }
}
.ok-kuji-scarcity-bar {
height: 5px; background: rgba(255,255,255,.1);
border-radius: 6px; overflow: hidden;
}
.ok-kuji-scarcity-fill {
height: 100%; border-radius: 6px;
background: linear-gradient(90deg, #34d399, #10b981);
transition: width .6s ease, background .4s ease;
}
.ok-kuji-scarcity-fill.ok-scarcity-danger {
background: linear-gradient(90deg, #f97316, #ef4444);
box-shadow: 0 0 8px rgba(239,68,68,.55);
}
/* ── 통계 뱃지 행 ── */
/* ── 우측: 추천 쿠지 슬라이더 ── */
/* ══ 쿠지 히어로 카드 — 와이드 2-컬럼 리디자인 ══ */
.ok-hero-kuji-slider {
width: 680px;
min-width: 500px;
flex-shrink: 0;
align-self: stretch;
display: flex;
flex-direction: column;
padding: 6px 16px 6px 0;
}
/* 카드 전체 래퍼 */
.ok-hero-kuji-card {
flex: 1;
min-height: 0;
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: row;
position: relative;
cursor: pointer;
background: rgba(10, 8, 30, .85);
border: 1px solid rgba(139,92,246,.22);
box-shadow:
0 8px 40px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.05),
0 0 40px rgba(139,92,246,.18);
}
/* 초기 진입 애니메이션 — 카드 틀 전체용 (최초 1회만) */
@keyframes ok-kuji-card-enter {
from { opacity: 0; transform: scale(.97) translateY(6px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* 텍스트 콘텐츠 페이드 (제목/가격/게이지 라벨) */
@keyframes _ok-txt-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* 상품 칩 — 오른쪽에서 왼쪽으로 슬라이드 인 (신규 이미지) */
@keyframes _ok-prizes-slide {
from { opacity: 0; transform: translateX(28px); }
to { opacity: 1; transform: translateX(0); }
}
/* 상품 칩 이미지 크로스페이드 — cur: 그 자리서 fade-out, next: 오른쪽에서 fade-in */
@keyframes _ok-chip-img-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-14px); }
}
@keyframes _ok-chip-img-in {
from { opacity: 0; transform: translateX(22px); }
to { opacity: 1; transform: translateX(0); }
}
.ok-hero-kuji-bg {
position: absolute; inset: 0;
overflow: hidden;
opacity: 0;
transition: opacity .32s ease, transform .75s cubic-bezier(.22,1,.36,1);
will-change: transform, opacity;
z-index: 1;
}
.ok-hero-kuji-bg.ok-img-active { opacity: 1; }
/* 배경 썸네일 img 태그 — 전체 영역 cover */
.ok-hero-kuji-bg img.ok-hero-kuji-bg-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
}
/* 콘텐츠 영역 fade 클래스 */
/* 텍스트 요소 fade 클래스 */
.ok-txt-fade {
animation: _ok-txt-fade .3s ease both;
}
/* 상품 칩 슬라이드 클래스 */
/* 초기 진입 시 칩 전체 슬라이드 (최초 1회) */
.ok-prizes-slide .ok-hkc-prize-chip {
animation: _ok-prizes-slide .35s cubic-bezier(.22,1,.36,1) both;
}
.ok-prizes-slide .ok-hkc-prize-chip:nth-child(2) { animation-delay: .05s; }
.ok-prizes-slide .ok-hkc-prize-chip:nth-child(3) { animation-delay: .1s; }
/* 이미지 레이어: 칩 내부 절대 좌표로 꽉 채움 */
/* ★ [REMAKE] 고정 2-layer A/B — CSS opacity transition만으로 교차, DOM 조작 없음 */
.ok-hkc-img-layer {
position: absolute; inset: 0;
width: 100%; height: 100%;
overflow: hidden;
opacity: 0;
transition: opacity .32s ease;
}
/* 초기 active 레이어만 보임 */
.ok-hkc-img-layer.ok-img-active {
opacity: 1;
}
.ok-hkc-img-layer img, .ok-hkc-img-layer .ok-hkc-prize-img-placeholder {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .4s ease;
}
/* 구 크로스페이드 애니 클래스 — 하위 호환 유지 (ok-prizes-slide 내 초기 렌더에서 사용) */
.ok-hkc-img-layer.ok-chip-img-out {
animation: _ok-chip-img-out .38s cubic-bezier(.22,1,.36,1) both;
z-index: 1;
}
.ok-hkc-img-layer.ok-chip-img-in {
animation: _ok-chip-img-in .38s cubic-bezier(.22,1,.36,1) both;
z-index: 2;
}
.ok-hkc-img-layer.ok-chip-img-in:nth-child(1) { animation-delay: 0s; }
/* 뱃지/텍스트는 항상 이미지 레이어 위 — position은 각자 원래 값 유지 */
.ok-hkc-prize-chip > .ok-hkc-prize-rank { z-index: 3; }
.ok-hkc-prize-chip > .ok-hkc-prize-name { z-index: 3; }
.ok-hero-kuji-card:hover {
border-color: rgba(139,92,246,.45);
box-shadow:
0 12px 56px rgba(0,0,0,.65),
0 0 0 1px rgba(255,255,255,.08),
0 0 60px rgba(139,92,246,.28);
}
/* ── 좌측 패널: 정보 + 상품 미리보기 ── */
.ok-hkc-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding: 12px 12px 10px 14px;
gap: 0;
position: relative;
z-index: 1;
}
/* 상단: HOT 배지 + 타이틀 */
.ok-hero-kuji-hot {
display: inline-flex; align-items: center; gap: 4px;
font-size: 9px; font-weight: 900; color: #fff;
background: linear-gradient(90deg, #f97316, #ef4444);
border-radius: 6px; padding: 2px 9px;
letter-spacing: .1em; text-transform: uppercase;
margin-bottom: 5px; align-self: flex-start;
box-shadow: 0 2px 10px rgba(249,115,22,.45);
}
/* 제목+가격 한 행 */
.ok-hkc-title-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
min-width: 0;
}
.ok-hero-kuji-title {
font-size: 15px; font-weight: 900;
color: #fff; line-height: 1.3;
text-shadow: 0 1px 8px rgba(0,0,0,.6);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 게이지 */
.ok-kuji-scarcity-wrap { margin-bottom: 7px; }
.ok-kuji-scarcity-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 5px;
}
.ok-kuji-scarcity-label {
font-size: 10px; font-weight: 700;
color: rgba(255,255,255,.45);
}
.ok-kuji-scarcity-count {
font-size: 11px; font-weight: 900;
color: #4ade80;
}
.ok-kuji-scarcity-count.ok-scarcity-danger {
color: #f87171;
animation: ok-scarcity-blink 1.1s ease-in-out infinite;
}
@keyframes ok-scarcity-blink {
0%,100% { opacity: 1; } 50% { opacity: .55; }
}
.ok-kuji-scarcity-bar {
height: 10px;
background: rgba(255,255,255,.08);
border-radius: 6px;
overflow: hidden;
position: relative;
}
/* 세그먼트 구분선 — 10칸으로 나눔 */
.ok-kuji-scarcity-bar::after {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
to right,
transparent 0px,
transparent calc(10% - 1.5px),
rgba(0,0,0,.55) calc(10% - 1.5px),
rgba(0,0,0,.55) calc(10% + 0px)
);
pointer-events: none;
z-index: 2;
border-radius: 6px;
}
.ok-kuji-scarcity-fill {
height: 100%; border-radius: 6px;
background: linear-gradient(90deg, #34d399 0%, #10b981 50%, #059669 100%);
transition: width .6s cubic-bezier(.22,1,.36,1);
position: relative;
z-index: 1;
box-shadow: 0 0 8px rgba(52,211,153,.5);
}
.ok-kuji-scarcity-fill.ok-scarcity-danger {
background: linear-gradient(90deg, #fca5a5 0%, #f87171 50%, #ef4444 100%);
box-shadow: 0 0 8px rgba(239,68,68,.5);
}
/* 가격 (제목 행에 인라인) */
.ok-hero-kuji-meta {
display: inline-flex; align-items: baseline; gap: 4px;
flex-shrink: 0;
}
.ok-hero-kuji-price {
font-size: 20px; font-weight: 900;
color: #fbbf24;
text-shadow: 0 0 16px rgba(251,191,36,.5);
letter-spacing: -.3px;
}
.ok-hero-kuji-left {
font-size: 11px; font-weight: 600;
color: rgba(255,255,255,.4);
}
/* CTA 버튼 */
.ok-hero-kuji-btn {
display: block; width: 100%;
background: linear-gradient(90deg, #f97316 0%, #ea580c 50%, #f59e0b 100%);
background-size: 200% auto;
border: none; border-radius: 11px;
color: #fff; font-size: 13px; font-weight: 900;
padding: 10px 0; text-align: center;
cursor: pointer; font-family: inherit;
letter-spacing: .04em;
box-shadow: 0 3px 16px rgba(249,115,22,.45);
animation: ok-cta-glow 2.4s ease-in-out infinite;
transition: background-position .4s ease, transform .15s, box-shadow .2s;
position: relative; overflow: hidden;
margin-bottom: 0;
}
.ok-hero-kuji-btn::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
transform: translateX(-100%);
transition: transform .5s ease;
}
.ok-hero-kuji-btn:hover::after { transform: translateX(100%); }
.ok-hero-kuji-btn:hover {
background-position: right center;
transform: translateY(-1px);
box-shadow: 0 5px 24px rgba(249,115,22,.6);
}
@keyframes ok-cta-glow {
0%,100% { box-shadow: 0 3px 16px rgba(249,115,22,.45); }
50% { box-shadow: 0 3px 24px rgba(249,115,22,.7), 0 0 36px rgba(245,158,11,.25); }
}
/* 인디케이터 — 우측 패널 하단 중앙 절대 배치 */
.ok-hero-kuji-dots {
position: absolute;
bottom: 10px;
left: 0; right: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
z-index: 10;
pointer-events: auto;
}
/* 인디케이터 전체 래퍼: 진한 불투명 pill */
.ok-kuji-num-indicator {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(0,0,0,.88);
border: 1.5px solid rgba(255,255,255,.38);
border-radius: 20px; padding: 5px 13px;
font-size: 13px; font-weight: 900;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 3px 14px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.12);
letter-spacing: .5px;
}
.ok-kuji-num-cur { color: #fbbf24; text-shadow: 0 0 10px rgba(251,191,36,.9), 0 0 20px rgba(251,191,36,.4); font-size: 14px; }
.ok-kuji-num-sep { color: rgba(255,255,255,.45); font-weight: 400; font-size: 11px; }
.ok-kuji-num-tot { color: rgba(255,255,255,.9); }
.ok-kuji-nav-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: rgba(0,0,0,.82);
border: 1.5px solid rgba(255,255,255,.4);
color: #fff;
font-size: 15px; cursor: pointer;
transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
flex-shrink: 0; user-select: none;
box-shadow: 0 2px 10px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);
line-height: 1;
}
.ok-kuji-nav-btn:hover {
background: rgba(251,191,36,.3);
border-color: rgba(251,191,36,.8);
color: #fbbf24;
box-shadow: 0 2px 14px rgba(251,191,36,.45);
}
/* ── 상품 미리보기 3개 ── */
.ok-hkc-prizes {
display: flex; gap: 6px;
margin-top: auto;
padding-top: 8px;
margin-bottom: 8px;
}
/* 카드 틀: 이미지 꽉 채우기 + 오버레이 배지 */
.ok-hkc-prize-chip {
flex: 1; min-width: 0;
border-radius: 10px;
overflow: hidden;
position: relative;
cursor: pointer;
aspect-ratio: 3/4;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
transition: border-color .2s, transform .18s;
}
.ok-hkc-prize-chip:hover {
border-color: rgba(139,92,246,.5);
transform: translateY(-2px);
}
/* 이미지: 카드 전체 꽉 채움 */
.ok-hkc-prize-img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.ok-hkc-prize-chip:hover .ok-hkc-prize-img { transform: scale(1.06); }
/* 레이어 내부 img 도 hover scale 적용 */
.ok-hkc-prize-chip:hover .ok-hkc-img-layer img { transform: scale(1.06); }
/* 이미지 없을 때 플레이스홀더 */
.ok-hkc-prize-img-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 26px;
background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(139,92,246,.18));
}
/* ── 등수 뱃지 (왼쪽 위) — ok-prize-rank-badge와 완전 동기화 ── */
.ok-hkc-prize-rank {
position: absolute;
top: 6px; left: 6px;
z-index: 3;
font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
padding: 3px 7px; border-radius: 6px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0,0,0,.5);
white-space: nowrap;
display: inline-flex; align-items: center;
color: #fff;
border: 1px solid rgba(255,255,255,.25);
}
/* 16색 무지개 — ok-prize-rank-badge 와 1:1 동일 */
.ok-hkc-prize-rank.rank-a { background:linear-gradient(135deg,#ff3b3b,#cc0000); box-shadow:0 2px 10px rgba(255,59,59,.6); }
.ok-hkc-prize-rank.rank-b { background:linear-gradient(135deg,#ff6d00,#e65100); box-shadow:0 2px 10px rgba(255,109,0,.6); }
.ok-hkc-prize-rank.rank-c { background:linear-gradient(135deg,#ffcc00,#e6a800); box-shadow:0 2px 10px rgba(255,204,0,.6); }
.ok-hkc-prize-rank.rank-d { background:linear-gradient(135deg,#aeea00,#6d9200); box-shadow:0 2px 10px rgba(174,234,0,.6); }
.ok-hkc-prize-rank.rank-e { background:linear-gradient(135deg,#00c853,#007a33); box-shadow:0 2px 10px rgba(0,200,83,.6); }
.ok-hkc-prize-rank.rank-f { background:linear-gradient(135deg,#00bfa5,#007a6e); box-shadow:0 2px 10px rgba(0,191,165,.6); }
.ok-hkc-prize-rank.rank-g { background:linear-gradient(135deg,#00b0ff,#0076b6); box-shadow:0 2px 10px rgba(0,176,255,.6); }
.ok-hkc-prize-rank.rank-h { background:linear-gradient(135deg,#2979ff,#0d47a1); box-shadow:0 2px 10px rgba(41,121,255,.6); }
.ok-hkc-prize-rank.rank-i { background:linear-gradient(135deg,#304ffe,#0026ca); box-shadow:0 2px 10px rgba(48,79,254,.6); }
.ok-hkc-prize-rank.rank-j { background:linear-gradient(135deg,#aa00ff,#6200ea); box-shadow:0 2px 10px rgba(170,0,255,.6); }
.ok-hkc-prize-rank.rank-k { background:linear-gradient(135deg,#d500f9,#9400b8); box-shadow:0 2px 10px rgba(213,0,249,.6); }
.ok-hkc-prize-rank.rank-l { background:linear-gradient(135deg,#f50057,#b0003a); box-shadow:0 2px 10px rgba(245,0,87,.6); }
.ok-hkc-prize-rank.rank-m { background:linear-gradient(135deg,#e91e63,#a8003a); box-shadow:0 2px 10px rgba(233,30,99,.6); }
.ok-hkc-prize-rank.rank-n { background:linear-gradient(135deg,#ff6e40,#c43e00); box-shadow:0 2px 10px rgba(255,110,64,.6); }
.ok-hkc-prize-rank.rank-o { background:linear-gradient(135deg,#ffd740,#c9a000); box-shadow:0 2px 10px rgba(255,215,64,.6); }
.ok-hkc-prize-rank.rank-p { background:linear-gradient(135deg,#00e5ff,#009db5); box-shadow:0 2px 10px rgba(0,229,255,.6); }
.ok-hkc-prize-rank.rank-default { background:rgba(30,30,50,.85); color:#a5b4fc; border-color:rgba(99,102,241,.35); }
/* LAST 특별상 — ok-prize-item의 LAST 인라인 스타일과 동일 */
.ok-hkc-prize-rank.rank-last {
background: linear-gradient(135deg,#f59e0b,#d97706);
color: #1a1000;
border-color: rgba(255,255,255,.25);
box-shadow: 0 2px 10px rgba(251,191,36,.6);
}
/* ── 상품명 뱃지 (이미지 하단 중앙, 반투명 검정) ── */
.ok-hkc-prize-name {
position: absolute;
bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,.62);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: #fff;
font-size: 9px; font-weight: 700;
text-align: center;
padding: 4px 5px 5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.3;
z-index: 2;
/* ★ [UI-FIX] 칩 하단 border-radius(10px)와 일치 → 상품명 바가 카드 모서리를 덮지 않음 */
border-radius: 0 0 10px 10px;
}
/* ── 우측 패널: 썸네일 ── */
.ok-hkc-right {
width: 210px;
flex-shrink: 0;
position: relative;
overflow: hidden;
border-radius: 0 17px 17px 0;
}
.ok-hero-kuji-card:hover .ok-hero-kuji-bg { transform: scale(1.05); }
/* 썸네일 좌측 페이드 제거 */
.ok-hkc-right::after {
display: none;
}
.ok-hero-kuji-thumb-placeholder {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 56px;
background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(139,92,246,.15));
}
/* 기존 overlay — 우측 패널에선 불필요, 숨김 */
.ok-hero-kuji-overlay { display: none; }
/* 기존 body — 좌측 패널로 이동했으므로 숨김 */
.ok-hero-kuji-body { display: none; }
/* 기존 dot (미사용) */
.ok-hero-kuji-dot { display: none; }
/* ── 하단 마퀴 ticker — 라이브 이벤트형 ── */
.ok-hero-ticker-wrap {
width: 100%;
/* 배너 배경과 부드럽게 이어지는 그라디언트 */
border-top: 1px solid rgba(255,255,255,.06);
background: linear-gradient(180deg,
rgba(8,4,28,.82) 0%,
rgba(4,2,18,.88) 100%);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
padding: 0;
box-sizing: border-box;
position: relative;
}
/* 상단에 골드 액센트 라인 (구매 욕구 자극) */
.ok-hero-ticker-wrap::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(245,158,11,.5) 20%,
rgba(251,191,36,.8) 50%,
rgba(245,158,11,.5) 80%,
transparent 100%);
animation: ok-ticker-gold-line 3s ease-in-out infinite;
}
@keyframes ok-ticker-gold-line {
0%,100% { opacity:.6; }
50% { opacity:1; }
}
/* 상단 라인 — ok-hero-ticker-wrap::before 로 통합 */
.ok-ticker-label {
display: flex; align-items: center; gap: 8px;
padding: 7px 18px 6px;
border-bottom: 1px solid rgba(239,68,68,.15);
font-size: 11px; font-weight: 800;
color: rgba(255,255,255,.82); letter-spacing: .04em; text-transform: uppercase;
white-space: nowrap;
background: rgba(239,68,68,.07);
}
/* LIVE 배지 */
.ok-live-badge {
display: inline-flex; align-items: center; gap: 5px;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
font-size: 10px; font-weight: 900;
letter-spacing: .08em;
padding: 2px 8px 2px 6px;
border-radius: 4px;
box-shadow: 0 0 10px rgba(239,68,68,.55), 0 2px 6px rgba(0,0,0,.4);
flex-shrink: 0;
animation: ok-live-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes ok-live-badge-pulse {
0%,100% { box-shadow: 0 0 10px rgba(239,68,68,.55), 0 2px 6px rgba(0,0,0,.4); }
50% { box-shadow: 0 0 20px rgba(239,68,68,.9), 0 2px 8px rgba(0,0,0,.5); }
}
.ok-live-badge-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #fff;
animation: ok-feed-pulse 1.4s ease-in-out infinite;
flex-shrink: 0;
}
.ok-ticker-label-text {
color: rgba(255,255,255,.78);
font-size: 11px; font-weight: 700;
}
.ok-ticker-label .ok-feed-live-dot { display: none; /* LIVE 배지로 대체 */ }
.ok-ticker-label .ok-hero-feed-count {
font-size: 10px; font-weight: 800; color: #fda4af;
background: rgba(239,68,68,.16);
border: 1px solid rgba(239,68,68,.3);
border-radius: 20px; padding: 1px 8px;
}
.ok-ticker-label .ok-feed-latest-time {
font-size: 10px; font-weight: 700; color: #a5f3fc;
background: rgba(6,182,212,.15);
border: 1px solid rgba(6,182,212,.3);
border-radius: 20px; padding: 1px 8px;
}
.ok-ticker-label .ok-feed-latest-time:empty { display: none; }
/* 트랙 외부 컨테이너 — 세로 클리핑만, 가로는 열어줌 */
.ok-ticker-track-outer {
position: relative;
height: 76px;
overflow: hidden; /* 좌우 클리핑 — 카드가 밖으로 나가면 숨김 */
}
/* 좌우 페이드 엣지 — PC만 표시, 모바일 제거 */
.ok-ticker-fade-l,
.ok-ticker-fade-r {
display: block;
position: absolute; top: 0; bottom: 0; width: 60px;
z-index: 2; pointer-events: none;
}
.ok-ticker-fade-l {
left: 0;
background: linear-gradient(to right, rgba(4,2,18,.95) 0%, transparent 100%);
}
.ok-ticker-fade-r {
right: 0;
background: linear-gradient(to left, rgba(4,2,18,.95) 0%, transparent 100%);
}
/* ── conveyor 트랙 ──
카드들을 absolute 배치, JS가 각 카드의 x좌표를 직접 계산
overflow:hidden인 부모가 뷰포트 역할 */
#okHeroFeedList.ok-ticker-track {
position: relative;
width: 100%; height: 100%;
overflow: visible;
}
/* ── conveyor 카드 아이템 ── */
.ok-hero-feed-item {
position: absolute; /* JS가 transform으로 x+y 위치 제어 */
top: 0; transform: translateX(0) translateY(0);
width: auto; /* 텍스트 길이에 맞게 동적 조절 */
min-width: 140px; /* 최소 너비 */
max-width: 220px; /* PC 최대 너비 */
height: 56px;
box-sizing: border-box;
display: flex; align-items: stretch;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
cursor: default;
box-shadow: 0 2px 12px rgba(0,0,0,.28);
will-change: transform;
visibility: hidden; /* 측정 중 숨김 — JS에서 측정 후 visible로 변경 */
}
.ok-hero-feed-item:hover {
border-color: rgba(255,255,255,.22);
box-shadow: 0 4px 18px rgba(0,0,0,.4);
}
/* ── 등급별 카드 컬러 ── */
.ok-hero-feed-item.ok-grade-1,
.ok-hero-feed-item.ok-grade-A {
border-color: rgba(251,191,36,.45);
box-shadow: 0 2px 14px rgba(245,158,11,.25), inset 0 0 0 1px rgba(251,191,36,.1);
}
.ok-hero-feed-item.ok-grade-2,
.ok-hero-feed-item.ok-grade-B {
border-color: rgba(203,213,225,.35);
}
.ok-hero-feed-item.ok-grade-3,
.ok-hero-feed-item.ok-grade-C {
border-color: rgba(217,119,6,.35);
}
/* ── 이미지: 카드 왼쪽 전체를 꽉 채움 ── */
.ok-hero-feed-thumb-wrap {
width: 56px; /* 카드 높이와 동일 → 정사각형 */
min-width: 56px;
height: 100%; /* 카드 높이 전체 */
flex-shrink: 0;
overflow: hidden;
background: rgba(255,255,255,.06);
display: flex; align-items: center; justify-content: center;
border-right: 1px solid rgba(255,255,255,.08);
}
.ok-hero-feed-thumb {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.ok-feed-thumb-fallback {
font-size: 20px; line-height: 1;
}
/* ── 텍스트 영역 ── */
.ok-hero-feed-body {
display: flex; flex-direction: column; justify-content: center; gap: 3px;
flex: 0 1 auto; min-width: 0;
padding: 0 8px;
overflow: hidden;
white-space: nowrap;
}
.ok-hero-feed-nick {
font-size: 11px; font-weight: 800; color: rgba(255,255,255,.9);
letter-spacing: .01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ok-hero-feed-prize {
font-size: 10px; font-weight: 600;
color: rgba(255,255,255,.48);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── empty 상태 ── */
.ok-hero-feed-empty {
font-size: 13px; color: rgba(255,255,255,.32);
padding: 0 40px; white-space: nowrap;
display: flex; align-items: center; gap: 8px;
height: 48px;
}
.ok-hero-feed-empty::before {
content: '📡'; font-size: 16px; opacity: .55;
}
/* ── 버튼 ── */
.ok-hero-guide-btn {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
backdrop-filter: blur(8px);
color: rgba(255,255,255,.88);
font-size: 13px; font-weight: 700;
padding: 9px 18px; border-radius: 10px;
cursor: pointer; font-family: inherit;
text-decoration: none;
transition: background .18s, border-color .18s, transform .15s, box-shadow .18s;
}
.ok-hero-guide-btn:hover {
background: rgba(139,92,246,.28);
border-color: rgba(139,92,246,.5);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139,92,246,.3);
color: #fff;
}
.ok-hero-app-btn {
background: linear-gradient(135deg, rgba(22,163,74,.3), rgba(16,185,129,.2));
border-color: rgba(52,211,153,.35);
color: #6ee7b7;
}
.ok-hero-app-btn:hover {
background: linear-gradient(135deg, rgba(22,163,74,.5), rgba(16,185,129,.35));
border-color: rgba(52,211,153,.6);
box-shadow: 0 6px 20px rgba(16,185,129,.3);
color: #a7f3d0;
}
.ok-hero-prob-link {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(139,92,246,.18);
border: 1px solid rgba(139,92,246,.38);
color: #c4b5fd; font-size: 13px; font-weight: 800;
padding: 9px 18px; border-radius: 10px;
text-decoration: none;
transition: background .18s, transform .15s, box-shadow .18s;
}
.ok-hero-prob-link:hover {
background: rgba(139,92,246,.35);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139,92,246,.3);
}
@keyframes ok-feed-pulse {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:.3; transform:scale(.6); }
}
/* ── 반응형 1200px: 슬라이더 숨김 (카드가 넓어졌으므로 기준 상향) ── */
@media (max-width: 1200px) {
.ok-hero-kuji-slider { display: none; }
.ok-hero-inner { gap: 0; }
}
/* ── 반응형 768px ── */
@media (max-width: 768px) {
/* 모바일 파티클·오브 애니메이션 완전 제거 (렉 방지) */
.ok-hero-particles, .ok-hero-orbs,
.ok-ptc, .ok-orb { display: none !important; }
.ok-hero-inner { flex-direction: column; padding: 24px 16px 0 16px; gap: 0; }
.ok-hero-center { text-align: center; padding-right: 0; justify-content: flex-start; align-items: center; }
/* ONLINE KUJI 뱃지 — 모바일 중앙 정렬 */
.ok-hero-label { align-self: center; margin-left: auto; margin-right: auto; }
.ok-hero-sub { margin: 0 auto 18px; }
.ok-hero-trust { justify-content: center; }
/* 사회적 증거 배지 행 — 중앙 + 하단 여백 추가 */
.ok-hero-social-row { justify-content: center; margin-top: 14px; margin-bottom: 16px; padding-bottom: 0; }
/* ok-hero-stats 제거됨 */
.ok-hero-title { font-size: 26px; letter-spacing: -.8px; }
.ok-hero-sub { font-size: 13px; }
.ok-hero-guide-btn, .ok-hero-prob-link { font-size: 11.5px; padding: 7px 12px; }
/* 모바일: 최대 너비 축소 */
.ok-ticker-fade-l,
.ok-ticker-fade-r { display: none; }
.ok-ticker-track-outer { height: 64px; }
/* 모바일: 카드 최대 너비 줄여서 간격 조정 */
.ok-hero-feed-item { width: auto; min-width: 120px; max-width: 175px; height: 48px; }
.ok-hero-feed-thumb-wrap { width: 48px; min-width: 48px; }
.ok-hero-feed-nick { font-size: 10px; }
.ok-hero-feed-prize { font-size: 9px; }
.ok-ticker-label { padding: 5px 14px 4px; font-size: 10px; }
.ok-live-badge { font-size: 9px; padding: 1px 6px 1px 5px; }
.ok-ticker-label-today { display: none; }
}
@media (max-width: 480px) {
.ok-hero-title { font-size: 22px; }
.ok-hero-sub { font-size: 12px; }
.ok-hero-inner { padding: 18px 12px 0; }
.ok-hero-social-row { gap: 7px; }
.ok-hero-social-badge { font-size: 10.5px; padding: 4px 10px; }
}
/* 구버전 클래스 호환 */
.ok-hero-badge { display: none; }
.ok-hero-content { }
.ok-hero-deco { display: none; }
.ok-hero-left { display: none !important; }
.ok-hero-feed-panel { display: none !important; }
.ok-hero-feed-header { display: none !important; }
/* ── ok-hero-ticker-wrap은 배너 직계 자식 → negative margin 불필요 ── */
/* (구버전 negative margin 보정 제거됨) */
/* (구버전 ok-hero-feed-empty::before, ok-hero-label, ok-hero-title 등 중복 제거됨) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
온라인쿠지 골드 마키 공지 바 .ok-notice-marquee-wrap
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ok-notice-marquee-wrap {
display: none; /* JS로 enabled 확인 후 표시 */
position: relative;
width: 100%;
overflow: hidden;
background: linear-gradient(90deg,
#0d0a00 0%,
#1a1200 8%,
#110e00 50%,
#1a1200 92%,
#0d0a00 100%);
border-top: 1px solid rgba(212,175,55,.18);
border-bottom: 1px solid rgba(212,175,55,.18);
/* 내부 황금빛 shimmer 라인 */
box-shadow:
inset 0 1px 0 rgba(212,175,55,.08),
inset 0 -1px 0 rgba(212,175,55,.08);
}
/* 좌우 페이드 오버레이 */
.ok-notice-marquee-wrap::before,
.ok-notice-marquee-wrap::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 72px;
z-index: 3;
pointer-events: none;
}
.ok-notice-marquee-wrap::before {
left: 0;
background: linear-gradient(to right, #0d0a00 0%, transparent 100%);
}
.ok-notice-marquee-wrap::after {
right: 0;
background: linear-gradient(to left, #0d0a00 0%, transparent 100%);
}
/* 왼쪽 고정 라벨 */
.ok-notice-label {
position: absolute;
left: 0; top: 0; bottom: 0;
z-index: 4;
display: flex;
align-items: center;
padding: 0 16px 0 16px;
background: linear-gradient(90deg, #1a1200 70%, transparent 100%);
white-space: nowrap;
font-size: 11px;
font-weight: 700;
letter-spacing: .10em;
color: rgba(212,175,55,.75);
text-transform: uppercase;
gap: 5px;
}
.ok-notice-label::before {
content: '📢';
font-size: 12px;
line-height: 1;
}
/* 마키 트랙 */
/* 트랙 outer — padding-left는 JS가 라벨 너비 측정 후 동적 적용 */
.ok-notice-track-outer {
height: 38px;
overflow: hidden;
}
/* conveyor 트랙 — rAF 방식 */
.ok-notice-track {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
}
/* 개별 공지 텍스트 */
.ok-notice-chip {
position: absolute;
top: 0; /* JS transform으로 수직 중앙 처리 */
white-space: nowrap;
display: inline-block;
padding: 0 48px 0 0; /* 다음 반복과 간격 */
font-size: 13px;
font-weight: 500;
letter-spacing: .02em;
color: #d9c47a;
text-shadow: 0 0 18px rgba(212,175,55,.25);
will-change: transform;
}
@media (max-width: 480px) {
.ok-notice-track-outer { height: 34px; }
.ok-notice-chip { font-size: 12px; padding: 0 36px 0 0; }
.ok-notice-marquee-wrap::before,
.ok-notice-marquee-wrap::after { width: 40px; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 섹션 헤더 (타이틀 + 필터 한 줄) */
/* ── 온라인쿠지 리스트 헤더 (네온 다크 테마) ── */
/* PC: 소제목 | 필터버튼들 | 기본순 | 기록 — 모두 한 줄 */
.ok-section-header {
display: flex; flex-direction: row; align-items: center;
justify-content: space-between;
padding: 14px 24px 12px; gap: 12px;
border-bottom: 1.5px solid var(--border);
margin-bottom: 4px;
}
/* ok-header-top: PC에서는 숨기고 title만 직접 배치 */
.ok-header-top {
display: contents; /* PC: 자식 요소들이 section-header에 직접 참여 */
}
.ok-section-title {
font-size: 18px; font-weight: 900; color: var(--text-1);
display: flex; align-items: center; gap: 8px;
letter-spacing: -.3px; margin: 0; flex-shrink: 0;
}
.ok-section-title .ok-title-icon { font-size: 18px; line-height: 1; }
.ok-section-title .ok-title-text { color: var(--brand); }
.ok-section-count {
font-size: 12px; font-weight: 700; color: var(--brand);
background: none;
border: 1.5px solid var(--brand);
border-radius: 99px; padding: 2px 10px;
letter-spacing: .2px;
}
/* PC: 필터버튼 행 — 소제목 바로 오른쪽에 인라인 배치 */
.ok-filter-row { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
/* PC: 필터행 구매내역 버튼 숨김 (헤더 액션에만 표시) */
.ok-history-btn-filter { display: none !important; }
/* PC: 오른쪽 필터 그룹 wrapper — flex 아이템처럼 투명하게 */
.ok-filter-right-group { display: contents; }
.ok-filter-btn {
padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
border: 1.5px solid var(--border); background: none;
color: var(--text-3); cursor: pointer; transition: all .2s;
font-family: inherit; letter-spacing: .01em;
}
.ok-filter-btn:hover { border-color: var(--brand); color: var(--brand); }
.ok-filter-btn.active {
background: var(--brand); border-color: var(--brand);
color: #fff; font-weight: 700;
box-shadow: 0 2px 8px rgba(80,70,229,.30);
}
.ok-filter-btn[data-filter="active"].active {
background: #059669; border-color: #059669;
box-shadow: 0 2px 8px rgba(5,150,105,.30);
}
.ok-filter-btn[data-filter="waiting"].active {
background: #2563eb; border-color: #2563eb;
box-shadow: 0 2px 8px rgba(37,99,235,.30);
}
.ok-filter-btn[data-filter="ended"].active {
background: #d97706; border-color: #d97706;
box-shadow: 0 2px 8px rgba(217,119,6,.35); color: #fff;
}
.ok-filter-btn[data-filter="sold"].active {
background: #d97706; border-color: #d97706;
box-shadow: 0 2px 8px rgba(217,119,6,.35); color: #fff;
}
/* ── 확률 공시 배너 (인라인 알림 바 스타일) ── */
.prob-banner {
display: flex; align-items: center; gap: 12px;
background: rgba(99,102,241,.07);
border-left: 3px solid var(--brand);
border-radius: 0 10px 10px 0;
padding: 12px 16px; margin: 0 0 18px;
transition: background .18s;
}
.prob-banner:hover { background: rgba(99,102,241,.12); }
.prob-banner__icon-wrap {
width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
background: linear-gradient(135deg, var(--brand), var(--accent));
display: flex; align-items: center; justify-content: center;
box-shadow: 0 3px 10px rgba(99,102,241,.3);
}
.prob-banner__icon { font-size: 18px; line-height: 1; }
.prob-banner__body { flex: 1; min-width: 0; }
.prob-banner__tag {
font-size: 10px; font-weight: 800; color: var(--brand);
letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px;
}
.prob-banner__title {
font-size: 14px; font-weight: 900; color: var(--text-1); margin-bottom: 2px;
}
.prob-banner__desc {
font-size: 11.5px; color: var(--text-3); font-weight: 500; line-height: 1.4;
}
.prob-banner__btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 14px; border-radius: 999px;
background: linear-gradient(135deg, var(--brand), var(--accent));
color: #fff; font-size: 12px; font-weight: 800;
text-decoration: none; white-space: nowrap; flex-shrink: 0;
box-shadow: 0 3px 10px rgba(99,102,241,.3);
transition: opacity .18s, transform .18s;
}
.prob-banner__btn:hover { opacity: .88; transform: translateY(-1px); }
.prob-banner__btn-arrow { font-size: 14px; }
@media(max-width: 560px) {
.prob-banner { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.prob-banner__btn { width: 100%; justify-content: center; font-size: 13px; }
.prob-banner__title { font-size: 13px; }
.prob-banner__desc { display: none; }
}
/* 히어로 배너 — 위에 새 스타일로 정의됨 (ok-hero-banner, ok-hero-inner 등) */
/* 하위 호환: 구 클래스명 유지 */
.ok-hero-badge { display: none; } /* 새 ok-hero-label로 대체 */
.ok-hero-content { }
.ok-hero-deco { display: none; } /* 새 디자인에서 제거 */
/* 쿠지 세트 그리드 */
.ok-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding: 0 24px 32px; margin-top: 0; }
@media(max-width:600px){ .ok-set-grid{ grid-template-columns: repeat(2,1fr); gap:4px; padding:0 16px 24px; } }
@media(max-width:380px){ .ok-set-grid{ grid-template-columns: repeat(2,1fr); gap:3px; padding:0 12px 20px; } }
/* 라스트원 배지 텍스트 — 전역 기본값 (미디어쿼리보다 앞에 있어야 함) */
.ok-lastone-txt-full { display: inline; }
.ok-lastone-txt-short { display: none; }
/* 온라인쿠지 모바일 최적화 — breakpoint 768px (방송쿠지와 통일) */
@media(max-width:768px){
/* ok-hero-title/sub 반응형은 위 B안 블록에서 처리 */
.ok-hero-trust-item{ font-size:11px; padding:5px 10px; }
/* ── 목록 헤더: 방송쿠지 .bkj-list-header 모바일과 완전 동일 ── */
.ok-section-header{
flex-direction: column !important;
align-items: flex-start !important;
padding: 11px 14px 10px; gap: 8px;
}
.ok-header-top{
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 6px; width: 100%;
}
.ok-section-title{ font-size:18px; }
/* 모바일: 필터행 — 구매내역(왼쪽) / 필터들(오른쪽) */
.ok-filter-row{
display: flex !important;
justify-content: space-between;
align-items: center;
gap: 4px; width: 100%;
flex-wrap: nowrap;
}
/* 오른쪽 필터 그룹 wrapper */
.ok-filter-right-group {
display: flex !important;
gap: 4px; align-items: center; flex-shrink: 0;
}
.ok-filter-btn{ padding:4px 11px; font-size:11px; }
.ok-header-actions{ gap:4px; flex-shrink:0; }
.ok-guide-how-btn{ display:none !important; }
.ok-history-btn-header{ display:none !important; }
/* 모바일 필터행 구매내역 버튼: 왼쪽에 단독 배치 */
.ok-history-btn-filter{
display:inline-flex !important;
padding:4px 13px; border-radius:999px; font-size:11px; font-weight:900;
background:#f59e0b; border:none;
color:#431407; cursor:pointer; font-family:inherit;
transition:background .15s; white-space:nowrap; letter-spacing:.01em;
box-shadow: 0 1px 5px rgba(245,158,11,.35);
flex-shrink: 0;
}
.ok-history-btn-filter:hover{ background:#e08b00; }
.ok-sort-select{ padding:4px 8px; font-size:11px; }
/* ── 상세 뷰 헤더 (목록과 무관) ── */
.ok-detail-header{ padding:12px 12px 14px !important; margin-top:10px !important; margin-bottom:10px !important; }
.ok-detail-thumb { width:90px !important; height:90px !important; border-radius:11px !important; }
.ok-detail-title { font-size:14px !important; margin-bottom:6px !important; }
.ok-detail-info { gap:12px !important; }
.ok-meta-item { font-size:11px !important; padding:4px 8px !important; border-radius:8px !important; height:26px !important; line-height:1 !important; }
.ok-meta-item.price, .ok-meta-item.price.free { font-size:11px !important; letter-spacing:.02em !important; margin:0 !important; }
.ok-meta-item.price b, .ok-meta-item.price.free b { font-size:11px !important; }
.ok-detail-timer-label { font-size:10.5px !important; }
.ok-detail-timer-val { font-size:13px !important; }
.ok-detail-desc { font-size:12px !important; padding:9px 11px !important; margin-top:10px !important; }
.ok-prizes-section, .ok-papers-section { margin-bottom:10px !important; }
.ok-divider { margin:8px 0 !important; }
.ok-pull-timer-bar { margin-top:8px !important; font-size:12px !important; }
.ok-pull-point-bar { font-size:11px !important; margin-top:5px !important; }
.ok-section-label { font-size:11px !important; margin-bottom:8px !important; }
/* ── ok-set-card 모바일 ── */
.ok-set-card{ border-radius:16px; }
.ok-set-card-body{ padding:10px 11px 12px; }
.ok-set-card-title{ font-size:12px; margin-bottom:6px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ok-set-card-price{ font-size:clamp(11px,3.5vw,14px); white-space:nowrap; flex-shrink:0; }
.ok-set-card-left{ font-size:clamp(8px,2.2vw,10px); padding:2px 7px; white-space:nowrap; flex-shrink:0; border-radius:999px; }
.ok-set-card-footer{ margin-top:8px; gap:4px; flex-wrap:nowrap; min-width:0; }
.ok-set-card-meta{ flex-wrap:nowrap; overflow:hidden; gap:2px; row-gap:0; margin-bottom:3px; align-items:center; }
.ok-status-pill { padding:4px 8px !important; font-size:10px !important; border-radius:999px !important; }
/* 게이지 모바일 */
.ok-set-card-gauge{ height:9px; border-radius:5px; }
.ok-set-card-gauge-track{ border-radius:5px; }
.ok-set-card-gauge-track::before{ border-radius:5px; }
.ok-set-card-gauge-mask{ border-radius:0 5px 5px 0; }
.ok-set-card-gauge-label{ font-size:8px; right:4px; }
/* 배지 오버레이 위치 — 모바일 */
.ok-card-img-overlay-rb { bottom:4px; right:4px; }
.ok-card-img-queue { font-size:9px !important; padding:3px 6px !important; gap:1px !important; }
/* 모바일에서는 "👥 대기 N명" → "👥N명" 으로 data-attr 활용 */
.ok-card-img-queue .ok-badge-label { display: none; }
/* ok-card-img-overlay-lt 모바일 오버라이드 불필요 — 전역값과 동일 */
.ok-card-lastone-badge { font-size:10px !important; padding:4.5px 9.5px !important; gap:3.5px !important; letter-spacing:.03em !important; }
.ok-card-limit-badge { font-size:10px !important; padding:4.5px 9.5px !important; gap:3.5px !important; letter-spacing:.03em !important; }
/* 모바일: 장수제한 배지 없으면 full, 있으면 short */
.ok-lastone-txt-full { display: inline; }
.ok-lastone-txt-short { display: none; }
.has-maxbadge .ok-lastone-txt-full { display: none; }
.has-maxbadge .ok-lastone-txt-short { display: inline; }
}
.ok-set-card {
/* 귀여운 파스텔 다크 배경 + 뚜렷한 테두리 */
background: linear-gradient(175deg, #1e1b2e 0%, #13111a 100%);
border: 2px solid rgba(251,191,36,.7);
border-radius: 20px; overflow: hidden; cursor: pointer;
transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s;
position: relative;
box-shadow:
0 0 0 1px rgba(255,210,80,.12),
0 4px 20px rgba(0,0,0,.55),
0 0 18px rgba(251,191,36,.1),
inset 0 1px 0 rgba(255,220,100,.1);
}
.ok-set-card:hover {
transform: translateY(-5px) scale(1.012);
border-color: rgba(251,191,36,1);
box-shadow:
0 0 0 1px rgba(251,191,36,.25),
0 14px 40px rgba(0,0,0,.6),
0 0 28px rgba(251,191,36,.22);
}
.ok-set-card.status-active {
border-color: rgba(251,191,36,.8);
box-shadow: 0 0 0 1px rgba(255,210,80,.15), 0 4px 24px rgba(0,0,0,.6), 0 0 16px rgba(251,191,36,.12);
}
.ok-set-card.status-active:hover {
border-color: rgba(251,191,36,1);
box-shadow: 0 0 0 1px rgba(251,191,36,.3), 0 14px 40px rgba(0,0,0,.6), 0 0 30px rgba(251,191,36,.25);
}
.ok-set-card.status-sold { border-color: rgba(167,139,250,.7); opacity:.9; cursor:pointer; }
.ok-set-card.status-sold:hover { border-color: rgba(167,139,250,.95); box-shadow: 0 14px 40px rgba(139,92,246,.25); transform: translateY(-4px); }
.ok-set-card.status-ended { opacity: .4; pointer-events: none; }
/* ── 라스트원 포함 카드 — 금색 solid 테두리
status-active / status-sold 등 다른 status 클래스가 뒤에 선언되어
border-color를 덮어쓰는 문제를 막기 위해 status 조합 셀렉터로 명시 ── */
.ok-set-card.has-lastone,
.ok-set-card.has-lastone.status-active,
.ok-set-card.has-lastone.status-waiting,
.ok-set-card.has-lastone.status-ended {
border-color: #c9951e;
box-shadow:
0 0 0 2px rgba(201,149,30,.28),
0 4px 20px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,220,100,.1);
}
.ok-set-card.has-lastone:hover,
.ok-set-card.has-lastone.status-active:hover,
.ok-set-card.has-lastone.status-waiting:hover {
border-color: #e8b832;
box-shadow:
0 0 0 2px rgba(232,184,50,.35),
0 14px 40px rgba(0,0,0,.6),
0 0 20px rgba(201,149,30,.18);
}
/* 좌상단 배지 래퍼 */
.ok-card-img-overlay-lt {
position: absolute; top: 6px; left: 6px; z-index: 3;
display: flex;
}
/* ⭐ 라스트원 포함 배지 */
.ok-card-lastone-badge {
display: inline-flex; align-items: center; gap: 4px;
background: linear-gradient(135deg, rgba(30,20,0,.92) 0%, rgba(50,34,0,.92) 100%);
color: #f5d060;
font-size: 12.5px; font-weight: 900; letter-spacing: .04em;
padding: 5.5px 12px; border-radius: 999px;
border: 1.5px solid #c9951e;
box-shadow:
0 0 0 1px rgba(201,149,30,.25),
0 2px 10px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,220,100,.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
white-space: nowrap; line-height: 1;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
@media (hover: none) {
.ok-set-card:hover,
.ok-set-card.status-active:hover,
.ok-set-card.status-sold:hover {
transform: none; border-color: inherit; box-shadow: none;
}
}
/* 썸네일 — 가로:세로 = 4:3 (16:12), cover */
.ok-set-card-thumb {
width: 100%; aspect-ratio: 4/3; object-fit: cover;
display: block; background: #0a0810;
transition: transform .35s ease;
}
.ok-set-card:hover .ok-set-card-thumb { transform: scale(1.04); }
/* 썸네일 래퍼 */
.ok-set-card-thumb-wrap {
position: relative; overflow: hidden;
}
/* 이미지 하단 그라디언트 없음 */
/* 이미지 왼쪽 상단 배지 (legacy) */
.ok-card-img-overlay-left {
position: absolute; top: 10px; left: 10px; z-index: 3;
}
/* 이미지 오른쪽 하단 배지 — 대기 인원 */
.ok-card-img-overlay-rb {
position: absolute; bottom: 8px; right: 8px; z-index: 3;
}
/* 상태/대기 배지 공통 — 귀여운 pill 스타일 */
.ok-card-img-status,
.ok-card-img-queue {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: none;
padding: 5px 11px; border-radius: 999px;
white-space: nowrap; line-height: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* 진행중 배지 — 사용 안 함 (숨김) */
.ok-card-img-status--active { display: none; }
/* 대기중 — 부드러운 라벤더 */
.ok-card-img-status--waiting {
background: rgba(167,139,250,.85);
color: #fff;
border: 1.5px solid rgba(216,180,254,.7);
box-shadow: 0 2px 10px rgba(139,92,246,.3), 0 1px 4px rgba(0,0,0,.3);
}
/* 완판 — 부드러운 핑크/레드 */
.ok-card-img-status--sold {
background: rgba(251,113,133,.88);
color: #fff;
border: 1.5px solid rgba(253,164,175,.7);
box-shadow: 0 2px 10px rgba(239,68,68,.3), 0 1px 4px rgba(0,0,0,.3);
}
/* 대기 인원 배지 — 기본(0명) */
.ok-card-img-queue {
background: rgba(15,12,28,.75);
color: #cbd5e1;
border: 1.5px solid rgba(251,191,36,.35);
box-shadow: 0 1px 4px rgba(0,0,0,.3);
font-size: 13px; padding: 6px 13px;
}
/* 대기 있음 — 주황색 뚜렷하게, 애니메이션 없음 */
.ok-card-img-queue.has-waiting {
background: #f97316;
color: #fff;
font-weight: 800;
border: 1.5px solid rgba(255,210,150,.6);
box-shadow: 0 2px 12px rgba(249,115,22,.55), 0 1px 4px rgba(0,0,0,.4);
text-shadow: 0 1px 2px rgba(0,0,0,.3);
animation: none;
font-size: 13px; padding: 6px 13px;
}
.ok-set-card-thumb-placeholder {
width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #13111a, #1a1625);
font-size: 52px;
}
/* ── 카드 바디 ── */
.ok-set-card-body { padding: 13px 14px 15px; }
/* 제목 */
.ok-set-card-title {
font-size: 14px; font-weight: 800; color: #f1f5f9;
margin-bottom: 6px; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* 제목 아래 배지 행 — 진행중 왼쪽, 대기 오른쪽 */
.ok-set-card-title-badges {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px; min-height: 24px; gap: 4px;
}
.ok-card-title-status,
.ok-card-title-queue { display: flex; align-items: center; }
.ok-set-card-meta { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; row-gap: 4px; }
/* 가격 + 남은장 */
.ok-set-card-footer {
display: flex; align-items: center; justify-content: space-between;
margin-top: 10px; gap: 6px; flex-wrap: nowrap; min-width: 0;
}
/* 가격 */
.ok-set-card-price {
font-size: clamp(12px, 3.8vw, 16px); font-weight: 900;
color: #fbbf24;
letter-spacing: -.01em;
text-shadow: 0 0 12px rgba(251,191,36,.4);
white-space: nowrap; flex-shrink: 0; min-width: 0;
}
/* 남은 장 배지 */
.ok-set-card-left {
font-size: clamp(9px, 2.4vw, 11px); font-weight: 700;
color: #cbd5e1;
background: rgba(255,255,255,.07);
border: 1px solid rgba(251,191,36,.3);
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap; flex-shrink: 0;
}
/* 게이지 라벨 — 숨김 (바 안에 텍스트 표시) */
.ok-set-card-gauge-txt { display: none; }
/* ── 게이지 트랙 ── */
.ok-set-card-gauge-wrap { width: 100%; }
.ok-set-card-gauge {
width: 100%; height: 12px; border-radius: 6px;
position: relative; overflow: visible;
box-shadow:
0 0 0 1.5px rgba(255,255,255,.08),
0 2px 6px rgba(0,0,0,.45);
}
/* 게이지 트랙 본체 */
.ok-set-card-gauge-track {
position: absolute; inset: 0;
border-radius: 6px; overflow: hidden;
background: rgba(100,116,139,.2); /* 중립 fallback */
}
/* 격자선 + 유리 하이라이트 */
.ok-set-card-gauge-track::before {
content: '';
position: absolute; inset: 0;
background:
repeating-linear-gradient(
90deg,
transparent 0%,
transparent calc(10% - 1px),
rgba(0,0,0,.15) calc(10% - 1px),
rgba(0,0,0,.15) 10%
),
linear-gradient(180deg,
rgba(255,255,255,.25) 0%,
rgba(255,255,255,.03) 55%,
transparent 100%
);
border-radius: 6px;
z-index: 3; pointer-events: none;
}
/* 다크 마스크 */
.ok-set-card-gauge-mask {
position: absolute; top: 0; right: 0; bottom: 0;
width: var(--mask-w, 100%);
background: rgba(10,18,20,.8);
border-radius: 0 6px 6px 0;
transition: width .65s cubic-bezier(.4,0,.2,1);
z-index: 2;
}
/* 채워진 끝 edge — 흰색 글로우 */
.ok-set-card-gauge-edge {
position: absolute; top: 1px; bottom: 1px; width: 2px;
right: var(--mask-w, 100%);
background: rgba(255,255,255,.9);
border-radius: 1px;
box-shadow: 0 0 5px 2px rgba(255,255,255,.5);
transition: right .65s cubic-bezier(.4,0,.2,1);
z-index: 5; pointer-events: none;
display: var(--edge-display, block);
}
/* 소진율 텍스트 */
.ok-set-card-gauge-label {
position: absolute; top: 0; right: 5px; bottom: 0;
display: flex; align-items: center;
font-size: 9px; font-weight: 700;
color: rgba(255,255,255,.85);
letter-spacing: .02em;
text-shadow: 0 1px 3px rgba(0,0,0,.9);
z-index: 6; pointer-events: none;
white-space: nowrap;
}
/* 게이지바 div — 더 이상 사용 안 함 */
.ok-set-card-gauge-bar { display: none; }
/* ok-gauge-shimmer keyframes 제거 */
.ok-card-queue-badge {
display: inline-flex; align-items: center; gap: 3px;
background: rgba(239,68,68,.15);
color: #f87171; font-size: 11px; font-weight: 800;
padding: 2px 8px; border-radius: 999px;
border: 1px solid rgba(239,68,68,.3);
animation: ok-queue-pulse 2s ease-in-out infinite;
}
.ok-card-queue-badge.has-waiting {
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: #fff; border: none;
box-shadow: 0 2px 6px rgba(239,68,68,.35);
}
@keyframes ok-queue-pulse {
0%,100% { opacity: 1; }
50% { opacity: .7; }
}
/* ── 장수 제한 배지 오버레이 ── */
.ok-card-badges-overlay {
position: absolute; top: 6px; right: 6px;
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
z-index: 3;
}
.ok-card-limit-badge {
display: inline-flex; align-items: center; gap: 4px;
background: linear-gradient(135deg, rgba(20,10,40,.92) 0%, rgba(40,20,70,.92) 100%);
color: #d8b4fe;
font-size: 12.5px; font-weight: 900; letter-spacing: .04em;
padding: 5.5px 12px; border-radius: 999px;
border: 1.5px solid #7c3aed;
box-shadow:
0 0 0 1px rgba(124,58,237,.25),
0 2px 10px rgba(0,0,0,.6),
inset 0 1px 0 rgba(200,160,255,.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
white-space: nowrap; line-height: 1;
}
.ok-status-pill {
font-size: 12.5px; font-weight: 900;
letter-spacing: .04em;
box-shadow: 0 0 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
position: relative; z-index: 1;
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: 10px; letter-spacing: .03em;
white-space: nowrap; flex-shrink: 0;
}
.ok-status-pill.active { background: linear-gradient(135deg,rgba(16,185,129,.28),rgba(5,150,105,.18)); color: #34d399; border: 1.5px solid rgba(16,185,129,.6); box-shadow: 0 0 12px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.1); }
.ok-status-pill.waiting { background: linear-gradient(135deg,rgba(251,191,36,.22),rgba(217,119,6,.15)); color: #fbbf24; border: 1.5px solid rgba(251,191,36,.55); box-shadow: 0 0 12px rgba(251,191,36,.28); }
.ok-status-pill.ended { background: rgba(100,116,139,.18); color: #94a3b8; border: 1.5px solid rgba(100,116,139,.4); }
.ok-status-pill.sold { background: linear-gradient(135deg,rgba(251,191,36,.22),rgba(217,119,6,.15)); color: #fbbf24; border: 1.5px solid rgba(251,191,36,.55); text-shadow: 0 0 8px rgba(251,191,36,.5); box-shadow: 0 0 12px rgba(251,191,36,.28); }
/* 로딩 */
.ok-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px 20px; color: #64748b; font-weight: 700; grid-column: 1/-1; }
.ok-loading-spinner { width: 24px; height: 24px; border: 3px solid rgba(139,92,246,.3); border-top-color: #8b5cf6; border-radius: 50%; animation: okSpin .8s linear infinite; }
@keyframes okSpin { to { transform: rotate(360deg); } }
@keyframes pkShake {
0%,100% { transform: translateX(0); }
18% { transform: translateX(-6px) rotate(-1.5deg); }
36% { transform: translateX(6px) rotate(1.5deg); }
54% { transform: translateX(-5px) rotate(-1deg); }
72% { transform: translateX(4px) rotate(.8deg); }
88% { transform: translateX(-3px); }
}
@keyframes pkModalIn {
from { opacity:0; transform: scale(.9) translateY(16px); }
to { opacity:1; transform: scale(1) translateY(0); }
}
/* 포인트 충전 배너 */
.ok-charge-bar {
display: flex; align-items: center; justify-content: space-between;
background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.12));
border: 1.5px solid rgba(99,102,241,.3); border-radius: 16px;
padding: 14px 20px; margin-bottom: 8px; gap: 12px;
backdrop-filter: blur(6px);
}
.ok-charge-bar-left { display: flex; align-items: center; gap: 12px; }
.ok-charge-bar-icon { font-size: 26px; line-height: 1; }
.ok-charge-bar-label { font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: .04em; text-transform: uppercase; }
.ok-charge-bar-pt { font-size: 22px; font-weight: 900; color: #a78bfa; line-height: 1.2; }
.ok-charge-bar-pt b { color: #c4b5fd; }
.ok-charge-bar-btn {
height: 44px; padding: 0 22px; border-radius: 12px;
background: linear-gradient(135deg, #0064ff, #6366f1);
border: none; color: #fff; font-size: 14px; font-weight: 800;
cursor: pointer; white-space: nowrap; flex-shrink: 0;
box-shadow: 0 4px 16px rgba(99,102,241,.4);
transition: all .18s;
}
.ok-charge-bar-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,.55); }
.ok-charge-bar-btn:active { transform: translateY(0); }
/* ══════════════════════════════
대기열 화면 - 게임 스타일 리디자인
══════════════════════════════ */
.ok-queue-wrapper {
max-width: 620px; margin: 0 auto; padding: 20px 0 10px; /* 배너 ↔ 카드 여백 */
}
/* ══════════════════════════════════════════════════
★ [PC-SIDEBAR] 대기열 3컬럼 레이아웃 — PC 전용
모바일(≤1023px): 사이드바 완전 숨김, 기존 동작 유지
══════════════════════════════════════════════════ */
/* 모바일: 사이드바 숨김 */
.ok-qs-sidebar { display: none; }
@media (min-width: 1024px) {
/* okQueueView 를 3컬럼 그리드로 전환 */
#okQueueView {
display: grid;
grid-template-columns: 220px 620px 220px;
justify-content: center;
align-items: start; /* 각 사이드바는 자체 높이 유지 */
gap: 16px;
padding: 20px 24px;
box-sizing: border-box;
}
/* ok-queue-wrapper: 그리드 2번째 컬럼 — 기존 스타일 그대로 */
.ok-queue-wrapper {
grid-column: 2;
margin: 0; /* grid 안에서는 auto margin 불필요 */
}
/* 공통 사이드바 */
.ok-qs-sidebar {
display: flex;
flex-direction: column;
position: sticky;
top: calc(var(--hdr-total, 60px) + var(--tab-h, 47px) + 8px); /* 헤더 + 탭바 + 여백 */
max-height: calc(100vh - var(--hdr-total, 60px) - var(--tab-h, 47px) - 66px); /* 하단 50px 추가 여백 */
background: linear-gradient(160deg, #070a18 0%, #0d1120 60%, #0f1428 100%);
border: 1.5px solid rgba(99,102,241,.3);
border-radius: 18px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(99,102,241,.08),
0 8px 32px rgba(0,0,0,.6),
inset 0 1px 0 rgba(139,92,246,.1);
}
.ok-qs-sidebar-left { grid-column: 1; margin-top: 28px; }
.ok-qs-sidebar-right { grid-column: 3; margin-top: 28px; display: flex; flex-direction: column; }
/* 오른쪽 사이드바: 멤버 리스트 영역이 남은 공간 다 채움 → 버튼이 항상 하단 고정 */
.ok-qs-sidebar-right .ok-qs-body {
flex: 1;
}
/* 사이드바 헤더 */
.ok-qs-header {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 14px 10px;
border-bottom: 1px solid rgba(99,102,241,.2);
flex-shrink: 0;
background: rgba(99,102,241,.07);
}
.ok-qs-header-icon { font-size: 15px; }
.ok-qs-header-title {
font-size: 13px; font-weight: 900; color: #c7d2fe;
letter-spacing: .04em; flex: 1;
}
.ok-qs-header-badge {
font-size: 11px; font-weight: 800;
background: rgba(99,102,241,.25);
color: #a5b4fc;
padding: 2px 8px;
border-radius: 99px;
border: 1px solid rgba(99,102,241,.3);
white-space: nowrap;
min-width: 28px;
text-align: center;
}
/* 사이드바 바디 — 내부 스크롤 */
.ok-qs-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 10px 10px 14px;
scrollbar-width: thin;
scrollbar-color: rgba(99,102,241,.4) transparent;
}
.ok-qs-body::-webkit-scrollbar { width: 4px; }
.ok-qs-body::-webkit-scrollbar-track { background: transparent; }
.ok-qs-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #6366f1, #8b5cf6);
border-radius: 4px;
}
/* 로딩 / 빈 상태 */
.ok-qs-loading,
.ok-qs-empty {
color: #475569;
font-size: 12px;
text-align: center;
padding: 24px 8px;
line-height: 1.6;
}
}
/* ── 왼쪽 사이드바: 상품 카드 ── */
.ok-qs-prize-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 5px;
border-radius: 8px;
border-bottom: 1px solid rgba(255,255,255,.04);
cursor: pointer;
transition: background .15s, transform .1s;
}
.ok-qs-prize-item:last-child { border-bottom: none; }
.ok-qs-prize-item:hover {
background: rgba(99,102,241,.12);
transform: translateX(1px);
}
.ok-qs-prize-item.is-sold { opacity: .35; }
.ok-qs-prize-thumb {
width: 38px; height: 38px;
border-radius: 7px;
object-fit: cover;
flex-shrink: 0;
background: #1a2035;
border: 1px solid rgba(255,255,255,.1);
}
.ok-qs-prize-thumb-placeholder {
width: 38px; height: 38px;
border-radius: 7px;
background: linear-gradient(160deg,#1e2540,#0d1120);
display: flex; align-items: center; justify-content: center;
font-size: 17px; flex-shrink: 0;
border: 1px solid rgba(255,255,255,.08);
}
/* 정보 영역 — flex: 1 + min-width: 0 필수 (ellipsis 동작 조건) */
.ok-qs-prize-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
/* 상품명 — 한 줄 고정, 넘치면 ... */
.ok-qs-prize-name {
font-size: 11px;
font-weight: 700;
color: #e2e8f0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
letter-spacing: .01em;
min-width: 0; /* flex 내부 ellipsis 필수 */
}
.ok-qs-prize-name.is-sold { color: #4a5568; }
/* 남은 수량 바 */
.ok-qs-prize-bar-wrap {
display: flex; align-items: center; gap: 5px;
}
.ok-qs-prize-bar-track {
flex: 1; height: 3px;
background: rgba(255,255,255,.07);
border-radius: 3px; overflow: hidden;
}
.ok-qs-prize-bar-fill {
height: 100%; border-radius: 3px;
background: linear-gradient(90deg, #6366f1, #a78bfa);
transition: width .4s ease;
}
.ok-qs-prize-bar-fill.warn { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.ok-qs-prize-bar-fill.danger { background: linear-gradient(90deg,#ef4444,#f87171); }
.ok-qs-prize-bar-fill.sold { background: rgba(255,255,255,.1); }
.ok-qs-prize-count {
font-size: 10px; font-weight: 800; color: #64748b;
white-space: nowrap; flex-shrink: 0;
letter-spacing: .01em;
}
.ok-qs-prize-count.warn { color: #fbbf24; }
.ok-qs-prize-count.danger { color: #f87171; }
.ok-qs-prize-count.sold { color: #374151; }
/* 등급 배지 — 남은 상품 사이드바 썸네일 wrap */
.ok-qs-prize-thumb-wrap {
flex-shrink: 0;
width: 38px; height: 38px;
}
/* 상품명 줄: 뱃지 + 이름 나란히 */
.ok-qs-prize-name-row {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
}
/* 인라인 뱃지 — position 재설정 (absolute 아님) */
.ok-qs-prize-name-row .ok-prize-rank-badge {
position: static;
flex-shrink: 0;
font-size: 8px; padding: 2px 5px;
border-radius: 5px;
backdrop-filter: none;
white-space: nowrap;
}
/* 소진 상태 */
.ok-qs-prize-item.is-sold .ok-qs-prize-name-row .ok-prize-rank-badge {
background: rgba(30,30,40,.85) !important;
color: #64748b !important;
border-color: rgba(255,255,255,.1) !important;
box-shadow: none !important;
}
/* ── 오른쪽 사이드바: 대기열 멤버 아이템 ── */
.ok-qs-member-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 6px;
border-radius: 8px;
transition: background .15s;
position: relative;
}
.ok-qs-member-item + .ok-qs-member-item {
border-top: 1px solid rgba(255,255,255,.035);
}
.ok-qs-member-item.is-me {
background: rgba(99,102,241,.1);
border-radius: 8px;
}
.ok-qs-member-item.is-active {
background: rgba(16,185,129,.08);
}
/* 순번 배지 */
.ok-qs-member-pos {
width: 24px; height: 24px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 900;
flex-shrink: 0;
background: rgba(99,102,241,.18);
border: 1.5px solid rgba(99,102,241,.3);
color: #a5b4fc;
}
.ok-qs-member-pos.is-active-pos {
background: rgba(16,185,129,.22);
border-color: rgba(16,185,129,.45);
color: #34d399;
font-size: 12px;
}
.ok-qs-member-pos.is-me-pos {
background: rgba(245,158,11,.22);
border-color: rgba(245,158,11,.5);
color: #fbbf24;
box-shadow: 0 0 7px rgba(245,158,11,.3);
}
/* 이름 */
.ok-qs-member-name {
flex: 1; min-width: 0;
font-size: 11.5px; font-weight: 700; color: #94a3b8;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ok-qs-member-name.is-me-name {
color: #fde68a;
font-weight: 900;
}
.ok-qs-member-name.is-active-name { color: #6ee7b7; font-weight: 800; }
/* 상태 태그 */
.ok-qs-member-tag {
font-size: 9.5px; font-weight: 800;
padding: 2px 6px; border-radius: 99px;
flex-shrink: 0;
letter-spacing: .03em;
}
.ok-qs-member-tag.tag-active {
background: rgba(16,185,129,.18);
color: #34d399;
border: 1px solid rgba(16,185,129,.3);
}
.ok-qs-member-tag.tag-me {
background: rgba(245,158,11,.15);
color: #fbbf24;
border: 1px solid rgba(245,158,11,.28);
}
/* 대기열 비어있을 때 */
.ok-qs-queue-empty {
text-align: center;
padding: 18px 8px;
color: #3d4f66;
font-size: 11.5px;
line-height: 1.7;
}
.ok-qs-queue-empty-icon { font-size: 26px; display: block; margin-bottom: 5px; }
/* ══════════════════════════════════════
사이드바 참여하기 / 나가기 버튼 (PC 전용)
══════════════════════════════════════ */
.ok-qs-join-footer {
display: none; /* 모바일 숨김 */
flex-shrink: 0;
padding: 10px 10px 12px;
border-top: 1px solid rgba(99,102,241,.18);
background: rgba(7,10,24,.6);
}
@media (min-width: 1024px) {
.ok-qs-join-footer { display: block; }
}
/* ── 참여하기 버튼 (기본/pulse 상태) ── */
.ok-qs-join-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 11px 10px;
border-radius: 12px;
border: none;
cursor: pointer;
font-size: 12.5px;
font-weight: 900;
letter-spacing: .04em;
position: relative;
overflow: hidden;
transition: transform .12s, filter .12s, box-shadow .15s;
/* 기본 — 참여하기 그라디언트 */
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #a78bfa 100%);
color: #fff;
box-shadow:
0 0 0 1px rgba(139,92,246,.4),
0 4px 18px rgba(99,102,241,.5),
inset 0 1px 0 rgba(255,255,255,.15);
animation: ok-qs-join-pulse 2.4s ease-in-out infinite;
}
.ok-qs-join-btn::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform .55s ease;
}
.ok-qs-join-btn:hover::before { transform: translateX(100%); }
.ok-qs-join-btn:hover {
filter: brightness(1.15);
animation: none;
box-shadow:
0 0 0 1px rgba(139,92,246,.6),
0 6px 24px rgba(99,102,241,.7),
inset 0 1px 0 rgba(255,255,255,.2);
}
.ok-qs-join-btn:active {
transform: scale(.94);
filter: brightness(.95);
}
/* ── 나가기 버튼 상태 ── */
.ok-qs-join-btn.is-leave {
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 60%, #b91c1c 100%);
color: #fca5a5;
box-shadow:
0 0 0 1px rgba(239,68,68,.35),
0 4px 16px rgba(185,28,28,.45),
inset 0 1px 0 rgba(252,165,165,.1);
animation: none;
font-size: 12.5px;
}
.ok-qs-join-btn.is-leave:hover {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: #fff;
box-shadow: 0 0 0 1px rgba(239,68,68,.6), 0 6px 22px rgba(239,68,68,.55);
filter: brightness(1.1);
}
/* ── 버튼 아이콘 ── */
.ok-qs-join-btn-icon {
font-size: 15px;
line-height: 1;
transition: transform .15s;
}
.ok-qs-join-btn:not(.is-leave):hover .ok-qs-join-btn-icon {
transform: rotate(-15deg) scale(1.2);
}
/* ── pulse 애니메이션 ── */
@keyframes ok-qs-join-pulse {
0%, 100% {
box-shadow:
0 0 0 1px rgba(139,92,246,.4),
0 4px 18px rgba(99,102,241,.5),
inset 0 1px 0 rgba(255,255,255,.15);
}
50% {
box-shadow:
0 0 0 3px rgba(139,92,246,.25),
0 4px 28px rgba(99,102,241,.75),
inset 0 1px 0 rgba(255,255,255,.2);
}
}
/* ── 터지는 순간 파티클 ── */
.ok-qs-burst-particle {
position: fixed;
width: 7px; height: 7px;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
animation: ok-qs-particle-fly .65s ease-out forwards;
}
@keyframes ok-qs-particle-fly {
0% { opacity: 1; transform: translate(0,0) scale(1); }
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}
/* 버튼 히트 링 효과 */
.ok-qs-hit-ring {
position: fixed;
border-radius: 50%;
border: 2.5px solid rgba(139,92,246,.8);
pointer-events: none;
z-index: 9998;
animation: ok-qs-ring-expand .5s ease-out forwards;
}
@keyframes ok-qs-ring-expand {
0% { width: 20px; height: 20px; opacity: 1;
transform: translate(-50%,-50%) scale(1); }
100% { width: 80px; height: 80px; opacity: 0;
transform: translate(-50%,-50%) scale(1); }
}
/* ── 뽑기중 강조 카드 ── */
.ok-qs-active-card {
margin: 6px 4px 8px;
padding: 9px 11px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(16,185,129,.15) 0%, rgba(5,150,105,.08) 100%);
border: 1px solid rgba(16,185,129,.35);
box-shadow: 0 0 14px rgba(16,185,129,.12), inset 0 1px 0 rgba(52,211,153,.08);
}
.ok-qs-active-label {
display: flex; align-items: center; gap: 5px;
font-size: 9.5px; font-weight: 900; color: #34d399;
letter-spacing: .1em; text-transform: uppercase;
margin-bottom: 4px;
}
.ok-qs-active-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #34d399;
box-shadow: 0 0 5px #34d399;
animation: ok-qs-pulse 1.4s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes ok-qs-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.75); }
}
.ok-qs-active-name {
font-size: 12.5px; font-weight: 900; color: #ecfdf5;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── 대기열 목록 스크롤 구역 ── */
.ok-qs-queue-list {
display: flex; flex-direction: column;
overflow-y: auto; overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(99,102,241,.3) transparent;
}
.ok-qs-queue-list::-webkit-scrollbar { width: 3px; }
.ok-qs-queue-list::-webkit-scrollbar-thumb { background: rgba(99,102,241,.35); border-radius: 3px; }
/* 나 태그 */
.ok-qs-me-tag {
font-size: 8.5px; font-weight: 800;
background: rgba(245,158,11,.18);
color: #fbbf24;
border: 1px solid rgba(245,158,11,.3);
border-radius: 99px;
padding: 1px 5px;
margin-left: 4px;
vertical-align: middle;
letter-spacing: .02em;
}
/* ══════════════════════════════════════════════════
★ 대기열 히어로 카드 — 통합 단일 카드 (게임풍)
══════════════════════════════════════════════════ */
.ok-queue-hero-card {
background: linear-gradient(170deg,
rgba(9,11,20,.99) 0%,
rgba(12,15,28,.99) 40%,
rgba(15,19,34,.99) 100%);
border: 1.5px solid rgba(255,255,255,.1);
border-radius: 22px;
margin: 8px 0 16px;
box-shadow:
0 0 0 1px rgba(99,120,241,.08),
0 8px 40px rgba(0,0,0,.75),
0 0 60px rgba(30,60,120,.08),
inset 0 1px 0 rgba(255,255,255,.06);
position: relative; overflow: hidden;
}
/* 상단 무지개 라인 */
.ok-queue-hero-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background: linear-gradient(90deg,
#f59e0b 0%, #ec4899 20%, #a78bfa 40%,
#6366f1 60%, #a78bfa 80%, #f59e0b 100%);
background-size: 200% 100%;
animation: okHeroLineShift 3.5s linear infinite;
border-radius: 22px 22px 0 0;
}
/* ok-queue-hero-card::after 제거 — 이미지 위 불필요한 오버레이 */
.ok-queue-hero-card::after { display: none; }
@keyframes okHeroLineShift {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
/* ── 섹션 A: 세트 정보 — 이미지 풀커버 히어로 ── */
.ok-queue-set-info {
position: relative; z-index: 1;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 22px 22px 0 0;
margin: 0; padding: 0;
background: #080c18;
}
/* 모바일: 세로 30% 더 길게 (16/9 → 16/12) */
@media (max-width: 600px) {
.ok-queue-set-info { aspect-ratio: 16/12; }
}
/* 배경 이미지: 전체 꽉 채움 */
.ok-queue-set-thumb {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block !important;
border: none; border-radius: 0; box-shadow: none;
cursor: pointer;
/* transition 없음 — PC(ok-has-mouse)에서만 아래 규칙으로 복원 */
filter: brightness(1.0);
z-index: 1;
}
/* PC 전용: transition + hover/active 효과 */
html.ok-has-mouse .ok-queue-set-thumb {
transition: transform .4s cubic-bezier(.22,.68,0,1.2);
}
html.ok-has-mouse .ok-queue-set-thumb:hover { transform: scale(1.04); filter: brightness(1.05); }
html.ok-has-mouse .ok-queue-set-thumb:active { transform: scale(1); }
/* 하단 검정 그라데이션 — 맨 아래~제목까지만, 그 위는 이미지 원본 */
.ok-queue-set-info::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 45%;
background: linear-gradient(to top,
rgba(6,9,20,.97) 0%,
rgba(6,9,20,.80) 30%,
rgba(6,9,20,.35) 65%,
transparent 100%);
z-index: 1; pointer-events: none;
}
/* 텍스트 오버레이 컨테이너 */
.ok-queue-set-text {
position: absolute; left: 0; right: 0; bottom: 0;
z-index: 2;
padding: 0 18px 16px;
display: flex; flex-direction: column;
align-items: center; gap: 8px;
text-align: center;
}
.ok-queue-set-title {
font-size: clamp(12px, 3.8vw, 22px);
font-weight: 900; color: #f8fafc;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 2px 16px rgba(0,0,0,.9), 0 1px 4px rgba(0,0,0,.8);
letter-spacing: -.02em; width: 100%;
transition: font-size .15s ease;
}
/* 뱃지 칩 행 */
.ok-queue-set-chips {
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.ok-queue-set-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 11px; border-radius: 99px;
font-size: 11.5px; font-weight: 800; line-height: 1.2;
white-space: nowrap; letter-spacing: .01em;
backdrop-filter: blur(6px);
}
.ok-queue-set-chip.chip-total {
background: rgba(15,23,42,.65); border: 1px solid rgba(148,163,184,.3);
color: #cbd5e1;
}
.ok-queue-set-chip.chip-left {
background: rgba(6,78,59,.55); border: 1px solid rgba(16,185,129,.5);
color: #6ee7b7; box-shadow: 0 0 10px rgba(16,185,129,.2);
}
.ok-queue-set-chip.chip-price {
background: rgba(78,52,6,.55); border: 1px solid rgba(251,191,36,.5);
color: #fde68a; box-shadow: 0 0 10px rgba(251,191,36,.2);
}
/* ── 섹션 B: 세트 설명 (있을 때만 표시) ── */
.ok-queue-set-desc-wrap {
margin: 0 16px;
position: relative; z-index: 1;
}
/* ── 주의사항 헤더 — 실시간 현황 분리선과 동일 구조 ── */
.ok-queue-desc-divider {
display: flex; align-items: center; gap: 0;
margin: 14px 0 10px;
}
.ok-queue-desc-divider-line {
flex: 1; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(148,163,184,.25) 20%,
rgba(203,213,225,.35) 50%,
rgba(148,163,184,.25) 80%,
transparent 100%);
}
.ok-queue-desc-divider-label {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(22,28,46,.95);
border: 1px solid rgba(251,191,36,.35);
border-radius: 99px;
padding: 4px 13px;
font-size: 10.5px; font-weight: 900; color: #fbbf24;
letter-spacing: .05em; white-space: nowrap;
box-shadow: 0 2px 10px rgba(251,191,36,.12);
}
.ok-queue-desc-divider-label::before { content: '⚠'; font-size: 11px; }
/* ── 설명 박스 ── */
.ok-queue-set-desc {
font-size: 13px; line-height: 1.75; color: #f1f5f9;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
border-radius: 12px;
padding: 14px 16px 14px 20px;
margin-bottom: 12px;
white-space: pre-line;
position: relative;
word-break: break-word;
}
/* 왼쪽 앰버 액센트 바 */
.ok-queue-set-desc::before {
content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px;
background: linear-gradient(180deg, #fbbf24, #f59e0b);
border-radius: 0 3px 3px 0;
}
/* 링크 스타일 */
.ok-queue-set-desc a {
color: #60a5fa;
text-decoration: underline;
text-underline-offset: 3px;
word-break: break-all;
transition: color .15s;
}
.ok-queue-set-desc a:hover { color: #93c5fd; }
/* ── 섹션 C 구분선: 실시간현황 진입 ── */
.ok-queue-live-divider {
display: flex; align-items: center; gap: 0;
margin: 0; position: relative; z-index: 1;
}
.ok-queue-live-divider-line {
flex: 1; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(148,163,184,.25) 20%,
rgba(203,213,225,.35) 50%,
rgba(148,163,184,.25) 80%,
transparent 100%);
box-shadow: none;
}
.ok-queue-live-divider-badge {
display: flex; align-items: center; gap: 5px;
padding: 4px 12px;
background: rgba(22,28,46,.95);
border: 1px solid rgba(148,163,184,.18);
border-radius: 99px;
font-size: 10.5px; font-weight: 900; color: #a7f3d0;
letter-spacing: normal; text-transform: none;
white-space: nowrap;
box-shadow: none;
}
.ok-queue-live-divider-badge::before {
content:''; width:6px; height:6px; border-radius:50%;
background: #10b981; flex-shrink:0;
animation: queuePulse 1.5s infinite;
box-shadow: 0 0 6px rgba(16,185,129,.8);
}
/* ── 섹션 C: 실시간 현황 영역 ── */
.ok-queue-prize-panel {
background: transparent;
border: none;
border-radius: 0 0 22px 22px;
padding: 12px 16px 16px;
margin-bottom: 0;
box-shadow: none;
position: relative; z-index: 1;
}
.ok-queue-prize-panel-title { display: none; } /* badge로 대체 */
.ok-queue-prize-live {
display: grid; grid-template-columns: repeat(auto-fill, minmax(105px,1fr)); gap: 10px;
}
/* ══════════════════════════════════
실시간 미니 카드 — 이미지 풀커버 + 오버레이
══════════════════════════════════ */
.ok-queue-prize-mini {
/* 고정 비율 3:4 세로형 */
aspect-ratio: 3/4;
border: 1.5px solid rgba(255,255,255,.22);
border-radius: 14px;
cursor: pointer;
position: relative; overflow: hidden;
background: #0d1120;
box-shadow: 0 4px 16px rgba(0,0,0,.55);
/* transition/transform 없음 — PC(ok-has-mouse)에서만 아래 규칙으로 복원 */
isolation: isolate;
}
/* PC 마우스 기기에서만 transition + hover 효과 활성화
(첫 mousemove 이벤트로 감지 — @media hover:hover 보다 신뢰성 높음) */
html.ok-has-mouse .ok-queue-prize-mini {
transition: transform .18s cubic-bezier(.22,.68,0,1.2),
border-color .18s, box-shadow .18s;
}
html.ok-has-mouse .ok-queue-prize-mini:hover {
transform: translateY(-4px) scale(1.03);
border-color: rgba(255,255,255,.55);
box-shadow: 0 10px 28px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.12);
}
html.ok-has-mouse .ok-queue-prize-mini:hover .ok-queue-prize-mini-img {
transform: scale(1.08);
}
/* ── 이미지: 카드 전체를 꽉 채움 ── */
.ok-queue-prize-mini-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
z-index: 0;
}
html.ok-has-mouse .ok-queue-prize-mini-img {
transition: transform .35s cubic-bezier(.22,.68,0,1.2);
}
.ok-queue-prize-mini-img-placeholder {
position: absolute; inset: 0;
background: linear-gradient(160deg,#1a2035,#0d1120);
display: flex; align-items: center; justify-content: center;
font-size: 32px; z-index: 0;
}
/* ── 상단 등급 배지 오버레이 ── */
.ok-queue-prize-mini-rank {
position: absolute; top: 6px; left: 6px; z-index: 3;
font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
padding: 3px 7px; border-radius: 6px;
backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* 16색 무지개 로테이션 — 안겹치는 밝은 색상 */
.ok-queue-prize-mini-rank.rank-a { background:linear-gradient(135deg,#ff3b3b,#cc0000); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,59,59,.6); } /* 빨강 */
.ok-queue-prize-mini-rank.rank-b { background:linear-gradient(135deg,#ff6d00,#e65100); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,109,0,.6); } /* 주황 */
.ok-queue-prize-mini-rank.rank-c { background:linear-gradient(135deg,#ffcc00,#e6a800); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,204,0,.6); } /* 노랑 */
.ok-queue-prize-mini-rank.rank-d { background:linear-gradient(135deg,#aeea00,#6d9200); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(174,234,0,.6); } /* 연두 */
.ok-queue-prize-mini-rank.rank-e { background:linear-gradient(135deg,#00c853,#007a33); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,200,83,.6); } /* 초록 */
.ok-queue-prize-mini-rank.rank-f { background:linear-gradient(135deg,#00bfa5,#007a6e); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,191,165,.6); } /* 민트 */
.ok-queue-prize-mini-rank.rank-g { background:linear-gradient(135deg,#00b0ff,#0076b6); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,176,255,.6); } /* 하늘 */
.ok-queue-prize-mini-rank.rank-h { background:linear-gradient(135deg,#2979ff,#0d47a1); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(41,121,255,.6); } /* 파랑 */
.ok-queue-prize-mini-rank.rank-i { background:linear-gradient(135deg,#304ffe,#0026ca); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(48,79,254,.6); } /* 남색 */
.ok-queue-prize-mini-rank.rank-j { background:linear-gradient(135deg,#aa00ff,#6200ea); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(170,0,255,.6); } /* 보라 */
.ok-queue-prize-mini-rank.rank-k { background:linear-gradient(135deg,#d500f9,#9400b8); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(213,0,249,.6); } /* 자주 */
.ok-queue-prize-mini-rank.rank-l { background:linear-gradient(135deg,#f50057,#b0003a); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(245,0,87,.6); } /* 핫핑크 */
.ok-queue-prize-mini-rank.rank-m { background:linear-gradient(135deg,#e91e63,#a8003a); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(233,30,99,.6); } /* 자홍 */
.ok-queue-prize-mini-rank.rank-n { background:linear-gradient(135deg,#ff6e40,#c43e00); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,110,64,.6); } /* 살구 */
.ok-queue-prize-mini-rank.rank-o { background:linear-gradient(135deg,#ffd740,#c9a000); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,215,64,.6); } /* 황금 */
.ok-queue-prize-mini-rank.rank-p { background:linear-gradient(135deg,#00e5ff,#009db5); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,229,255,.6); } /* 청록 */
/* 폴백 */
.ok-queue-prize-mini-rank.rank-default {
background: rgba(30,30,50,.85); color:#a5b4fc; border:1px solid rgba(99,102,241,.35);
}
/* 소진 시 배지 색 제거 — 회색 처리 */
.ok-queue-prize-mini.depleted .ok-queue-prize-mini-rank {
background: rgba(30,30,40,.85) !important;
color: #64748b !important;
border-color: rgba(255,255,255,.1) !important;
box-shadow: none !important;
}
/* ── 하단 정보 바 — 상품명 높이까지만, 자연스러운 페이드 ── */
.ok-queue-prize-mini-info {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
background: linear-gradient(to top,
rgba(5,8,18,.90) 0%,
rgba(5,8,18,.72) 30%,
rgba(5,8,18,.38) 60%,
rgba(5,8,18,.08) 82%,
transparent 100%);
padding: 20px 8px 7px;
display: flex; flex-direction: column; gap: 4px;
}
.ok-queue-prize-mini-name {
font-size: 11px; font-weight: 800; color: #f1f5f9;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-shadow:
0 0 8px rgba(0,0,0,1),
0 1px 8px rgba(0,0,0,.95),
1px 1px 0 rgba(0,0,0,.7),
-1px -1px 0 rgba(0,0,0,.7);
letter-spacing: -.01em; line-height: 1.3;
}
/* 게이지바 */
.ok-queue-prize-mini-bar {
height: 3px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden;
}
.ok-queue-prize-mini-fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, #f59e0b, #fcd34d);
transition: width .6s ease;
}
.ok-queue-prize-mini-fill.sold { background: linear-gradient(90deg,#dc2626,#f87171); }
/* 수량 텍스트 */
.ok-queue-prize-mini-count {
font-size: 9.5px; color: #e2e8f0; font-weight: 800;
letter-spacing: .02em;
}
.ok-queue-prize-mini-count.sold { color: #f87171; }
/* ── 모바일/터치: transform·transition 완전 없음
html.ok-has-mouse 가 없으면 어떤 상태(:hover/:active/:focus)에서도
transform·transition 이 발생하지 않도록 원천 차단 ── */
html:not(.ok-has-mouse) .ok-queue-prize-mini,
html:not(.ok-has-mouse) .ok-queue-prize-mini:hover,
html:not(.ok-has-mouse) .ok-queue-prize-mini:active,
html:not(.ok-has-mouse) .ok-queue-prize-mini:focus {
transform: none !important;
transition: none !important;
}
html:not(.ok-has-mouse) .ok-queue-prize-mini-img,
html:not(.ok-has-mouse) .ok-queue-prize-mini:hover .ok-queue-prize-mini-img,
html:not(.ok-has-mouse) .ok-queue-prize-mini:active .ok-queue-prize-mini-img {
transform: none !important;
transition: none !important;
}
/* ── 소진 카드: 흑백 처리 (SOLD OUT 텍스트 제거) ── */
.ok-queue-prize-mini.depleted .ok-queue-prize-mini-img,
.ok-queue-prize-mini.depleted .ok-queue-prize-mini-img-placeholder {
filter: grayscale(85%) brightness(.55);
}
.ok-queue-prize-mini.depleted {
border-color: rgba(255,255,255,.08);
}
/* ── 썸네일 풀스크린 오버레이 ── */
#okThumbExpandOverlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,.9); backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity .25s ease;
}
#okThumbExpandOverlay.show {
opacity: 1; pointer-events: auto;
}
#okThumbExpandOverlay img {
max-width: 88vw; max-height: 82vh;
border-radius: 18px;
box-shadow: 0 8px 48px rgba(0,0,0,.8), 0 0 0 2px rgba(167,139,250,.5);
transform: scale(.88); transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
#okThumbExpandOverlay.show img { transform: scale(1); }
.ok-queue-point-bar {
text-align: center; color: #fbbf24; font-size: 14px; font-weight: 800;
margin-bottom: 14px;
background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3);
border-radius: 12px; padding: 10px;
position: relative; z-index: 10;
}
/* ── 상태 패널 공통 ── */
/* ═══════════════════════════════════════════════════════
🎮 GAME UI — 대기열 3-state 박스 공통
═══════════════════════════════════════════════════════ */
/* 격자 배경 패턴 */
@keyframes okFadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes okGameGlow {
0%,100% { box-shadow: 0 0 18px rgba(99,102,241,.35), 0 12px 40px rgba(0,0,0,.8); }
50% { box-shadow: 0 0 32px rgba(139,92,246,.55), 0 12px 40px rgba(0,0,0,.8); }
}
@keyframes okScanLine {
0% { transform: translateY(-100%); }
100% { transform: translateY(400%); }
}
@keyframes okTitleFlicker {
0%,100% { opacity:1; }
}
@keyframes okBtnPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,.6), 0 6px 24px rgba(99,102,241,.4); }
50% { box-shadow: 0 0 0 8px rgba(99,102,241,0), 0 6px 24px rgba(99,102,241,.4); }
}
@keyframes okGreenPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.7), 0 6px 24px rgba(16,185,129,.45); }
50% { box-shadow: 0 0 0 10px rgba(16,185,129,0), 0 6px 24px rgba(16,185,129,.45); }
}
@keyframes okDotSlot {
0%,100% { opacity:1; } 50% { opacity:.25; }
}
@keyframes okCounterUp {
from { opacity:0; transform:scale(.7); }
to { opacity:1; transform:scale(1); }
}
@keyframes okStarSpin {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.15); }
100% { transform: rotate(360deg) scale(1); }
}
@keyframes okShakeX {
0%,100% { transform:translateX(0); }
20% { transform:translateX(-4px); }
40% { transform:translateX(4px); }
60% { transform:translateX(-3px); }
80% { transform:translateX(3px); }
}
@keyframes okYourTurn {
0%,100% { text-shadow: 0 0 10px #34d399, 0 0 24px rgba(52,211,153,.6); }
50% { text-shadow: 0 0 22px #6ee7b7, 0 0 44px rgba(52,211,153,.9), 0 0 60px rgba(52,211,153,.3); }
}
@keyframes okActiveRing {
0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5), 0 0 30px rgba(16,185,129,.25); }
50% { box-shadow: 0 0 0 12px rgba(16,185,129,0), 0 0 40px rgba(16,185,129,.45); }
}
@keyframes okGoldShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes okWaitDot {
0%,66%,100% { opacity:.2; } 33% { opacity:1; }
}
.ok-queue-state-box {
background:
linear-gradient(rgba(99,102,241,.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(99,102,241,.09) 1px, transparent 1px),
linear-gradient(160deg, #03040b 0%, #070a18 60%, #080c20 100%);
background-size: 32px 32px, 32px 32px, 100% 100%;
border: 2px solid rgba(99,102,241,.55);
border-radius: 20px;
padding: 28px 22px 24px;
text-align: center;
animation: okFadeIn .4s cubic-bezier(.22,.68,0,1.2), okGameGlow 3s ease infinite;
box-shadow: 0 0 0 1px rgba(99,102,241,.15),
0 0 28px rgba(99,102,241,.35),
0 20px 60px rgba(0,0,0,.92),
inset 0 1px 0 rgba(139,92,246,.2),
inset 0 -1px 0 rgba(99,102,241,.1);
position: relative; overflow: hidden;
}
/* 스캔라인 오버레이 (애니메이션 제거) */
.ok-queue-state-box::before {
content:''; position:absolute; left:0; right:0; height:80px; pointer-events:none;
background: linear-gradient(to bottom, transparent, rgba(99,102,241,.08), transparent);
z-index: 0;
}
/* 상단 하이라이트 (더 밝게) */
.ok-queue-state-box::after {
content:''; position:absolute; top:0; left:5%; right:5%; height:1.5px; pointer-events:none;
background: linear-gradient(90deg, transparent, rgba(139,92,246,.9), rgba(167,139,250,.7), transparent);
filter: blur(.4px);
}
.ok-queue-state-box > * { position:relative; z-index:1; }
/* ── 게임 타이틀 (ENTER QUEUE 스타일) ── */
.ok-queue-state-icon {
font-size: 44px; margin-bottom: 6px;
display: block;
filter: drop-shadow(0 0 16px rgba(139,92,246,.9)) drop-shadow(0 0 32px rgba(99,102,241,.5));
animation: none;
}
.ok-queue-state-title {
display: none;
font-size: 11px; font-weight: 900; color: rgba(167,139,250,.95);
margin-bottom: 6px; letter-spacing: 4px; text-transform: uppercase;
text-shadow: 0 0 8px rgba(139,92,246,.7), 0 0 20px rgba(99,102,241,.4);
}
/* 서브 설명 */
.ok-queue-state-desc {
font-size: 13px; color: #94a3b8; margin-bottom: 14px;
line-height: 1.6;
}
/* ─────────────────────────────────────────
🎯 JOIN BOX — 참가 전
───────────────────────────────────────── */
#okQueueJoinBox .ok-gm-headline {
font-size: 26px; font-weight: 900; color: #f1f5f9;
letter-spacing: -.02em; margin-bottom: 14px;
animation: okTitleFlicker 5s ease infinite;
line-height: 1.1;
text-shadow: 0 2px 16px rgba(0,0,0,.7);
}
#okQueueJoinBox .ok-gm-headline span {
background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 40%, #fde68a 60%, #f59e0b 100%);
background-size: 200% auto;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
animation: okGoldShimmer 3s linear infinite;
display:inline-block;
}
/* 대기 인원 카운터 패널 */
.ok-gm-count-panel {
background: rgba(8, 8, 20, 0.75);
border: 1.5px solid rgba(99,102,241,.3);
border-radius: 16px;
padding: 20px 18px 18px;
margin-bottom: 14px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
box-shadow: 0 2px 16px rgba(0,0,0,.4);
text-align: center;
}
.ok-gm-count-icon { display: none; }
.ok-gm-count-body { text-align: center; width: 100%; }
.ok-gm-count-label { font-size: 10px; color: rgba(148,163,184,.6); font-weight: 700; letter-spacing: 2.5px; text-transform:uppercase; margin-bottom: 8px; display: block; }
.ok-gm-count-num {
font-size: 56px; font-weight: 900; color: #a5b4fc;
font-family: 'Courier New', monospace;
line-height: 1;
text-shadow: none;
animation: okCounterUp .35s cubic-bezier(.34,1.2,.64,1);
display: block;
}
.ok-gm-count-num b { color: #a5b4fc; }
.ok-gm-count-unit { font-size: 13px; color: rgba(148,163,184,.55); font-weight: 600; margin-top: 8px; display: block; letter-spacing: .3px; }
/* 배지 행 (시간제한 + LIVE) */
.ok-gm-badge-row {
display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; flex-wrap:wrap;
}
.ok-gm-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: 8px;
font-size: 11px; font-weight: 800; letter-spacing: .04em;
border: 1px solid; white-space:nowrap;
}
.ok-gm-badge-timer {
background: rgba(30,36,54,.9); border-color: rgba(99,102,241,.4);
color: #94a3b8;
}
.ok-gm-badge-live {
background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.5);
color: #fca5a5;
}
.ok-gm-live-dot {
width: 6px; height: 6px; border-radius: 50%; background: #ef4444;
box-shadow: 0 0 6px rgba(239,68,68,.8);
animation: okDotSlot .9s ease infinite;
flex-shrink:0;
}
/* JOIN 버튼 — 전기 테두리 펄스 */
.ok-queue-join-btn {
display: block; width: 100%; padding: 17px;
background: linear-gradient(135deg, #3730a3, #5b21b6, #6d28d9, #7c3aed);
color: #fff; font-size: 15px; font-weight: 900;
border: 2px solid rgba(167,139,250,.7);
border-radius: 13px; cursor: pointer; margin-top: 10px;
letter-spacing: .08em; text-transform: uppercase;
text-shadow: 0 1px 6px rgba(0,0,0,.5), 0 0 12px rgba(139,92,246,.4);
animation: none;
transition: filter .15s, transform .1s;
position:relative; overflow:hidden;
box-shadow: 0 0 20px rgba(109,40,217,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
.ok-queue-join-btn::before {
content:''; position:absolute; inset:0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform .4s ease;
}
.ok-queue-join-btn:hover::before { transform: translateX(100%); }
.ok-queue-join-btn:hover { filter: brightness(1.18); animation: none;
box-shadow: 0 0 28px rgba(124,58,237,.7); }
.ok-queue-join-btn:active { transform: translateY(2px); }
/* 보조 버튼 2개 나란히 */
.ok-gm-sub-btns {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;
}
.ok-queue-list-btn {
display: block; width: 100%;
padding: 14px 12px;
border: 1px solid rgba(99,102,241,.3);
background: rgba(15,18,32,.75); color: #ffffff;
font-size: 14px; font-weight: 800; border-radius: 12px; cursor: pointer;
margin-top: 0;
transition: background .15s, color .15s, border-color .15s;
letter-spacing: .02em;
}
.ok-queue-list-btn:hover { background: rgba(99,102,241,.2); color: #fff; border-color: rgba(99,102,241,.55); }
.ok-board-open-btn { color: #ffffff !important; border-color: rgba(99,102,241,.45) !important; }
.ok-board-open-btn:hover { background: rgba(99,102,241,.22) !important; color: #fff !important; }
/* ─────────────────────────────────────────
⏳ WAITING BOX — 대기 중
───────────────────────────────────────── */
.ok-queue-state-box.waiting {
border-color: rgba(251,191,36,.45);
animation: okFadeIn .4s cubic-bezier(.22,.68,0,1.2);
box-shadow: 0 2px 24px rgba(0,0,0,.7),
inset 0 1px 0 rgba(251,191,36,.1);
}
.ok-queue-state-box.waiting::before {
background: linear-gradient(to bottom, transparent, rgba(251,191,36,.1), transparent);
}
.ok-queue-state-box.waiting::after {
background: linear-gradient(90deg, transparent, rgba(251,191,36,.85), rgba(253,230,138,.5), transparent);
}
/* WAITING ROOM 워터마크 */
.ok-gm-watermark {
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
font-size: 48px; font-weight: 900; color: rgba(251,191,36,.04);
letter-spacing: 6px; text-transform:uppercase; white-space:nowrap;
pointer-events:none; z-index:0; user-select:none;
}
/* 순서 번호 패널 */
.ok-gm-pos-panel {
background: rgba(15, 10, 5, 0.85);
border: 1.5px solid rgba(251,191,36,.35);
border-radius: 16px; padding: 20px 20px 18px; margin-bottom: 14px;
box-shadow: 0 2px 16px rgba(0,0,0,.5);
text-align: center;
}
.ok-gm-pos-label { font-size: 11px; color: rgba(200,160,80,.7); font-weight: 700; letter-spacing: 2px; text-transform:uppercase; margin-bottom: 10px; }
.ok-gm-pos-num {
font-size: 72px; font-weight: 900; color: #fbbf24;
font-family: 'Courier New', monospace;
line-height: 1;
text-shadow: 0 2px 8px rgba(251,191,36,.3);
animation: none;
}
.ok-gm-pos-total { font-size: 13px; color: rgba(200,160,80,.55); font-weight: 600; margin-top: 8px; letter-spacing: .5px; }
/* 도트 슬롯 진행 바 */
.ok-gm-slot-bar {
display: flex; align-items:center; justify-content: center;
gap: 5px; margin-bottom: 14px; flex-wrap:wrap;
}
.ok-gm-slot-dot {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(251,191,36,.18);
border: 1.5px solid rgba(251,191,36,.3);
flex-shrink:0; transition: background .3s, box-shadow .3s;
}
.ok-gm-slot-dot.filled {
background: #fbbf24;
box-shadow: 0 0 8px rgba(251,191,36,.7);
}
.ok-gm-slot-dot.is-me {
background: #34d399;
box-shadow: 0 0 10px rgba(52,211,153,.8);
animation: okDotSlot .9s ease infinite;
border-color: #34d399;
}
.ok-gm-slot-arrow { color: rgba(251,191,36,.5); font-size: 12px; font-weight: 900; }
/* 대기 중 순서 배지 (기존 호환) */
.ok-queue-pos-badge {
display: none; /* ok-gm-pos-panel로 대체 */
}
/* ─────────────────────────────────────────
⚡ ACTIVE BOX — 내 차례
───────────────────────────────────────── */
.ok-queue-state-box.active {
border-color: rgba(16,185,129,.75);
animation: okFadeIn .4s cubic-bezier(.22,.68,0,1.2), okActiveRing 2s ease infinite;
box-shadow: 0 0 0 1px rgba(16,185,129,.15),
0 0 36px rgba(16,185,129,.4),
0 20px 60px rgba(0,0,0,.92),
inset 0 1px 0 rgba(52,211,153,.25);
}
.ok-queue-state-box.active::before {
background: linear-gradient(to bottom, transparent, rgba(16,185,129,.1), transparent);
}
.ok-queue-state-box.active::after {
background: linear-gradient(90deg, transparent, rgba(52,211,153,.9), rgba(110,231,183,.5), transparent);
}
/* YOUR TURN 타이틀 */
.ok-gm-yourturn {
font-size: 30px; font-weight: 900; color: #34d399;
letter-spacing: -.01em; margin-bottom: 6px;
animation: none;
line-height: 1.1;
text-shadow: 0 0 10px rgba(52,211,153,.5);
}
/* 타이머 링 — 게임 HUD */
.ok-queue-timer-ring {
position: relative; width: 140px; height: 140px; margin: 0 auto 16px;
filter: drop-shadow(0 0 12px rgba(52,211,153,.4));
}
.ok-queue-timer-ring.resp-waiting { display: none !important; }
.ok-queue-timer-ring svg {
transform: rotate(-90deg); width: 140px; height: 140px;
}
.ok-timer-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 10; }
.ok-timer-prog {
fill: none; stroke: #34d399; stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 314;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear, stroke .5s;
filter: drop-shadow(0 0 4px #34d399);
}
.ok-timer-prog.warn { stroke: #f59e0b; filter: drop-shadow(0 0 4px #f59e0b); }
.ok-timer-prog.danger { stroke: #ef4444; filter: drop-shadow(0 0 6px #ef4444); }
.ok-timer-text {
position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center;
font-size: 26px; font-weight: 900; color: #f1f5f9;
font-family: 'Courier New', monospace;
letter-spacing: .02em;
}
/* 쿠지 선택 시작 버튼 */
.ok-queue-start-btn {
display: block; width: 100%; padding: 17px;
background: linear-gradient(135deg, #065f46, #047857, #059669, #10b981);
color: #fff; font-size: 15px; font-weight: 900;
border: 2px solid rgba(52,211,153,.7);
border-radius: 13px; cursor: pointer; margin-bottom: 10px;
letter-spacing: .08em; text-transform: uppercase;
text-shadow: 0 1px 6px rgba(0,0,0,.5), 0 0 12px rgba(52,211,153,.4);
animation: none;
transition: filter .15s, transform .1s;
box-shadow: 0 0 20px rgba(5,150,105,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
.ok-queue-start-btn:hover { filter: brightness(1.15); animation: none;
box-shadow: 0 0 28px rgba(16,185,129,.7); }
.ok-queue-start-btn:active { transform: translateY(2px); }
/* ── 공통: leave / 대기열 취소 버튼 ── */
.ok-queue-leave-btn {
display: inline-block; width: 100%; padding: 11px;
background: rgba(239,68,68,.08); color: #f87171;
border: 1px solid rgba(239,68,68,.35); border-radius: 10px;
font-size: 12px; font-weight: 800; cursor: pointer;
transition: background .15s, border-color .15s;
letter-spacing: .02em;
}
.ok-queue-leave-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.55); }
.ok-queue-leave-btn.secondary {
background: transparent; color: #ffffff;
border-color: rgba(148,163,184,.3); font-size: 14px;
}
.ok-queue-leave-btn.secondary:hover { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.3); }
/* ── 멤버 리스트 컨테이너 ── */
.ok-queue-members {
display: flex; flex-direction: column; gap: 6px;
margin-bottom: 14px;
max-height: 180px; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: rgba(251,191,36,.2) transparent;
}
.ok-queue-members::-webkit-scrollbar { width: 4px; }
.ok-queue-members::-webkit-scrollbar-track { background: transparent; }
.ok-queue-members::-webkit-scrollbar-thumb { background: rgba(251,191,36,.3); border-radius: 4px; }
.ok-queue-member-item {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px; padding: 9px 14px;
font-size: 12.5px; color: #e2e8f0;
transition: background .15s;
}
.ok-queue-member-item.is-me {
background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(245,158,11,.06));
border-color: rgba(251,191,36,.35);
box-shadow: 0 0 10px rgba(251,191,36,.08);
}
.ok-queue-member-badge {
min-width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 900;
background: linear-gradient(135deg,#334155,#475569); color: #e2e8f0; flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,.4); font-family: 'Courier New', monospace;
}
.ok-queue-member-badge.is-active {
background: linear-gradient(135deg,#059669,#10b981);
box-shadow: 0 2px 10px rgba(16,185,129,.45);
}
.ok-queue-member-badge.is-me-badge {
background: linear-gradient(135deg,#d97706,#f59e0b,#fbbf24);
color: #1a1000; font-size: 11px;
box-shadow: 0 2px 14px rgba(251,191,36,.65);
}
@keyframes ok-gold-pulse {
0%,100% { box-shadow: 0 2px 10px rgba(251,191,36,.55); }
50% { box-shadow: 0 2px 22px rgba(251,191,36,.9), 0 0 0 3px rgba(251,191,36,.15); }
}
.ok-queue-member-me {
background: linear-gradient(90deg, #fbbf24, #f59e0b);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; font-weight: 900;
}
.ok-queue-member-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-queue-total-sub {
font-size: 11px; color: rgba(148,163,184,.55); margin-bottom: 10px;
font-weight: 600; letter-spacing: .02em;
}
/* ── 응답 타이머 박스 ── */
#okResponseTimerBox {
display: none; flex-direction: column; align-items: center; gap: 10px;
background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.35);
border-radius: 16px; padding: 16px 20px 14px; margin-bottom: 12px;
animation: ok-resp-fadein .35s ease;
transition: background .4s, border-color .4s;
}
#okResponseTimerBox.show { display: flex; }
@keyframes ok-resp-fadein {
from { opacity: 0; transform: translateY(-8px) scale(.97); }
to { opacity: 1; transform: none; }
}
.ok-resp-label {
font-size: 12px; font-weight: 700; color: #6ee7b7;
letter-spacing: .04em;
display: flex; align-items: center; gap: 6px;
text-align: center; line-height: 1.4;
}
/* ⏰ 이모지 제거 — 텍스트에 ⚡ 이미 포함 */
.ok-resp-label::before { content: none; }
.ok-resp-ring { position: relative; width: 86px; height: 86px; flex-shrink: 0; }
.ok-resp-ring svg { width: 86px; height: 86px; transform: rotate(-90deg); }
.ok-resp-ring-bg { fill: none; stroke: rgba(16,185,129,.15); stroke-width: 7; }
.ok-resp-ring-prog {
fill: none; stroke: #10b981; stroke-width: 7; stroke-linecap: round;
stroke-dasharray: 226; stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear, stroke .4s;
}
.ok-resp-ring-prog.warn { stroke: #f59e0b; }
.ok-resp-ring-prog.safe { stroke: #10b981; }
/* 빨강은 urgent 클래스로 제어 (30초 미만) */
#okResponseTimerBox.urgent .ok-resp-ring-prog { stroke: #ef4444; }
.ok-resp-ring-text {
position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; font-size: 19px; font-weight: 900; color: #fef2f2;
font-family: 'Courier New', monospace;
}
/* 단계별 설명문 색상 */
.ok-resp-desc { font-size: 12px; color: #6ee7b7; text-align: center; line-height: 1.5; transition: color .4s; }
/* warn (30~60초): 박스 주황 계열로 전환 */
#okResponseTimerBox.warn-stage {
background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.35);
}
#okResponseTimerBox.warn-stage .ok-resp-label { color: #fcd34d; }
#okResponseTimerBox.warn-stage .ok-resp-desc { color: #fcd34d; }
#okResponseTimerBox.warn-stage .ok-resp-ring-bg { stroke: rgba(245,158,11,.15); }
@keyframes ok-resp-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}
/* urgent (30초 미만): 빨강 긴박 */
#okResponseTimerBox.urgent {
animation: ok-resp-pulse 1s infinite;
background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.65);
}
#okResponseTimerBox.urgent .ok-resp-label { color: #fca5a5; }
#okResponseTimerBox.urgent .ok-resp-desc { color: #fca5a5; }
#okResponseTimerBox.urgent .ok-resp-ring-bg { stroke: rgba(239,68,68,.18); }
/* ★ [BOARD] 종이 현황 버튼 강조 */
.ok-board-open-btn { color: #ffffff !important; border-color: rgba(99,102,241,.45) !important; }
.ok-board-open-btn:hover { background: rgba(99,102,241,.22) !important; color: #fff !important; border-color: rgba(99,102,241,.6) !important; }
/* ★ [BOARD] 헤더 네온 타이틀 */
@keyframes okBoardNeonPulse {
0%, 100% { text-shadow: 0 0 6px #818cf8, 0 0 14px #6366f1, 0 0 28px #4f46e5; }
50% { text-shadow: 0 0 10px #a5b4fc, 0 0 22px #818cf8, 0 0 40px #6366f1; }
}
/* ★ [BOARD] 모달 오버레이 */
.ok-board-modal {
position: fixed; inset: 0; z-index: 99990;
background: rgba(0,0,0,.72);
display: flex; align-items: center; justify-content: center;
padding: 0 16px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
/* ★ [BOARD] 중앙 팝업 창 */
.ok-board-sheet {
width: 100%; max-width: 520px;
height: 80vh;
background: linear-gradient(160deg, #0d0f20, #13152e, #1a1638);
border: 1.5px solid rgba(99,102,241,.45);
border-radius: 20px;
display: flex; flex-direction: column;
box-shadow: 0 8px 48px rgba(0,0,0,.8), 0 0 0 1px rgba(99,102,241,.18), 0 0 40px rgba(99,102,241,.08);
animation: okBoardPopIn .28s cubic-bezier(.34,1.2,.64,1);
}
@keyframes okBoardPopIn {
from { transform: scale(.92) translateY(12px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
/* 헤더 */
.ok-board-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px 12px;
gap: 12px;
border-bottom: 1px solid rgba(255,255,255,.07);
flex-shrink: 0;
}
/* 타이틀(왼쪽)와 배지 그룹(오른쪽) 사이 최대 공간 */
.ok-board-title-wrap {
display: flex; align-items: center;
flex: 1; min-width: 0;
gap: 10px;
}
.ok-board-title {
font-size: 15px; font-weight: 900;
color: #f5c842;
letter-spacing: .4px;
flex-shrink: 0;
}
/* 카운터: 뜯긴 종이(빨강) + 전체(초록) 배지 2개 — 오른쪽 정렬 */
.ok-board-counter {
display: flex; gap: 10px; align-items: center; flex-wrap: nowrap;
margin-left: auto; flex-shrink: 0;
}
.ok-board-counter-sold {
font-size: 15px; font-weight: 900;
color: #fff;
background: linear-gradient(135deg, #ef4444, #dc2626);
border-radius: 999px;
padding: 7px 18px;
box-shadow: 0 0 14px rgba(239,68,68,.6);
white-space: nowrap;
letter-spacing: .3px;
}
.ok-board-counter-total {
font-size: 15px; font-weight: 900;
color: #fff;
background: linear-gradient(135deg, #22c55e, #16a34a);
border-radius: 999px;
padding: 7px 18px;
box-shadow: 0 0 14px rgba(34,197,94,.6);
white-space: nowrap;
letter-spacing: .3px;
}
/* 반응형: 모바일(480px 이하) — 배지 축소해 한 줄 유지 */
@media (max-width: 480px) {
.ok-board-header { padding: 10px 14px 10px; gap: 8px; }
.ok-board-title { font-size: 13px; }
.ok-board-counter { gap: 6px; }
.ok-board-counter-sold,
.ok-board-counter-total {
font-size: 11px; font-weight: 800;
padding: 5px 11px;
box-shadow: none;
letter-spacing: 0;
}
.ok-board-close-btn {
width: 32px; height: 32px; font-size: 14px;
margin-left: 6px;
}
}
/* 닫기 버튼 — 배지와 충분한 간격, 크기/색상 개선 */
.ok-board-close-btn {
width: 40px; height: 40px; border-radius: 50%;
background: rgba(239,68,68,.18);
border: 2px solid rgba(239,68,68,.55);
color: #fca5a5; font-size: 18px; font-weight: 700; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
flex-shrink: 0;
margin-left: 12px;
box-shadow: 0 0 8px rgba(239,68,68,.25);
line-height: 1;
}
.ok-board-close-btn:hover {
background: rgba(239,68,68,.45);
border-color: rgba(239,68,68,.95);
color: #fff;
box-shadow: 0 0 16px rgba(239,68,68,.6);
}
/* 범례 */
.ok-board-legend {
display: flex; gap: 20px; padding: 9px 20px;
border-bottom: 1px solid rgba(99,102,241,.12);
flex-shrink: 0;
background: rgba(99,102,241,.04);
}
.ok-board-legend-item {
display: flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.ok-board-legend-item.unsold-label { color: #fb923c; }
/* 공개된 쿠지 라벨: 밝은 하늘색 */
.ok-board-legend-item.sold-label { color: #38bdf8; }
/* 상위상 라벨: 금색 */
.ok-board-legend-item.top-label { color: #fbbf24; }
.ok-board-legend-dot.top {
width: 10px; height: 10px; border-radius: 2px;
border: 1.5px solid #fbbf24;
background: transparent;
box-shadow: 0 0 4px rgba(251,191,36,.5);
}
.ok-board-legend-dot {
width: 14px; height: 9px; border-radius: 3px;
flex-shrink: 0;
}
.ok-board-legend-dot.unsold {
background: linear-gradient(135deg, #f97316, #ea580c);
border: 1px solid rgba(251,146,60,.5);
box-shadow: 0 0 6px rgba(249,115,22,.4);
}
.ok-board-legend-dot.sold {
background: #1c1f2e;
border: 1.5px solid #38bdf8;
box-shadow: 0 0 5px rgba(56,189,248,.3);
}
/* 그리드 래퍼 (스크롤) */
.ok-board-grid-wrap {
flex: 1; overflow-y: auto; overflow-x: hidden;
padding: 14px 14px 20px;
/* 부드러운 스크롤 */
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/* 스크롤바 얇게 */
scrollbar-width: thin;
scrollbar-color: rgba(99,102,241,.3) transparent;
}
.ok-board-grid-wrap::-webkit-scrollbar { width: 4px; }
.ok-board-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.ok-board-grid-wrap::-webkit-scrollbar-thumb { background: rgba(99,102,241,.3); border-radius: 4px; }
/* 그리드 레이아웃 */
.ok-board-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 6px;
/* contain으로 레이아웃 격리 — 렉 방지 */
contain: layout style;
}
/* ok-paper-grid와 동일한 브레이크포인트로 일치 */
@media (max-width: 900px) { .ok-board-grid { grid-template-columns: repeat(6, 1fr); gap: 5px; } }
@media (max-width: 600px) { .ok-board-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; } }
/* 종이 카드 (읽기전용) */
.ok-board-paper {
aspect-ratio: 3/2;
border-radius: 6px;
position: relative; overflow: hidden;
/* 기본: 미판매 앞면 오렌지 */
background: #e8820c;
border: 1px solid #c06800;
box-shadow: 0 1px 3px rgba(0,0,0,.4);
/* contain으로 개별 카드 격리 */
contain: layout style;
/* pointer-events 없음 — 순수 표시용 */
pointer-events: none;
user-select: none;
}
/* 순번 pill 배지 — 왼쪽 상단, 자릿수 자동 대응 */
.ok-board-paper-num {
position: absolute;
top: 4px; left: 4px;
min-width: 16px; height: 16px;
padding: 0 4px;
border-radius: 8px;
background: rgba(0,0,0,0.28);
display: inline-flex; align-items: center; justify-content: center;
font-size: 9px;
font-weight: 700; color: rgba(255,255,255,0.9);
line-height: 1;
letter-spacing: -0.3px;
box-sizing: border-box;
}
/* 공개된 쿠지 (구매완료) — 심플 다크 + 흰 번호 */
.ok-board-paper.ok-board-sold {
background: #1c1f2e;
border-color: rgba(99,102,241,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.5);
opacity: 1;
}
/* 뽑힌 카드 — 실제 번호를 중앙에 크게 */
.ok-board-paper.ok-board-sold .ok-board-paper-num {
/* pill 배지 해제 → 중앙 전체 표시로 전환 */
position: absolute; inset: 0;
top: 0; left: 0;
min-width: unset; height: unset;
padding: 0;
border-radius: 0;
background: transparent;
display: flex; align-items: center; justify-content: center;
font-size: clamp(11px, 2.6vw, 17px);
font-weight: 900; color: #ffffff;
letter-spacing: 0;
text-shadow: none;
}
/* ::before 오버레이 제거 */
.ok-board-paper.ok-board-sold::before { display: none; }
/* 뽑힌 상위상 카드 — 금색 테두리 + 은은한 glow */
.ok-board-paper.ok-board-sold.ok-board-top {
border: 1.5px solid #fbbf24;
box-shadow: 0 0 6px rgba(251,191,36,.55), 0 1px 3px rgba(0,0,0,.5);
cursor: pointer;
pointer-events: auto;
}
.ok-board-paper.ok-board-sold.ok-board-top:active {
opacity: .75;
}
/* 스피너 */
.ok-board-loading {
grid-column: 1 / -1;
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 32px; color: #64748b; font-size: 14px;
}
.ok-board-loading-spinner {
width: 20px; height: 20px; border-radius: 50%;
border: 3px solid rgba(99,102,241,.2);
border-top-color: #6366f1;
animation: okBoardSpin .7s linear infinite;
}
@keyframes okBoardSpin { to { transform: rotate(360deg); } }
/* ── 대기열 참가 전 주의사항 모달 ──────────────────────── */
#okQueueNoticeModal {
display:none; position:fixed; inset:0; z-index:9999;
background:rgba(0,0,0,.7); align-items:center; justify-content:center;
}
#okQueueNoticeModal.show { display:flex; }
.ok-notice-modal-box {
background:#1e1e2e; border-radius:18px; padding:28px 24px 22px;
max-width:min(456px, calc(100vw - 32px)); width:calc(100% - 32px);
border:1px solid rgba(99,102,241,.35); box-shadow:0 8px 40px rgba(0,0,0,.6);
color:#e2e2f0; font-size:14px;
}
.ok-notice-modal-title {
font-size:17px; font-weight:800; color:#a5b4fc; margin-bottom:14px;
display:flex; align-items:center; gap:8px;
}
.ok-notice-list {
list-style:none; padding:0; margin:0 0 18px 0;
}
.ok-notice-list li {
padding:8px 0 8px 24px; position:relative;
border-bottom:1px solid rgba(255,255,255,.06); line-height:1.5;
}
.ok-notice-list li:last-child { border-bottom:none; }
.ok-notice-list li::before {
content:'⚠️'; position:absolute; left:0; top:8px; font-size:13px;
}
.ok-notice-list li strong { color:#f9a8d4; }
.ok-notice-agree-row {
display:flex; align-items:center; gap:8px;
margin-bottom:16px; cursor:pointer; user-select:none;
}
.ok-notice-agree-row input[type=checkbox] { width:22px; height:22px; cursor:pointer; accent-color:#6366f1; flex-shrink:0; }
.ok-notice-agree-row label { cursor:pointer; font-size:13px; color:#c4c4d4; flex:1; pointer-events:auto; user-select:none; }
.ok-notice-btns { display:flex; gap:10px; }
.ok-notice-cancel-btn {
flex:1; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
background:transparent; color:#9ca3af; font-size:14px; font-weight:700; cursor:pointer;
}
.ok-notice-confirm-btn {
flex:2; padding:12px; border-radius:10px; border:none;
background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
font-size:14px; font-weight:800; cursor:pointer; transition:filter .2s, transform .15s;
}
.ok-notice-confirm-btn.active { opacity:1; }
.ok-notice-confirm-green {
background:linear-gradient(135deg,#16a34a,#22c55e) !important;
box-shadow:0 4px 18px rgba(34,197,94,.35);
}
.ok-notice-confirm-green:hover { filter:brightness(1.1); transform:translateY(-1px); }
.ok-notice-confirm-green:active { filter:brightness(.95); transform:translateY(0); }
/* 대기 중 박스 내부 구분선 */
.ok-waiting-divider {
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(251,191,36,.2), transparent);
margin: 4px 0 8px;
}
.ok-queue-live-count {
font-size: 26px; font-weight: 900; color: #94a3b8; margin-bottom: 8px;
text-shadow: 0 2px 12px rgba(0,0,0,.5);
transition: color .3s;
}
/* 0명 대기 시: 초록색 "바로 시작" 강조 */
.ok-queue-live-count.is-empty {
color: #34d399;
text-shadow: 0 0 20px rgba(52,211,153,.5);
}
/* 진행자 있을 때: 주황/앰버 계열로 "뒤에 줄이 있어요" 느낌 */
.ok-queue-live-count.has-queue {
color: #fbbf24;
text-shadow: 0 0 20px rgba(251,191,36,.5);
}
/* ── 뽑기 화면 타이머 바 (가로 꽉 찬 게이지) ── */
.ok-pull-timer-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 10px; font-size: 13px; color: #94a3b8;
}
.ok-pull-timer-val { color: #34d399; font-size: 15px; font-weight: 700; }
.ok-pull-timer-val.warn { color: #f59e0b; }
.ok-pull-timer-val.danger { color: #ef4444; }
.ok-pull-timer-track {
flex: 1; min-width: 120px; height: 6px;
background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden;
}
.ok-pull-timer-fill {
height: 100%; width: 100%;
background: linear-gradient(90deg,#34d399,#10b981);
border-radius: 99px; transition: width 1s linear;
}
.ok-pull-timer-fill.warn { background: linear-gradient(90deg,#f59e0b,#d97706); }
.ok-pull-timer-fill.danger { background: linear-gradient(90deg,#ef4444,#dc2626); }
.ok-pull-point-bar {
font-size: 12px; color: #fbbf24; font-weight: 700; margin-top: 6px;
}
/* ── 뽑기 완료 바 ── */
.ok-done-bar {
padding: 20px 24px 20px; /* 위아래 20px 균등 여백 */
text-align: center;
margin-top: 0;
margin-bottom: calc(var(--fp, 64px) + 4px);
background: none;
}
@media (min-width: 601px) {
.ok-done-bar {
margin-bottom: 24px;
padding: 20px 24px 20px; /* PC도 동일하게 */
margin-top: 0;
}
}
.ok-done-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 38px;
background: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #ef4444 100%);
color: #fff; font-size: 15px; font-weight: 800;
border: none; border-radius: 14px; cursor: pointer;
box-shadow: 0 4px 20px rgba(239,68,68,.4), 0 0 0 1px rgba(239,68,68,.25);
transition: all .2s; letter-spacing: .01em;
position: relative; overflow: hidden;
}
.ok-done-btn::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 55%);
pointer-events: none;
}
.ok-done-btn::after {
content: '✓';
font-size: 16px; font-weight: 900;
}
.ok-done-btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(239,68,68,.55); }
.ok-done-btn:active { transform: translateY(0px) scale(.98); }
/* 상세 화면 */
/* ══ 뽑기화면 헤더 리메이크 ══ */
.ok-detail-header {
position: relative; overflow: hidden;
background:
linear-gradient(rgba(99,102,241,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(99,102,241,.08) 1px, transparent 1px),
linear-gradient(160deg, #03040b 0%, #070a18 60%, #080c20 100%);
background-size: 32px 32px, 32px 32px, 100% 100%;
border: 2px solid rgba(99,102,241,.55);
border-radius: 20px;
padding: 14px 16px 16px;
margin-top: 14px; margin-bottom: 12px;
box-shadow:
0 0 0 1px rgba(99,102,241,.15),
0 0 28px rgba(99,102,241,.3),
0 12px 40px rgba(0,0,0,.88),
inset 0 1px 0 rgba(139,92,246,.2),
inset 0 -1px 0 rgba(99,102,241,.1);
animation: okGameGlow 3s ease infinite;
}
/* 상단 내부 광택 (스캔라인 제거) */
.ok-detail-header::before {
content: ''; position: absolute; left: 0; right: 0; height: 80px; pointer-events: none;
background: linear-gradient(to bottom, transparent, rgba(99,102,241,.07), transparent);
z-index: 0;
}
/* 상단 하이라이트 라인 */
.ok-detail-header::after {
content: ''; position: absolute; top: 0; left: 5%; right: 5%; height: 1.5px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(139,92,246,.9), rgba(167,139,250,.7), transparent);
filter: blur(.4px);
z-index: 0;
}
.ok-back-btn {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.45);
color: #a5b4fc; font-size: 12.5px; font-weight: 800; padding: 6px 13px;
border-radius: 999px; cursor: pointer; font-family: inherit; margin-bottom: 12px;
transition: background .15s, color .15s, box-shadow .15s;
position: relative; z-index: 1;
box-shadow: 0 0 8px rgba(99,102,241,.25);
letter-spacing: .04em;
}
.ok-back-btn:hover { background: rgba(99,102,241,.28); color: #c7d2fe; box-shadow: 0 0 14px rgba(99,102,241,.45); }
/* 상단 정보 행: 이미지 + 텍스트 */
.ok-detail-info {
display: flex; gap: 16px; align-items: flex-start;
position: relative; z-index: 1;
}
/* 이미지: 게임 네온 글로우 썸네일 */
.ok-detail-thumb {
width: 114px; height: 114px;
object-fit: cover; flex-shrink: 0;
border-radius: 14px;
border: 2px solid rgba(139,92,246,.75);
background: #080c18;
box-shadow:
0 0 0 3px rgba(99,102,241,.15),
0 0 18px rgba(99,102,241,.45),
0 0 40px rgba(139,92,246,.2),
0 6px 20px rgba(0,0,0,.75);
transition: box-shadow .2s;
position: relative; z-index: 1;
}
.ok-detail-thumb:hover {
box-shadow:
0 0 0 3px rgba(139,92,246,.3),
0 0 28px rgba(99,102,241,.65),
0 0 55px rgba(139,92,246,.35),
0 8px 24px rgba(0,0,0,.8);
}
/* 텍스트 영역 */
.ok-detail-text-wrap {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0;
}
.ok-detail-title {
font-size: 17px; font-weight: 900; color: #e2e8f0;
margin: 0 0 8px; line-height: 1.3;
letter-spacing: -.3px;
text-shadow: 0 0 18px rgba(139,92,246,.5), 0 2px 8px rgba(0,0,0,.8);
position: relative; z-index: 1;
}
/* 메타 칩 행 */
.ok-detail-meta {
display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px;
}
/* 화시 있을 간격 override 방지 */
.ok-detail-meta .ok-meta-item { margin: 0; }
.ok-meta-item {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12.5px; font-weight: 800;
line-height: 1;
border-radius: 8px; padding: 5px 11px;
height: 30px; box-sizing: border-box;
white-space: nowrap;
position: relative; z-index: 1;
letter-spacing: .02em;
border: 1.5px solid transparent;
}
.ok-meta-item b { font-weight: 900; line-height: 1; font-size: inherit; }
/* 📦 총 N장 — 초록 */
.ok-meta-item.total {
background: rgba(52,211,153,.12);
color: #6ee7b7; border-color: rgba(52,211,153,.4);
}
.ok-meta-item.total b { color: #34d399; }
/* 📊 남음 N장 — 빨강 */
.ok-meta-item.remain {
background: rgba(239,68,68,.12);
color: #fca5a5; border-color: rgba(239,68,68,.4);
}
.ok-meta-item.remain b { color: #f87171; }
/* 💰 가격 — 노랑 (기본) */
.ok-meta-item.price {
background: rgba(251,191,36,.13);
color: #fde68a !important; border-color: rgba(251,191,36,.45);
font-size: 12.5px !important; font-weight: 800 !important;
letter-spacing: .02em !important; margin: 0 !important;
}
.ok-meta-item.price b { color: #fbbf24 !important; }
/* 🏆 무료참여 — 금색/노랑 */
.ok-meta-item.price.free {
background: linear-gradient(135deg, rgba(217,119,6,.25), rgba(251,191,36,.18));
color: #fbbf24 !important; border-color: rgba(251,191,36,.7);
font-weight: 900 !important; font-size: 12.5px !important;
text-shadow: 0 0 8px rgba(251,191,36,.4);
letter-spacing: .02em !important; margin: 0 !important;
}
.ok-meta-item.price.free b { color: #fbbf24 !important; font-size: inherit !important; }
/* 타이머 인라인 — 이미지 옆 하단 */
.ok-detail-timer-inline {
display: flex; align-items: center; gap: 8px; margin-top: 6px;
background: rgba(99,102,241,.1);
border: 1px solid rgba(99,102,241,.28);
border-radius: 10px; padding: 6px 10px;
position: relative; z-index: 1;
}
.ok-detail-timer-label {
font-size: 11px; color: #a5b4fc; font-weight: 800; white-space: nowrap; flex-shrink: 0;
text-transform: uppercase; letter-spacing: .06em;
display: flex; align-items: center; gap: 4px;
position: relative; z-index: 1;
}
.ok-detail-timer-val {
font-size: 17px; font-weight: 900; color: #34d399; flex-shrink: 0;
text-shadow: 0 0 14px rgba(52,211,153,.8), 0 0 28px rgba(52,211,153,.4);
letter-spacing: .06em; font-variant-numeric: tabular-nums;
position: relative; z-index: 1;
}
.ok-detail-timer-val.warn { color: #f59e0b; text-shadow: 0 0 14px rgba(245,158,11,.8), 0 0 28px rgba(245,158,11,.4); }
.ok-detail-timer-val.danger { color: #ef4444; text-shadow: 0 0 14px rgba(239,68,68,.8), 0 0 28px rgba(239,68,68,.4); animation: ok-timer-blink .6s steps(1) infinite; }
.ok-detail-timer-track {
flex: 1; min-width: 60px; height: 7px;
background: rgba(99,102,241,.15); border-radius: 99px; overflow: hidden;
border: 1px solid rgba(99,102,241,.25);
box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
.ok-detail-timer-fill {
height: 100%; width: 100%;
background: linear-gradient(90deg, #06b6d4, #34d399, #10b981);
border-radius: 99px; transition: width 1s linear;
box-shadow: 0 0 10px rgba(52,211,153,.6);
position: relative;
}
.ok-detail-timer-fill::after {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.3));
border-radius: 99px;
}
.ok-detail-timer-fill.warn { background: linear-gradient(90deg,#f59e0b,#d97706); box-shadow: 0 0 10px rgba(245,158,11,.6); }
.ok-detail-timer-fill.danger { background: linear-gradient(90deg,#ef4444,#dc2626); box-shadow: 0 0 10px rgba(239,68,68,.6); }
/* 설명 박스 — 이미지+메타 아래 전체 너비 */
.ok-detail-desc {
display: none; /* JS에서 show */
margin-top: 12px;
padding: 11px 14px;
background: linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.08));
border: 1px solid rgba(99,102,241,.3);
border-left: 3px solid #818cf8;
border-radius: 0 12px 12px 0;
font-size: 13px; font-weight: 600;
color: #c7d2fe; line-height: 1.72;
letter-spacing: .01em;
word-break: break-all;
overflow-wrap: break-word;
position: relative; z-index: 1;
box-shadow: 0 0 12px rgba(99,102,241,.15), inset 0 1px 0 rgba(255,255,255,.04);
}
.ok-detail-desc a {
color: #a5b4fc; text-decoration: underline; text-underline-offset: 2px;
}
/* ── 확률 공시 인라인 바 (헤더 배너 내부 하단) — HUD 바 스타일 ── */
.ok-prob-inline-bar {
display: flex; align-items: center; gap: 7px;
margin-top: 10px;
padding: 7px 12px;
background: linear-gradient(90deg, rgba(99,102,241,.14), rgba(139,92,246,.1), rgba(99,102,241,.14));
border: 1px solid rgba(99,102,241,.35);
border-radius: 10px;
position: relative; z-index: 1;
box-shadow: 0 0 10px rgba(99,102,241,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
.ok-prob-inline-icon {
font-size: 13px; flex-shrink: 0; line-height: 1;
}
.ok-prob-inline-text {
flex: 1; min-width: 0;
font-size: 11px; font-weight: 700;
color: #a5b4fc; line-height: 1.45;
word-break: keep-all;
letter-spacing: .01em;
}
.ok-prob-inline-link {
flex-shrink: 0;
font-size: 10px; font-weight: 900;
color: #c7d2fe;
text-decoration: none;
background: rgba(99,102,241,.22);
border: 1px solid rgba(139,92,246,.5);
padding: 2px 8px; border-radius: 99px;
white-space: nowrap;
transition: background .15s, box-shadow .15s;
box-shadow: 0 0 6px rgba(99,102,241,.2);
letter-spacing: .04em;
}
.ok-prob-inline-link:hover { background: rgba(99,102,241,.38); box-shadow: 0 0 12px rgba(99,102,241,.4); }
/* 섹션 공통 */
.ok-prizes-section, .ok-papers-section { margin-bottom: 14px; }
.ok-section-label {
font-size: 13px; font-weight: 900; color: #c7d2fe;
letter-spacing: .06em; margin-bottom: 12px;
text-shadow: 0 0 12px rgba(99,102,241,.6);
display: flex; align-items: center; gap: 6px;
}
.ok-papers-section .ok-section-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
padding: 10px 14px;
background: linear-gradient(135deg,rgba(99,102,241,.14),rgba(139,92,246,.08));
border: 1px solid rgba(99,102,241,.32);
border-radius: 12px;
box-shadow: 0 0 14px rgba(99,102,241,.15), inset 0 1px 0 rgba(255,255,255,.05);
}
.ok-papers-hint {
font-size: 12.5px; color: #e2e8f0; font-weight: 800;
background: linear-gradient(135deg,rgba(99,102,241,.25),rgba(139,92,246,.18));
padding: 6px 14px; border-radius: 999px;
border: 1px solid rgba(139,92,246,.5);
box-shadow: 0 0 12px rgba(99,102,241,.25), inset 0 1px 0 rgba(255,255,255,.08);
letter-spacing: .02em;
white-space: nowrap;
}
/* ══ 선택 액션 floating 바 (전체/자동/최근/최애) ══ */
/* ── 공통 모달 오버레이 ── */
.ok-modal-overlay {
position: fixed; inset: 0; z-index: 1200;
background: rgba(0,0,0,.65);
display: flex; align-items: center; justify-content: center;
padding: 16px;
backdrop-filter: blur(4px);
animation: ok-overlay-in .18s ease both;
}
@keyframes ok-overlay-in { from{opacity:0} to{opacity:1} }
.ok-modal-sheet {
width: 100%; max-width: 480px;
background: linear-gradient(160deg,#0d0b22 0%,#161138 60%,#0f1a2e 100%);
border: 1.5px solid rgba(99,102,241,.35);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07);
padding: 20px 20px 24px;
position: relative;
animation: ok-sheet-in .22s cubic-bezier(.34,1.56,.64,1) both;
}
/* PC(≥751px): 모달 더 크게 */
@media (min-width: 751px) {
.ok-modal-sheet { max-width: 600px; padding: 28px 32px 32px; border-radius: 28px; }
.ok-modal-handle { margin-bottom: 20px; }
}
@keyframes ok-sheet-in {
from{opacity:0;transform:translateY(20px) scale(.95)}
to{opacity:1;transform:none}
}
.ok-modal-handle {
width: 40px; height: 4px; border-radius: 2px;
background: rgba(255,255,255,.18); margin: 0 auto 16px;
}
/* ── 선택 액션 floating 바 ── */
/* 기본: 항상 숨김 (okDetailView 활성 시 + JS .hidden 해제 시에만 표시) */
#okActionFloatBar {
display: none;
position: fixed;
left: 50%; transform: translateX(-50%);
z-index: 480;
width: 100%; max-width: 760px;
/* bottom은 JS _okUpdateActionBarBottom()이 설정 */
pointer-events: none;
}
/* okDetailView가 열려 있고 .hidden이 아닐 때만 표시 */
body:has(#okDetailView:not(.hidden)) #okActionFloatBar:not(.hidden) {
display: block;
}
#okActionFloatBar.hidden { display: none !important; }
.ok-action-float-inner {
display: flex; gap: 10px;
padding: 8px 20px 6px;
justify-content: center;
pointer-events: auto;
}
/* ── 버튼 공통 ── */
.ok-action-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; padding: 9px 18px; min-width: 72px; flex: 1; max-width: 100px;
border-radius: 14px; border: none; cursor: pointer;
font-family: inherit; transition: transform .15s, box-shadow .15s, opacity .15s;
position: relative; overflow: hidden;
}
.ok-action-btn::before {
content:''; position:absolute; inset:0;
background: linear-gradient(135deg,rgba(255,255,255,.10) 0%,transparent 60%);
pointer-events: none;
}
.ok-action-btn:active { transform: scale(.96); }
.ok-action-btn-icon { font-size: 18px; line-height: 1; }
.ok-action-btn-label { font-size: 12px; font-weight: 900; line-height: 1.2; color: #fff; letter-spacing: -.2px; }
.ok-action-btn-sub { font-size: 9.5px; font-weight: 700; opacity: .75; color: rgba(255,255,255,.85); }
/* 전체선택 — 보라 */
.ok-action-select-all { background: linear-gradient(135deg,#6d28d9,#4f46e5); box-shadow: 0 4px 14px rgba(99,102,241,.35),inset 0 1px 0 rgba(255,255,255,.12); }
.ok-action-select-all:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(99,102,241,.5); transform: translateY(-1px); }
/* 자동선택 — 황금 */
.ok-action-auto-select { background: linear-gradient(135deg,#b45309,#d97706); box-shadow: 0 4px 14px rgba(217,119,6,.35),inset 0 1px 0 rgba(255,255,255,.12); }
.ok-action-auto-select:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(217,119,6,.5); transform: translateY(-1px); }
/* 최근선택 — 청록 */
.ok-action-recent-sel { background: linear-gradient(135deg,#0e7490,#0891b2); box-shadow: 0 4px 14px rgba(8,145,178,.35),inset 0 1px 0 rgba(255,255,255,.12); }
.ok-action-recent-sel:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(8,145,178,.5); transform: translateY(-1px); }
.ok-action-recent-sel.has-recent .ok-action-btn-sub { color: #a5f3fc; opacity: 1; }
/* 최애번호 — 핑크 */
.ok-action-fav-sel { background: linear-gradient(135deg,#9d174d,#db2777); box-shadow: 0 4px 14px rgba(219,39,119,.35),inset 0 1px 0 rgba(255,255,255,.12); }
.ok-action-fav-sel:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(219,39,119,.5); transform: translateY(-1px); }
.ok-action-fav-sel.has-fav .ok-action-btn-sub { color: #fbcfe8; opacity: 1; }
.ok-action-btn:disabled { opacity: .35; cursor: not-allowed; transform: none !important; }
/* ── 모바일(≤750px): 상단 fixed — top은 JS _okAdjustActionBarTop()이 설정 ── */
@media (max-width: 750px) {
body:has(#okDetailView:not(.hidden)) #okActionFloatBar:not(.hidden) {
position: fixed;
top: 0; /* JS가 실측 후 덮어씀 */
left: 0; right: 0;
transform: none;
width: 100%; max-width: 100%;
z-index: 394;
background: none;
border-bottom: none;
box-shadow: none;
backdrop-filter: none;
pointer-events: auto;
}
.ok-action-float-inner { padding: 7px 10px 6px; gap: 6px; justify-content: space-around; }
.ok-action-btn { padding: 7px 10px; min-width: 0; max-width: none; flex: 1; border-radius: 11px; }
.ok-action-btn-icon { font-size: 16px; }
.ok-action-btn-label { font-size: 11px; }
.ok-action-btn-sub { font-size: 9px; }
}
@media (max-width: 560px) {
.ok-action-btn { transition: opacity .1s; will-change: auto; }
.ok-action-btn:hover { transform: none !important; }
}
/* 기존 ok-paper-action-bar 완전 비활성 */
.ok-paper-action-bar { display: none !important; }
/* ══ 자동선택 모달 ══ */
.ok-autoselect-sheet { max-width: 460px; }
@media (min-width: 751px) {
.ok-autoselect-sheet { max-width: 640px; }
.ok-autoselect-inner { padding: 24px 28px 22px; }
.ok-autoselect-title { font-size: 18px; }
.ok-autoselect-remaining { font-size: 14px; padding: 7px 18px; }
.ok-autoselect-desc { font-size: 13px; margin-bottom: 14px; }
.ok-autoselect-preset-btn { font-size: 15px; padding: 14px 10px 12px; border-radius: 16px; }
.ok-autoselect-preset-btn[data-tier="5"] { font-size: 15.5px; }
.ok-autoselect-input { padding: 13px 16px; font-size: 16px; }
.ok-autoselect-go-btn { padding: 13px 24px; font-size: 15px; }
.ok-autoselect-cancel-btn { padding: 13px 20px; font-size: 14px; }
.ok-autoselect-label-text { font-size: 11px; }
}
/* ══ 최애번호 모달 ══ */
.ok-fav-sheet { max-width: 460px; }
@media (min-width: 751px) {
.ok-fav-sheet { max-width: 600px; }
.ok-fav-title { font-size: 19px; }
.ok-fav-desc { font-size: 13px; margin-bottom: 18px; }
.ok-fav-badges { min-height: 64px; padding: 14px 16px; gap: 9px; margin-bottom: 18px; }
.ok-fav-badge { font-size: 14px; padding: 7px 13px; }
.ok-fav-add-row { gap: 10px; margin-bottom: 16px; }
.ok-fav-input { padding: 12px 16px; font-size: 16px; }
.ok-fav-add-btn { padding: 12px 20px; font-size: 14px; }
.ok-fav-select-btn { padding: 15px; font-size: 16px; border-radius: 16px; }
.ok-fav-legend { font-size: 12px; gap: 14px; margin-bottom: 18px; }
}
.ok-fav-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ok-fav-title { font-size: 16px; font-weight: 900; color: #f9a8d4; letter-spacing: -.2px; }
.ok-fav-close-btn { background: rgba(255,255,255,.08); border: none; color: #94a3b8; border-radius: 8px; padding: 5px 9px; cursor: pointer; font-size: 14px; transition: background .15s; }
.ok-fav-close-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.ok-fav-desc { font-size: 11.5px; color: #64748b; line-height: 1.6; margin-bottom: 14px; }
.ok-fav-badges { display: flex; flex-wrap: wrap; gap: 7px; min-height: 48px; margin-bottom: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(99,102,241,.2); }
.ok-fav-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 900; cursor: default; user-select: none; transition: transform .12s; border: 1.5px solid transparent; }
/* 구매 가능 — 노랑 빛남 */
.ok-fav-badge.ok-fav-avail {
background: linear-gradient(135deg,#78350f,#b45309);
border-color: rgba(251,191,36,.55); color: #fde68a;
box-shadow: 0 0 8px rgba(251,191,36,.35),0 2px 6px rgba(0,0,0,.3);
animation: ok-fav-glow 2.2s ease-in-out infinite;
}
@keyframes ok-fav-glow {
0%,100%{box-shadow:0 0 6px rgba(251,191,36,.3),0 2px 6px rgba(0,0,0,.3)}
50%{box-shadow:0 0 14px rgba(251,191,36,.7),0 2px 6px rgba(0,0,0,.3)}
}
/* 소진 — 빨강 취소선 */
.ok-fav-badge.ok-fav-sold { background: linear-gradient(135deg,#450a0a,#7f1d1d); border-color: rgba(248,113,113,.45); color: #fca5a5; text-decoration: line-through; opacity: .85; }
/* 없는 번호 — 회색 */
.ok-fav-badge.ok-fav-none { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #475569; }
.ok-fav-badge-del { background: none; border: none; color: inherit; opacity: .55; cursor: pointer; padding: 0 0 0 2px; font-size: 11px; line-height: 1; transition: opacity .12s; }
.ok-fav-badge-del:hover { opacity: 1; }
.ok-fav-empty { width: 100%; text-align: center; color: #475569; font-size: 12px; font-weight: 600; padding: 8px 0; }
.ok-fav-add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.ok-fav-input { flex: 1; padding: 10px 14px; border-radius: 11px; background: rgba(255,255,255,.05); border: 1.5px solid rgba(99,102,241,.28); color: #e2e8f0; font-size: 15px; font-weight: 800; font-family: inherit; outline: none; transition: border-color .15s,box-shadow .15s; -moz-appearance: textfield; }
.ok-fav-input::-webkit-inner-spin-button,.ok-fav-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ok-fav-input:focus { border-color: #db2777; box-shadow: 0 0 0 3px rgba(219,39,119,.18); }
.ok-fav-add-btn { padding: 10px 16px; border-radius: 11px; border: none; background: linear-gradient(135deg,#9d174d,#db2777); color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; font-family: inherit; box-shadow: 0 4px 12px rgba(219,39,119,.35); transition: transform .15s,box-shadow .15s; white-space: nowrap; }
.ok-fav-add-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(219,39,119,.5); }
.ok-fav-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 10.5px; font-weight: 700; color: #64748b; }
.ok-fav-select-btn { width: 100%; padding: 13px; border-radius: 14px; border: none; background: linear-gradient(135deg,#9d174d,#db2777); color: #fff; font-size: 15px; font-weight: 900; cursor: pointer; font-family: inherit; box-shadow: 0 6px 20px rgba(219,39,119,.4),inset 0 1px 0 rgba(255,255,255,.12); transition: transform .15s,box-shadow .15s,opacity .15s; letter-spacing: -.2px; }
.ok-fav-select-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(219,39,119,.55); }
.ok-fav-select-btn:disabled { opacity: .35; cursor: not-allowed; }
/* ══ 자동선택 패널 ══ */
/* ── 자동선택 패널 ── */
.ok-autoselect-panel {
display: none; /* 기존 인라인 패널 비활성 — 모달로 이동 */
background: linear-gradient(160deg, #0d0b22 0%, #161138 60%, #0f1a2e 100%);
border: 1.5px solid rgba(99,102,241,.35);
border-radius: 20px;
box-shadow: 0 12px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
overflow: hidden;
animation: ok-autoselect-in .22s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ok-autoselect-in {
from { opacity: 0; transform: translateY(-10px) scale(.96); }
to { opacity: 1; transform: none; }
}
.ok-autoselect-inner { padding: 18px 18px 16px; }
/* 헤더 행: 아이콘+타이틀 왼쪽, 남은장수 오른쪽 */
.ok-autoselect-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 4px;
}
.ok-autoselect-title {
font-size: 15px; font-weight: 900; color: #e2e8f0; letter-spacing: -.2px;
}
.ok-autoselect-remaining {
font-size: 12.5px; font-weight: 900;
background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(5,150,105,.18));
color: #6ee7b7;
border: 1.5px solid rgba(16,185,129,.5); border-radius: 20px;
padding: 5px 14px; white-space: nowrap;
box-shadow: 0 2px 10px rgba(16,185,129,.25), inset 0 1px 0 rgba(255,255,255,.08);
letter-spacing: -.1px;
}
.ok-autoselect-desc {
font-size: 11.5px; color: #64748b; margin-bottom: 10px;
}
/* 프리셋 버튼 행 */
.ok-autoselect-presets {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
/* 기본 공통 스타일 */
.ok-autoselect-preset-btn {
flex: 1; min-width: 52px;
padding: 11px 6px 9px; border-radius: 13px;
border: 2px solid transparent;
font-size: 13px; font-weight: 900;
cursor: pointer; font-family: inherit;
transition: transform .13s, box-shadow .15s, filter .13s;
text-align: center; position: relative; overflow: hidden;
line-height: 1.15;
}
.ok-autoselect-preset-btn::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(160deg, rgba(255,255,255,.12) 0%, transparent 55%);
pointer-events: none;
}
.ok-autoselect-preset-btn:hover { transform: translateY(-2px); filter: brightness(1.18); }
.ok-autoselect-preset-btn:active { transform: scale(.95); }
/* 1단계 — 연한 파랑 */
.ok-autoselect-preset-btn[data-tier="1"] {
background: linear-gradient(135deg, #1e3a5f, #2563eb);
border-color: rgba(96,165,250,.5); color: #bfdbfe;
box-shadow: 0 3px 12px rgba(37,99,235,.3);
}
.ok-autoselect-preset-btn[data-tier="1"].selected,
.ok-autoselect-preset-btn[data-tier="1"]:hover {
box-shadow: 0 5px 18px rgba(37,99,235,.55); border-color: #60a5fa;
}
/* 2단계 — 보라 */
.ok-autoselect-preset-btn[data-tier="2"] {
background: linear-gradient(135deg, #3b1fa8, #7c3aed);
border-color: rgba(167,139,250,.5); color: #e9d5ff;
box-shadow: 0 3px 14px rgba(124,58,237,.35);
}
.ok-autoselect-preset-btn[data-tier="2"].selected,
.ok-autoselect-preset-btn[data-tier="2"]:hover {
box-shadow: 0 5px 20px rgba(124,58,237,.6); border-color: #a78bfa;
}
/* 3단계 — 핑크-자주 */
.ok-autoselect-preset-btn[data-tier="3"] {
background: linear-gradient(135deg, #831843, #db2777);
border-color: rgba(251,113,133,.5); color: #fce7f3;
box-shadow: 0 3px 16px rgba(219,39,119,.38);
}
.ok-autoselect-preset-btn[data-tier="3"].selected,
.ok-autoselect-preset-btn[data-tier="3"]:hover {
box-shadow: 0 5px 22px rgba(219,39,119,.65); border-color: #f472b6;
}
/* 4단계 — 주황-레드 */
.ok-autoselect-preset-btn[data-tier="4"] {
background: linear-gradient(135deg, #92400e, #ea580c);
border-color: rgba(251,146,60,.5); color: #ffedd5;
box-shadow: 0 3px 16px rgba(234,88,12,.4);
}
.ok-autoselect-preset-btn[data-tier="4"].selected,
.ok-autoselect-preset-btn[data-tier="4"]:hover {
box-shadow: 0 5px 22px rgba(234,88,12,.65); border-color: #fb923c;
}
/* 5단계 — 황금 불꽃 (MAX) */
.ok-autoselect-preset-btn[data-tier="5"] {
background: linear-gradient(135deg, #78350f, #d97706, #f59e0b);
border-color: rgba(251,191,36,.65); color: #fff;
box-shadow: 0 4px 20px rgba(245,158,11,.5), 0 0 0 0 rgba(245,158,11,.3);
animation: ok-preset-pulse 2.2s ease-in-out infinite;
font-size: 13.5px;
}
.ok-autoselect-preset-btn[data-tier="5"].selected,
.ok-autoselect-preset-btn[data-tier="5"]:hover {
box-shadow: 0 6px 28px rgba(245,158,11,.75), 0 0 12px rgba(245,158,11,.35); border-color: #fbbf24;
}
@keyframes ok-preset-pulse {
0%, 100% { box-shadow: 0 4px 20px rgba(245,158,11,.5), 0 0 0 0 rgba(245,158,11,.0); }
50% { box-shadow: 0 4px 24px rgba(245,158,11,.65), 0 0 16px rgba(245,158,11,.28); }
}
.ok-autoselect-preset-btn.selected {
outline: 2.5px solid #fff8;
outline-offset: -2px;
}
/* 직접입력 + 선택/취소 버튼 한 줄 */
.ok-autoselect-custom {
display: flex; gap: 7px; align-items: stretch;
}
.ok-autoselect-custom-label {
display: flex; flex-direction: column; flex: 1; gap: 0;
}
.ok-autoselect-label-text {
font-size: 10px; font-weight: 700; color: #64748b;
padding: 0 2px 3px; letter-spacing: .3px; text-transform: uppercase;
}
.ok-autoselect-input {
width: 100%; padding: 11px 14px; border-radius: 11px;
background: rgba(255,255,255,.05); border: 1.5px solid rgba(99,102,241,.28);
color: #e2e8f0; font-size: 15px; font-weight: 800; font-family: inherit;
outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
-moz-appearance: textfield;
box-sizing: border-box;
}
.ok-autoselect-input::-webkit-inner-spin-button,
.ok-autoselect-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ok-autoselect-input:focus {
border-color: #6366f1; background: rgba(99,102,241,.09);
box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.ok-autoselect-input::placeholder { color: #475569; font-weight: 600; font-size: 12.5px; }
/* 선택 버튼 (초록) */
.ok-autoselect-go-btn {
padding: 11px 18px; border-radius: 11px; border: none;
background: linear-gradient(135deg, #059669, #10b981);
color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; font-family: inherit;
box-shadow: 0 4px 14px rgba(16,185,129,.35); white-space: nowrap;
transition: transform .1s, box-shadow .1s, background .13s;
letter-spacing: -.2px; align-self: flex-end;
}
.ok-autoselect-go-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(16,185,129,.5);
background: linear-gradient(135deg, #047857, #059669);
}
.ok-autoselect-go-btn:active { transform: scale(.97); }
/* 취소 버튼 (빨강) — 선택 버튼과 동일한 솔리드 스타일로 통일 */
.ok-autoselect-cancel-btn {
padding: 11px 15px; border-radius: 11px; border: none;
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; font-family: inherit;
box-shadow: 0 4px 14px rgba(239,68,68,.35); white-space: nowrap; align-self: flex-end;
transition: transform .1s, box-shadow .1s, background .13s;
letter-spacing: -.2px;
}
.ok-autoselect-cancel-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(239,68,68,.5);
background: linear-gradient(135deg, #b91c1c, #dc2626);
}
.ok-autoselect-cancel-btn:active { transform: scale(.97); }
.ok-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(99,102,241,.3), transparent); margin: 12px 0; }
/* ══ 세션 복구 로딩 오버레이 ══ */
#okSessionResumeOverlay {
position: fixed; inset: 0; z-index: 20500; /* 토스트(20000)보다 위 — 결제 복귀 시 토스트에 가리지 않도록 */
display: flex; align-items: center; justify-content: center;
background: #000; /* 완전 불투명 검정 — 뒤 화면 완전 차단 */
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
}
#okSessionResumeOverlay.visible {
opacity: 1;
pointer-events: auto;
}
.ok-sro-card {
position: relative;
display: flex; flex-direction: column; align-items: center;
gap: 20px;
padding: 40px 36px 36px;
background: linear-gradient(160deg, #0e0b28 0%, #14103a 60%, #0c1628 100%);
border: 1.5px solid rgba(139, 92, 246, .35);
border-radius: 28px;
box-shadow: 0 20px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(139,92,246,.08) inset;
min-width: 240px; max-width: 320px; width: calc(100% - 64px);
text-align: center;
overflow: hidden;
}
.ok-sro-card::before {
content: '';
position: absolute; top: 0; left: 12px; right: 12px; height: 2px;
background: linear-gradient(90deg, transparent 0%, #7c3aed 30%, #a78bfa 50%, #7c3aed 70%, transparent 100%);
border-radius: 99px;
}
/* 무지개 스피너 */
.ok-sro-spinner {
width: 68px; height: 68px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
#f43f5e, #f97316, #eab308, #22c55e,
#06b6d4, #6366f1, #a855f7, #f43f5e
);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #fff calc(100% - 7px));
mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #fff calc(100% - 7px));
animation: ok-sro-spin 1s linear infinite;
flex-shrink: 0;
}
@keyframes ok-sro-spin {
to { transform: rotate(360deg); }
}
.ok-sro-set-name {
font-size: 16px; font-weight: 900; color: #e2e8f0;
letter-spacing: -.3px; line-height: 1.4;
max-width: 220px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ok-sro-label {
font-size: 13px; color: #a78bfa;
font-weight: 700; letter-spacing: .4px;
animation: ok-sro-pulse 1.4s ease-in-out infinite;
}
@keyframes ok-sro-pulse {
0%, 100% { opacity: .45; }
50% { opacity: 1; }
}
/* ══ 결제 완료 팝업 (okPayDonePopup) ══ */
#okPayDonePopup {
position: fixed; inset: 0; z-index: 9900;
display: flex; align-items: flex-end; justify-content: center;
background: rgba(0,0,0,0);
transition: background .3s ease;
pointer-events: none;
}
#okPayDonePopup.visible {
background: rgba(0,0,0,.68);
pointer-events: auto;
}
#okPayDonePopup .ok-pdp-sheet {
width: 100%; max-width: 520px;
background: linear-gradient(160deg, #0e0b28 0%, #14103a 55%, #0c1628 100%);
border: 1.5px solid rgba(139,92,246,.35);
border-bottom: none;
border-radius: 28px 28px 0 0;
box-shadow: 0 -12px 60px rgba(0,0,0,.65), 0 -2px 0 rgba(139,92,246,.2) inset;
transform: translateY(calc(100% + 60px));
transition: transform .38s cubic-bezier(.32,1.25,.55,1);
will-change: transform;
overflow: hidden;
}
#okPayDonePopup.visible .ok-pdp-sheet {
transform: translateY(0);
}
/* 상단 그라데이션 라인 */
.ok-pdp-sheet::before {
content: '';
display: block; height: 2px;
background: linear-gradient(90deg, transparent 5%, #059669 30%, #34d399 50%, #059669 70%, transparent 95%);
opacity: .8;
}
/* 드래그 핸들 */
.ok-pdp-handle {
width: 38px; height: 4px; border-radius: 99px;
background: rgba(255,255,255,.18);
margin: 14px auto 0; display: block;
}
.ok-pdp-body {
padding: 8px 24px 0;
text-align: center;
}
/* 체크 아이콘 */
.ok-pdp-icon-wrap {
width: 72px; height: 72px; border-radius: 50%;
background: linear-gradient(135deg, rgba(5,150,105,.25), rgba(52,211,153,.15));
border: 1.5px solid rgba(52,211,153,.4);
display: flex; align-items: center; justify-content: center;
margin: 16px auto 14px;
box-shadow: 0 0 28px rgba(5,150,105,.35);
font-size: 36px; line-height: 1;
animation: ok-pdp-icon-pulse 2.4s ease-in-out infinite;
}
@keyframes ok-pdp-icon-pulse {
0%,100% { box-shadow: 0 0 28px rgba(5,150,105,.35), 0 0 0 0 rgba(5,150,105,0); }
50% { box-shadow: 0 0 40px rgba(5,150,105,.55), 0 0 20px rgba(5,150,105,.2); }
}
/* 금액 크게 표시 */
.ok-pdp-amount {
font-size: 36px; font-weight: 900; color: #34d399;
letter-spacing: -1px; margin-bottom: 6px; line-height: 1.1;
}
.ok-pdp-amount-label {
font-size: 12px; color: #64748b; font-weight: 600;
margin-bottom: 16px; letter-spacing: .3px;
}
/* 구분선 */
.ok-pdp-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
margin: 0 0 16px;
}
.ok-pdp-title {
font-size: 18px; font-weight: 900; color: #e2e8f0;
letter-spacing: -.4px; margin-bottom: 8px;
}
.ok-pdp-desc {
font-size: 13.5px; color: #94a3b8; line-height: 1.65;
margin-bottom: 20px;
}
/* 버튼 영역 */
.ok-pdp-btns {
display: flex; flex-direction: column; gap: 10px;
margin-top: 4px; padding-bottom: 0;
}
.ok-pdp-continue-btn {
width: 100%; padding: 16px;
border-radius: 16px; border: none;
background: linear-gradient(135deg, #065f46, #059669, #10b981);
color: #fff; font-size: 16px; font-weight: 900;
cursor: pointer; font-family: inherit;
box-shadow: 0 6px 24px rgba(5,150,105,.45), inset 0 1px 0 rgba(255,255,255,.15);
letter-spacing: -.3px;
transition: transform .13s, box-shadow .15s, filter .13s;
position: relative; overflow: hidden;
}
.ok-pdp-continue-btn::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(160deg, rgba(255,255,255,.12) 0%, transparent 55%);
pointer-events: none;
}
.ok-pdp-continue-btn:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 8px 32px rgba(5,150,105,.6); }
.ok-pdp-continue-btn:active { transform: scale(.97); }
.ok-pdp-close-btn {
width: 100%; padding: 13px;
border-radius: 14px;
border: 1.5px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.05);
color: #64748b; font-size: 14px; font-weight: 700;
cursor: pointer; font-family: inherit;
letter-spacing: -.2px;
transition: background .13s, color .13s, transform .1s;
margin-bottom: calc(var(--app-nav-inset, 0px) + 8px);
}
.ok-pdp-close-btn:hover { background: rgba(255,255,255,.09); color: #94a3b8; transform: translateY(-1px); }
.ok-pdp-close-btn:active { transform: scale(.97); }
@media (max-width: 520px) {
.ok-pdp-body { padding: 8px 18px 0; }
.ok-pdp-title { font-size: 16px; }
.ok-pdp-amount { font-size: 30px; }
}
/* ══ 최근선택 복원 안내 팝업 ══ */
#okRecentSelHintModal {
position: fixed; inset: 0; z-index: 9800;
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 0; /* navBarView가 홈바 처리 */
background: rgba(0,0,0,0);
transition: background .3s ease;
pointer-events: none;
}
#okRecentSelHintModal.visible {
background: rgba(0,0,0,.62);
pointer-events: auto;
}
#okRecentSelHintModal .ok-rsh-sheet {
width: 100%; max-width: 520px;
background: linear-gradient(160deg, #0e0b28 0%, #14103a 55%, #0c1628 100%);
border: 1.5px solid rgba(139,92,246,.35);
border-bottom: none;
border-radius: 28px 28px 0 0;
box-shadow: 0 -12px 60px rgba(0,0,0,.65), 0 -2px 0 rgba(139,92,246,.2) inset;
padding: 0;
transform: translateY(calc(100% + 60px));
transition: transform .38s cubic-bezier(.32,1.25,.55,1);
will-change: transform;
overflow: hidden;
}
#okRecentSelHintModal.visible .ok-rsh-sheet {
transform: translateY(0);
}
/* 상단 드래그 핸들 */
.ok-rsh-handle {
width: 38px; height: 4px; border-radius: 99px;
background: rgba(255,255,255,.18);
margin: 14px auto 0; display: block;
}
/* 반짝이는 상단 그라데이션 라인 */
.ok-rsh-sheet::before {
content: '';
display: block; height: 2px;
background: linear-gradient(90deg, transparent 5%, #7c3aed 30%, #a78bfa 50%, #7c3aed 70%, transparent 95%);
opacity: .7;
}
.ok-rsh-body {
padding: 8px 24px 0;
text-align: center;
}
/* 아이콘 영역 */
.ok-rsh-icon-wrap {
width: 72px; height: 72px; border-radius: 50%;
background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(167,139,250,.15));
border: 1.5px solid rgba(167,139,250,.35);
display: flex; align-items: center; justify-content: center;
margin: 16px auto 14px;
box-shadow: 0 0 28px rgba(124,58,237,.3);
font-size: 36px; line-height: 1;
animation: ok-rsh-icon-pulse 2.4s ease-in-out infinite;
}
@keyframes ok-rsh-icon-pulse {
0%,100% { box-shadow: 0 0 28px rgba(124,58,237,.3), 0 0 0 0 rgba(124,58,237,0); }
50% { box-shadow: 0 0 36px rgba(124,58,237,.5), 0 0 18px rgba(124,58,237,.18); }
}
.ok-rsh-title {
font-size: 19px; font-weight: 900; color: #e2e8f0;
letter-spacing: -.4px; margin-bottom: 8px; line-height: 1.3;
}
.ok-rsh-desc {
font-size: 13.5px; color: #94a3b8; line-height: 1.65;
margin-bottom: 6px;
}
/* 저장된 장수 하이라이트 뱃지 */
.ok-rsh-count-badge {
display: inline-flex; align-items: center; gap: 5px;
background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(139,92,246,.2));
border: 1.5px solid rgba(139,92,246,.45);
border-radius: 99px; padding: 5px 16px;
font-size: 14px; font-weight: 900; color: #c4b5fd;
margin: 10px 0 20px;
box-shadow: 0 2px 12px rgba(124,58,237,.25);
letter-spacing: -.1px;
}
.ok-rsh-count-badge b {
font-size: 18px; color: #a78bfa;
}
/* 버튼 영역 */
.ok-rsh-btns {
display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding-bottom: 0;
}
/* 최근선택하기 버튼 — 메인 CTA */
.ok-rsh-restore-btn {
width: 100%; padding: 16px;
border-radius: 16px; border: none;
background: linear-gradient(135deg, #5b21b6, #7c3aed, #8b5cf6);
color: #fff; font-size: 16px; font-weight: 900;
cursor: pointer; font-family: inherit;
box-shadow: 0 6px 24px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.15);
letter-spacing: -.3px;
transition: transform .13s, box-shadow .15s, filter .13s;
position: relative; overflow: hidden;
}
.ok-rsh-restore-btn::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(160deg, rgba(255,255,255,.12) 0%, transparent 55%);
pointer-events: none;
}
.ok-rsh-restore-btn:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 8px 32px rgba(124,58,237,.65); }
.ok-rsh-restore-btn:active { transform: scale(.97); }
/* 닫기 버튼 — 서브 */
.ok-rsh-close-btn {
width: 100%; padding: 13px;
border-radius: 14px;
border: 1.5px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.05);
color: #64748b; font-size: 14px; font-weight: 700;
cursor: pointer; font-family: inherit;
letter-spacing: -.2px;
transition: background .13s, color .13s, transform .1s;
/* 홈바 영역 + 8px 여백을 하단 패딩으로 확보 */
margin-bottom: calc(var(--app-nav-inset, 0px) + 8px);
}
.ok-rsh-close-btn:hover { background: rgba(255,255,255,.09); color: #94a3b8; transform: translateY(-1px); }
.ok-rsh-close-btn:active { transform: scale(.97); }
/* 모바일 safe area 패딩 */
@media (max-width: 520px) {
.ok-rsh-body { padding: 8px 18px 0; }
.ok-rsh-title { font-size: 17px; }
}
/* ── 다중 선택 결제 바 ── */
.ok-select-bar {
position: sticky; top: 0; z-index: 50;
background: linear-gradient(135deg, #1a1d30 0%, #161828 100%);
border: 1.5px solid rgba(99,102,241,.45);
border-radius: 18px; padding: 14px 20px;
margin-bottom: 16px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: nowrap;
box-shadow: 0 4px 24px rgba(99,102,241,.3), 0 1px 0 rgba(255,255,255,.05) inset;
animation: okSelectBarIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes okSelectBarIn {
from { opacity:0; transform:translateY(-10px) scale(.97); }
to { opacity:1; transform:translateY(0) scale(1); }
}
.ok-select-info {
display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1;
}
.ok-select-icon {
font-size: 22px; flex-shrink: 0;
filter: drop-shadow(0 2px 6px rgba(251,191,36,.5));
}
.ok-select-count-wrap {
display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.ok-select-count-label {
font-size: 15px; font-weight: 900; color: #f1f5f9;
white-space: nowrap; line-height: 1.2;
letter-spacing: -.02em;
}
.ok-select-count-label b {
color: #a78bfa; font-size: 17px;
}
.ok-select-price {
font-size: 12px; color: #64748b; white-space: nowrap; font-weight: 700;
line-height: 1.2;
}
.ok-select-price b { color: #fbbf24; font-size: 13px; font-weight: 900; }
.ok-select-actions {
display: flex; gap: 8px; flex-shrink: 0; align-items: center;
}
.ok-select-clear-btn {
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
color: #94a3b8; font-size: 13px; font-weight: 800; padding: 9px 14px;
border-radius: 11px; cursor: pointer; transition: all .15s;
white-space: nowrap; line-height: 1;
font-family: inherit;
}
.ok-select-clear-btn:hover { background: rgba(255,255,255,.15); color: #f1f5f9; border-color: rgba(255,255,255,.25); }
.ok-select-pay-btn {
background: linear-gradient(135deg, #10b981, #059669);
color: #fff; border: none; font-size: 14px; font-weight: 900;
padding: 11px 20px; border-radius: 13px; cursor: pointer;
box-shadow: 0 4px 16px rgba(16,185,129,.4);
transition: filter .15s, transform .1s, box-shadow .15s;
white-space: nowrap; line-height: 1;
font-family: inherit; letter-spacing: -.01em;
}
.ok-select-pay-btn:hover { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(16,185,129,.5); }
.ok-select-pay-btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(16,185,129,.3); }
/* 모바일: 선택바 완전 재설계 */
@media(max-width:480px){
.ok-select-bar {
padding: 12px 14px;
gap: 10px;
border-radius: 16px;
flex-direction: row;
align-items: center;
}
.ok-select-icon { font-size: 20px; }
.ok-select-count-label { font-size: 14px; }
.ok-select-count-label b { font-size: 16px; }
.ok-select-price { font-size: 11px; }
.ok-select-price b { font-size: 12px; }
.ok-select-clear-btn { font-size: 12px; padding: 8px 11px; border-radius: 10px; }
.ok-select-pay-btn { font-size: 13px; padding: 10px 16px; border-radius: 11px; }
}
@media(max-width:360px){
.ok-select-bar { padding: 10px 12px; gap: 8px; }
.ok-select-clear-btn { font-size: 11px; padding: 8px 9px; }
.ok-select-pay-btn { font-size: 12px; padding: 9px 13px; }
}
/* ── 종이 선택 상태 ── */
.ok-paper.selected {
transform: scale(1.08) translateY(-6px) rotate(0deg) !important;
/* ★ 테두리: 노란 골드 → 어두운 배경 카드에서 가장 잘 튐 */
outline: 3px solid #fbbf24 !important;
outline-offset: 2px;
box-shadow:
0 0 0 4px rgba(251,191,36,.45), /* 골드 링 */
0 0 20px 6px rgba(251,191,36,.28), /* 골드 glow */
0 0 40px 8px rgba(245,158,11,.15), /* 바깥 은은한 amber */
0 14px 32px rgba(0,0,0,.5), /* 카드 그림자 */
inset 0 1px 0 rgba(255,255,255,.3) !important;
z-index: 6;
animation: okPaperSelectPop .22s cubic-bezier(.34,1.56,.64,1) forwards;
}
/* ★ [PERF] 전체선택 / 모바일: pop 애니메이션·shine·will-change 전부 차단 */
.ok-paper.selected.no-anim {
animation: none !important;
will-change: auto !important;
}
.ok-paper.selected.no-anim::before { display: none !important; }
.ok-paper.selected.no-anim::after { animation: none !important; }
/* ★ [STAMP] 선택 도장 — 카드 중앙 "선택" 스탬프 */
.ok-paper.selected::after {
content: '선택';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-25deg) scale(1);
/* ── 도장 텍스트 — 1.15em → 1.85em으로 확대 ── */
font-size: 1.85em;
font-weight: 900;
font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
letter-spacing: .28em;
white-space: nowrap;
/* ── 색상: 골드/앰버 계열 — 보라 카드 배경에서 극명하게 튐 ── */
color: #fde68a;
text-shadow:
0 0 8px rgba(245,158,11,1),
0 0 20px rgba(251,191,36,.85),
0 2px 0 rgba(0,0,0,.7);
/* ── 도장 박스 — padding/border 비례 확대 ── */
padding: 7px 18px 6px;
background: rgba(120,53,15,.40); /* 앰버 다크 반투명 */
border: 3.5px solid #fbbf24;
border-radius: 7px;
/* 이중 테두리: box-shadow로 안쪽 선 추가 */
box-shadow:
inset 0 0 0 2px rgba(253,230,138,.5), /* 안쪽 연한 선 */
0 0 18px rgba(251,191,36,.65), /* 골드 glow */
0 3px 12px rgba(0,0,0,.5);
z-index: 10;
pointer-events: none;
animation: okStampIn .28s cubic-bezier(.22,.8,.44,1.4) forwards;
}
/* ★ [SHINE] 선택 카드 테두리 흐르는 골드 shine — PC(hover:hover)에서만 활성화 */
/* ★ [PERF-PC] will-change:transform — GPU가 미리 레이어를 올려 background-position
합성을 compositor thread에서 처리 → 다수 카드 선택 시 메인 스레드 부담 감소 */
.ok-paper.selected::before {
content: '';
position: absolute; inset: -3px;
border-radius: 12px;
will-change: transform;
background: linear-gradient(110deg,
rgba(251,191,36,.0) 0%,
rgba(251,191,36,.5) 35%,
rgba(253,230,138,.8) 50%,
rgba(251,191,36,.5) 65%,
rgba(251,191,36,.0) 100%);
background-size: 200% 100%;
animation: okSelectShine 1.6s linear infinite;
pointer-events: none;
z-index: 0;
}
/* ★ [PERF-MOBILE] 모바일 선택 상태 — 모든 애니메이션·이펙트 완전 제거
★★ 반드시 ::after / ::before 선언 뒤에 위치해야 !important가 올바르게 적용됨 ★★
— ::after, ::before가 앞에 선언되고, 이 @media 블록이 뒤에서 덮어씌움
제거 항목:
· animation (okPaperSelectPop, okStampIn 도장, okSelectShine shine) → none
· transform scale/translateY → none
· box-shadow (glow/blur 5레이어) → none
· ::before shine 레이어 → display:none
· ::after 도장 스탬프 → display:none (text-shadow blur 제거)
· outline만 유지 — GPU 비용 없음 */
@media (max-width: 768px) {
.ok-paper.selected {
animation: none !important;
transform: none !important;
box-shadow: none !important;
will-change: auto !important;
outline: 3px solid #22c55e !important;
outline-offset: 2px !important;
z-index: 6;
}
/* ★ [MOBILE-CHECK] shine 레이어 제거 */
.ok-paper.selected::before { display: none !important; }
/* ★ [MOBILE-CHECK] PC "선택" 도장 대신 ✔ 체크마크로 교체
— blur/glow/animation 없음, 즉시 표시, GPU 비용 0 */
.ok-paper.selected::after {
content: '✔' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) rotate(0deg) !important;
animation: none !important;
font-size: 1.9em !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
color: #22c55e !important;
text-shadow: none !important;
padding: 0 !important;
background: rgba(0,0,0,0.38) !important;
border: none !important;
border-radius: 50% !important;
box-shadow: none !important;
width: 2.2em !important;
height: 2.2em !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 1 !important;
z-index: 10 !important;
pointer-events: none !important;
}
}
/* ── keyframes ── */
@keyframes okStampIn {
0% {
transform: translate(-50%, -50%) rotate(-30deg) scale(1.7);
opacity: 0;
filter: blur(3px);
}
50% {
transform: translate(-50%, -50%) rotate(-22deg) scale(0.85);
opacity: 1;
filter: blur(0);
}
72% {
transform: translate(-50%, -50%) rotate(-27deg) scale(1.08);
}
100% {
transform: translate(-50%, -50%) rotate(-25deg) scale(1);
opacity: 1;
filter: blur(0);
}
}
@keyframes okPaperSelectPop {
0% { transform: scale(1.0) translateY(0px) rotate(0deg); }
60% { transform: scale(1.11) translateY(-8px) rotate(0deg); }
100% { transform: scale(1.08) translateY(-6px) rotate(0deg); }
}
@keyframes okSelectShine {
0% { background-position: 200% 0; opacity: .6; }
50% { background-position: -200% 0; opacity: .9; }
100% { background-position: -200% 0; opacity: .6; }
}
/* ── 다중 뜯기 모달 종이 카드 ── */
/* #988 이전 방식: div + 앞면div(ok-mc-front) + 뒷면div(ok-mc-back) + 스킨 CSS background */
/* ★ [ARCH] okMultiGridWrap: flex:1 → 모달 남은 공간 전부 차지
okMultiGrid: overflow-y:auto → 그리드 내부에서 스크롤 */
#okMultiGridWrap {
position: relative;
flex: 1; min-height: 0;
width: 100%; max-width: 960px;
display: flex; flex-direction: column;
}
#okMultiGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 18px 14px;
align-content: start;
padding: 16px 16px 28px;
overflow-y: auto; flex: 1; min-height: 0;
-webkit-overflow-scrolling: touch;
/* 금색 스크롤바 */
scrollbar-width: thin;
scrollbar-color: #c9a84c transparent;
}
#okMultiGrid::-webkit-scrollbar { width: 5px; }
#okMultiGrid::-webkit-scrollbar-track { background: transparent; }
#okMultiGrid::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #c9a84c, #f0c94a);
border-radius: 4px;
}
#okMultiGrid::-webkit-scrollbar-thumb:hover { background: #f0c94a; }
@media(max-width:600px){
#okMultiGrid {
grid-template-columns: repeat(4, 1fr);
gap: 10px 8px;
}
}
@media(max-width:400px){
#okMultiGrid {
grid-template-columns: repeat(3, 1fr);
gap: 8px 6px;
}
}
/* ════ 다중 뜯기 카드 ════ */
/* ── 진입 stagger 애니메이션 (이것만 유지) ── */
@keyframes okMcEnter {
0% { opacity:0; transform: translateY(22px) scale(.88); }
60% { opacity:1; transform: translateY(-4px) scale(1.03); }
80% { transform: translateY(2px) scale(.99); }
100% { opacity:1; transform: translateY(0) scale(1); }
}
/* ── 카드 본체 ── */
.ok-multi-card {
width: 100%; height: 88px; border-radius: 14px;
position: relative; cursor: pointer; overflow: visible;
animation: okMcEnter .45s cubic-bezier(.34,1.56,.64,1) both;
animation-delay: calc(var(--mc-i, 0) * 0.04s);
transition: transform .18s ease, box-shadow .18s ease;
box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* hover */
.ok-multi-card:hover:not(.torn) {
transform: translateY(-5px) scale(1.05);
box-shadow:
0 12px 28px rgba(139,92,246,.45),
0 0 0 2px rgba(251,191,36,.5),
0 4px 10px rgba(0,0,0,.4);
}
/* active */
.ok-multi-card:active:not(.torn) {
transform: scale(0.95) translateY(1px);
box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
/* 뜯기 완료 — 애니메이션 없이 즉시 상태 전환 */
.ok-multi-card.torn {
cursor: default;
animation: none !important;
opacity: 0.85;
box-shadow: 0 3px 12px rgba(99,102,241,.3);
}
/* 뒷면 기본 배경 (스킨 없을 때) */
.ok-multi-card::before {
content: '';
position: absolute; inset: 0;
border-radius: 14px;
background: linear-gradient(135deg, #c45e08 0%, #a34c05 100%);
z-index: 0;
pointer-events: none;
}
.ok-multi-card.torn::before { display: none; }
.ok-multi-card.has-skin-back::before { display: none; }
/* skinBack DOM 레이어 */
.ok-mc-back-layer {
position: absolute; inset: 0;
border-radius: 14px; overflow: hidden;
z-index: 0; pointer-events: none;
}
.ok-mc-back-layer img {
width: 100%; height: 100%; object-fit: cover;
border-radius: 14px; display: block;
}
.ok-multi-card.torn .ok-mc-back-layer { display: none; }
/* 앞면 레이어 */
.ok-multi-card .ok-mc-front {
position: absolute; inset: 0;
border-radius: 14px; overflow: hidden;
background: linear-gradient(145deg, #fb923c 0%, #f97316 40%, #ea7012 70%, #dc6a05 100%);
border: 1.5px solid rgba(255,200,80,.3);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.25),
inset 0 -1px 0 rgba(0,0,0,.25);
transition: opacity .25s ease;
display: flex; align-items: center; justify-content: center;
z-index: 1;
}
.ok-multi-card.torn .ok-mc-front { opacity: 0; pointer-events: none; }
/* 뒷면 */
.ok-multi-card .ok-mc-back {
position: absolute; inset: 0;
border-radius: 14px; overflow: hidden;
background: linear-gradient(155deg, #1e1060 0%, #130d3a 35%, #0a1130 70%, #050714 100%);
border: 1.5px solid rgba(99,102,241,.45);
box-shadow: 0 4px 16px rgba(99,102,241,.3), inset 0 1px 0 rgba(139,92,246,.25);
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 900; color: #fff;
text-shadow: 0 0 20px rgba(167,139,250,.95), 0 2px 6px rgba(0,0,0,.6);
opacity: 0; transition: opacity .25s ease;
z-index: 2;
}
.ok-multi-card.torn .ok-mc-back { opacity: 1; }
/* 앞면 아이콘 */
.ok-multi-card .ok-mc-front-icon {
font-size: 30px; opacity: .8;
filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
transition: transform .18s ease;
}
.ok-multi-card:hover:not(.torn) .ok-mc-front-icon {
transform: scale(1.15) rotate(-6deg);
}
@media(max-width:600px){
.ok-multi-card { height: 80px; border-radius: 12px; }
.ok-multi-card::before,
.ok-mc-back-layer,
.ok-mc-back-layer img,
.ok-multi-card .ok-mc-front,
.ok-multi-card .ok-mc-back { border-radius: 12px; }
}
@media(max-width:400px){
.ok-multi-card { height: 70px; border-radius: 10px; }
.ok-multi-card::before,
.ok-mc-back-layer,
.ok-mc-back-layer img,
.ok-multi-card .ok-mc-front,
.ok-multi-card .ok-mc-back { border-radius: 10px; }
.ok-multi-card .ok-mc-back { font-size: 20px; }
}
/* ══ 구매완료 결과 카드 — 고급 정적 디자인 ══ */
/* 기존 호환용 */
.ok-result-item-card {
display: flex; align-items: center; gap: 14px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
border-radius: 14px; padding: 12px 16px;
transition: border-color .2s, background .2s;
}
.ok-result-item-card:hover { border-color: rgba(99,102,241,.3); background: rgba(255,255,255,.06); }
.ok-result-item-num {
width: 32px; height: 32px; border-radius: 50%;
background: rgba(99,102,241,.2); border: 1px solid rgba(99,102,241,.4);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 900; color: #a78bfa; flex-shrink: 0;
}
.ok-result-item-info { flex: 1; }
.ok-result-item-name { font-size: 14px; font-weight: 800; color: #f1f5f9; }
.ok-result-item-rank { font-size: 11px; color: #64748b; margin-top: 2px; }
.ok-result-item-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
/* ── 그룹 카드 — 세로형 상품 박스 ── */
.ok-result-group-card {
border-radius: 14px;
padding: 0;
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
overflow: hidden;
cursor: default;
transition: box-shadow .2s ease, transform .15s ease;
}
.ok-result-group-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(0,0,0,.5) !important;
}
/* scanline overlay */
.ok-result-group-card::after {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(0,0,0,.04) 3px,
rgba(0,0,0,.04) 4px
);
pointer-events: none;
z-index: 5;
border-radius: inherit;
}
/* 이미지 패널 — 상단 전체 너비, 정사각형 */
.ok-result-group-img-wrap {
width: 100%; aspect-ratio: 1 / 1;
position: relative; overflow: hidden;
border-radius: 14px 14px 0 0;
cursor: zoom-in; flex-shrink: 0;
}
.ok-result-group-img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.ok-result-group-img-wrap:hover .ok-result-group-img { transform: scale(1.07); }
/* 줌 오버레이 */
.ok-result-group-img-zoom {
position: absolute; inset: 0;
background: rgba(0,0,0,.42);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .18s;
font-size: 26px; z-index: 6;
}
.ok-result-group-img-wrap:hover .ok-result-group-img-zoom { opacity: 1; }
/* 이미지 없을 때 플레이스홀더 */
.ok-result-group-imgbox {
width: 100%; height: 110px;
border-radius: 14px 14px 0 0;
display: flex; align-items: center; justify-content: center;
font-size: 44px; flex-shrink: 0; position: relative;
}
/* 등급 배지 — 이미지 위 왼쪽 상단 */
.ok-result-group-rank-badge {
position: absolute; top: 8px; left: 8px; z-index: 7;
padding: 3px 10px;
border-radius: 6px;
font-size: 11px; font-weight: 900; letter-spacing: .05em;
backdrop-filter: blur(8px);
text-transform: uppercase;
font-family: 'Courier New', monospace;
}
/* 당첨 수 배지 — 이미지 위 오른쪽 상단 */
.ok-result-group-cnt-badge {
position: absolute; top: 8px; right: 8px; z-index: 7;
padding: 3px 9px;
border-radius: 6px;
font-size: 10px; font-weight: 900;
background: rgba(0,0,0,.7);
backdrop-filter: blur(8px);
color: #fbbf24;
border: 1px solid rgba(251,191,36,.35);
letter-spacing: .03em;
}
/* 하단 콘텐츠 패널 */
.ok-result-group-content {
padding: 10px 12px 12px;
display: flex; flex-direction: column; gap: 5px;
position: relative; z-index: 2;
background: rgba(0,0,0,.25);
}
/* 상단 구분선 */
.ok-result-group-content::before {
content: '';
display: block;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
margin-bottom: 3px;
}
.ok-result-group-name {
font-size: 12px; font-weight: 800; color: #f1f5f9;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
letter-spacing: -.01em; line-height: 1.3;
}
.ok-result-group-nums-label {
font-size: 9px; font-weight: 700; color: rgba(255,255,255,.3);
text-transform: uppercase; letter-spacing: .1em;
}
.ok-result-group-nums-wrap {
display: flex; flex-wrap: wrap; gap: 4px;
}
.ok-result-num-pill {
padding: 2px 6px;
border-radius: 4px;
font-size: 10px; font-weight: 800;
background: rgba(0,0,0,.45);
border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.9);
line-height: 1.5;
font-variant-numeric: tabular-nums;
font-family: 'Courier New', monospace;
letter-spacing: .02em;
}
/* ── 결과 그리드 레이아웃 — 2열 (PC/모바일 동일) ── */
.ok-multi-result-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* 280px 미만 초소형 기기에서만 1열 */
@media (max-width: 280px) {
.ok-multi-result-grid { grid-template-columns: 1fr; }
}
/* ── 구매완료 결과 리스트 전용 스크롤 영역 ── */
.ok-multi-result-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 650px;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: #c9a84c transparent;
}
.ok-multi-result-list::-webkit-scrollbar { width: 5px; }
.ok-multi-result-list::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 4px; }
.ok-multi-result-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#c9a84c,#f0c94a); border-radius: 4px; }
.ok-multi-result-list::-webkit-scrollbar-thumb:hover { background: #f0c94a; }
/* ══ 온라인쿠지 전역 금색 스크롤바 ══ */
/* okMultiResultModal 전체 (구매완료 배송지 페이지) */
#okMultiResultModal {
scrollbar-width: thin;
scrollbar-color: #c9a84c transparent;
}
#okMultiResultModal::-webkit-scrollbar { width: 5px; }
#okMultiResultModal::-webkit-scrollbar-track { background: transparent; }
#okMultiResultModal::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#c9a84c,#f0c94a); border-radius: 4px; }
#okMultiResultModal::-webkit-scrollbar-thumb:hover { background: #f0c94a; }
/* 대기열 멤버 리스트 — 금색으로 교체 */
.ok-queue-members {
scrollbar-color: #c9a84c transparent;
}
.ok-queue-members::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#c9a84c,#f0c94a) !important; }
.ok-queue-members::-webkit-scrollbar-thumb:hover { background: #f0c94a !important; }
/* 쿠지 세트 목록(ok-queue-wrapper) 스크롤 */
.ok-queue-wrapper {
scrollbar-width: thin;
scrollbar-color: #c9a84c transparent;
}
.ok-queue-wrapper::-webkit-scrollbar { width: 5px; }
.ok-queue-wrapper::-webkit-scrollbar-track { background: transparent; }
.ok-queue-wrapper::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#c9a84c,#f0c94a); border-radius: 4px; }
.ok-queue-wrapper::-webkit-scrollbar-thumb:hover { background: #f0c94a; }
/* ══ 상품 목록 - 아케이드 스타일 (개선) ══ */
.ok-prize-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 12px;
}
/* ── 쿠지 선택 카드 — 대기열(ok-queue-prize-mini) 완전 동일 구조 ── */
.ok-prize-item {
aspect-ratio: 3/4;
border: 1.5px solid rgba(255,255,255,.22);
border-radius: 14px;
cursor: pointer;
position: relative; overflow: hidden;
background: #0d1120;
box-shadow: 0 4px 16px rgba(0,0,0,.55);
/* transition/transform 없음 — PC(ok-has-mouse)에서만 아래 규칙으로 복원 */
isolation: isolate;
display: block; padding: 0;
}
/* PC 전용: transition + hover/active 효과 */
html.ok-has-mouse .ok-prize-item {
transition: transform .18s cubic-bezier(.22,.68,0,1.2),
border-color .18s, box-shadow .18s;
}
html.ok-has-mouse .ok-prize-item:hover {
transform: translateY(-4px) scale(1.03);
border-color: rgba(255,255,255,.55);
box-shadow: 0 10px 28px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.12);
}
html.ok-has-mouse .ok-prize-item:active { transform: scale(.97); }
/* 이미지: 카드 전체 꽉 채움 */
.ok-prize-img-wrap {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
overflow: hidden;
z-index: 0;
/* transition 없음 — PC(ok-has-mouse)에서만 아래 규칙으로 복원 */
}
html.ok-has-mouse .ok-prize-img-wrap {
transition: transform .35s cubic-bezier(.22,.68,0,1.2);
}
html.ok-has-mouse .ok-prize-item:hover .ok-prize-img-wrap { transform: scale(1.08); }
/* 모바일/터치: transform·transition 완전 차단 */
html:not(.ok-has-mouse) .ok-prize-item,
html:not(.ok-has-mouse) .ok-prize-item:hover,
html:not(.ok-has-mouse) .ok-prize-item:active,
html:not(.ok-has-mouse) .ok-prize-item:focus {
transform: none !important;
transition: none !important;
}
html:not(.ok-has-mouse) .ok-prize-img-wrap,
html:not(.ok-has-mouse) .ok-prize-item:hover .ok-prize-img-wrap,
html:not(.ok-has-mouse) .ok-prize-item:active .ok-prize-img-wrap {
transform: none !important;
transition: none !important;
}
.ok-prize-img-wrap.ok-prize-img-placeholder {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg,#1a2035,#0d1120);
font-size: 32px; transform: none !important;
}
/* ::before, ::after 없음 — 대기열과 동일하게 info 영역이 그라데이션 담당 */
.ok-prize-item::before { content: none; }
.ok-prize-item::after { content: none; }
/* 모달 내부 이미지 영역은 pointer 유지 */
#pdImgWrap { cursor: pointer; }
/* 등급 배지 — 대기열(ok-queue-prize-mini-rank)과 완전 동일 */
.ok-prize-rank-badge {
position: absolute; top: 6px; left: 6px; z-index: 3;
font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
padding: 3px 7px; border-radius: 6px;
backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* 16색 무지개 로테이션 — 안겹치는 밝은 색상 */
.ok-prize-rank-badge.rank-a { background:linear-gradient(135deg,#ff3b3b,#cc0000); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,59,59,.6); } /* 빨강 */
.ok-prize-rank-badge.rank-b { background:linear-gradient(135deg,#ff6d00,#e65100); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,109,0,.6); } /* 주황 */
.ok-prize-rank-badge.rank-c { background:linear-gradient(135deg,#ffcc00,#e6a800); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,204,0,.6); } /* 노랑 */
.ok-prize-rank-badge.rank-d { background:linear-gradient(135deg,#aeea00,#6d9200); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(174,234,0,.6); } /* 연두 */
.ok-prize-rank-badge.rank-e { background:linear-gradient(135deg,#00c853,#007a33); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,200,83,.6); } /* 초록 */
.ok-prize-rank-badge.rank-f { background:linear-gradient(135deg,#00bfa5,#007a6e); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,191,165,.6); } /* 민트 */
.ok-prize-rank-badge.rank-g { background:linear-gradient(135deg,#00b0ff,#0076b6); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,176,255,.6); } /* 하늘 */
.ok-prize-rank-badge.rank-h { background:linear-gradient(135deg,#2979ff,#0d47a1); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(41,121,255,.6); } /* 파랑 */
.ok-prize-rank-badge.rank-i { background:linear-gradient(135deg,#304ffe,#0026ca); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(48,79,254,.6); } /* 남색 */
.ok-prize-rank-badge.rank-j { background:linear-gradient(135deg,#aa00ff,#6200ea); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(170,0,255,.6); } /* 보라 */
.ok-prize-rank-badge.rank-k { background:linear-gradient(135deg,#d500f9,#9400b8); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(213,0,249,.6); } /* 자주 */
.ok-prize-rank-badge.rank-l { background:linear-gradient(135deg,#f50057,#b0003a); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(245,0,87,.6); } /* 핫핑크 */
.ok-prize-rank-badge.rank-m { background:linear-gradient(135deg,#e91e63,#a8003a); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(233,30,99,.6); } /* 자홍 */
.ok-prize-rank-badge.rank-n { background:linear-gradient(135deg,#ff6e40,#c43e00); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,110,64,.6); } /* 살구 */
.ok-prize-rank-badge.rank-o { background:linear-gradient(135deg,#ffd740,#c9a000); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,215,64,.6); } /* 황금 */
.ok-prize-rank-badge.rank-p { background:linear-gradient(135deg,#00e5ff,#009db5); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,229,255,.6); } /* 청록 */
/* 폴백 */
.ok-prize-rank-badge.rank-default { background: rgba(30,30,50,.85); color:#a5b4fc; border:1px solid rgba(99,102,241,.35); }
/* 소진 배지 */
.ok-prize-item.depleted .ok-prize-rank-badge {
background: rgba(30,30,40,.85) !important;
color: #64748b !important;
border-color: rgba(255,255,255,.1) !important;
box-shadow: none !important;
}
/* 하단 정보 영역 — 대기열(ok-queue-prize-mini-info)과 완전 동일 */
.ok-prize-text-overlay {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
background: linear-gradient(to top,
rgba(5,8,18,.90) 0%,
rgba(5,8,18,.72) 30%,
rgba(5,8,18,.38) 60%,
rgba(5,8,18,.08) 82%,
transparent 100%);
padding: 20px 8px 7px;
display: flex; flex-direction: column; gap: 4px;
text-align: left;
}
/* 상품명 — 대기열(ok-queue-prize-mini-name)과 동일 */
.ok-prize-name {
font-size: 11px; font-weight: 800; color: #f1f5f9;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-shadow:
0 0 8px rgba(0,0,0,1),
0 1px 8px rgba(0,0,0,.95),
1px 1px 0 rgba(0,0,0,.7),
-1px -1px 0 rgba(0,0,0,.7);
letter-spacing: -.01em; line-height: 1.3;
width: 100%;
}
/* 잔여 수 — 숨김 (ok-prize-count로 통합) */
.ok-prize-remain { display: none; }
.ok-prize-remain.sold-out { display: none; }
/* 게이지바 — 대기열(ok-queue-prize-mini-bar)과 동일 */
.ok-prize-gauge-bg {
width: 100%; height: 3px;
background: rgba(255,255,255,.12);
border-radius: 999px; overflow: hidden;
}
.ok-prize-gauge-fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, #f59e0b, #fcd34d);
transition: width .6s ease;
}
.ok-prize-gauge-fill.full {
background: linear-gradient(90deg, #dc2626, #f87171);
}
/* 잔여수 텍스트 — 대기열(ok-queue-prize-mini-count)와 동일 */
.ok-prize-count {
font-size: 9.5px; color: #e2e8f0; font-weight: 800;
letter-spacing: .02em;
}
.ok-prize-count.sold { color: #f87171; }
/* 소진 카드: 흑백 처리 */
.ok-prize-item.depleted .ok-prize-img-wrap img {
filter: grayscale(85%) brightness(.55);
}
.ok-prize-item.depleted {
border-color: rgba(255,255,255,.08);
}
/* 라스트원 카드 전용 — 골드 글로우 */
.ok-lastone-item {
border-color: rgba(251,191,36,.85) !important;
box-shadow: 0 4px 16px rgba(0,0,0,.55) !important;
}
.ok-lastone-item .ok-prize-text-overlay {
background: linear-gradient(to top,
rgba(40,18,0,.90) 0%,
rgba(40,18,0,.72) 30%,
rgba(40,18,0,.38) 60%,
rgba(40,18,0,.08) 82%,
transparent 100%);
}
.ok-lastone-item .ok-prize-name {
color: #fde68a;
text-shadow: 0 0 8px rgba(251,191,36,.5), 0 1px 8px rgba(0,0,0,.95);
}
.ok-lastone-item .ok-prize-count { color: #fbbf24; }
.ok-lastone-item.depleted {
border-color: rgba(239,68,68,.55) !important;
}
@keyframes loCardGlow {
0%,100% { box-shadow: 0 0 0 1px rgba(251,191,36,.2), 0 0 18px rgba(251,191,36,.35), 0 6px 20px rgba(0,0,0,.75); }
50% { box-shadow: 0 0 0 1px rgba(251,191,36,.4), 0 0 28px rgba(251,191,36,.6), 0 6px 24px rgba(0,0,0,.8); }
}
.ok-lastone-item:not(.depleted) {
animation: loCardGlow 2.4s ease-in-out infinite;
}
/* 이미지 확대 모달 */
.ok-img-expand-modal {
position: fixed; inset: 0; z-index: 99999;
display: none; align-items: center; justify-content: center;
background: rgba(0,0,0,.9);
backdrop-filter: blur(12px);
opacity: 0; pointer-events: none;
transition: opacity .2s;
padding: 0;
}
.ok-img-expand-modal.show {
display: flex;
opacity: 1; pointer-events: all;
}
/* 이미지 확대 모달 — 확률 뱃지 (이미지 오른쪽 상단) */
.ok-img-expand-prob-badge {
position: absolute; top: 12px; right: 12px; z-index: 30;
display: flex; align-items: center; gap: 4px;
padding: 5px 10px 5px 8px;
border-radius: 20px;
background: rgba(15, 15, 30, 0.72);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.18);
color: #fff;
font-size: 14px; font-weight: 800;
box-shadow: 0 2px 10px rgba(0,0,0,.4);
pointer-events: none;
white-space: nowrap;
}
.ok-img-expand-prob-icon { font-size: 13px; line-height: 1; }
.ok-img-expand-prob-badge.badge-sold {
background: rgba(180, 30, 30, 0.82);
border-color: rgba(255,100,100,.35);
}
.ok-img-expand-prob-badge.badge-lastone {
background: rgba(40, 18, 0, 0.82);
border-color: rgba(251,191,36,.5);
color: #fde68a;
}
/* inner 전체를 가로 row로: [prev] [이미지] [next] */
.ok-img-expand-inner {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
max-width: min(96vw, 988px) !important; /* 760 × 1.3 ≈ 988 */
animation: okImgExpandIn .22s cubic-bezier(.34,1.56,.64,1) both;
position: relative !important;
}
/* 이미지 content 래퍼 */
.ok-img-expand-content {
display: flex; flex-direction: column; align-items: center; gap: 0;
flex: 1; min-width: 0;
}
/* 이미지 래퍼 — 세로:가로 = 4:3 고정 비율, cover로 꽉 채움 */
.ok-img-expand-img-wrap {
width: min(60vw, 600px);
aspect-ratio: 3 / 4; /* 가로3 : 세로4 */
max-height: 88vh;
display: block;
flex-shrink: 0;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,.85), 0 0 0 2px rgba(167,139,250,.4);
}
.ok-img-expand-img {
width: 100%;
height: 100%;
object-fit: cover; /* 비율 무시하고 꽉 채움 — 양옆 잘릴 수 있음 */
border-radius: 0;
box-shadow: none;
display: block;
}
/* 좌우 네비 화살표 — inner 안 flex 자녀, 수직 중앙 자동 정렬 */
.ok-img-expand-nav {
flex-shrink: 0;
width: 52px; height: 52px;
border-radius: 50%;
border: none;
cursor: pointer;
display: none;
align-items: center; justify-content: center;
user-select: none;
transition: background .18s, transform .15s, box-shadow .18s;
background: rgba(255,255,255,.10);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
color: #fff;
}
.ok-img-expand-nav svg {
width: 24px; height: 24px; flex-shrink: 0;
filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.ok-img-expand-nav:not(.ok-img-expand-nav-mobile):hover {
background: rgba(139,92,246,.45);
box-shadow: 0 6px 28px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.22);
transform: scale(1.1);
}
.ok-img-expand-nav:not(.ok-img-expand-nav-mobile):active {
transform: scale(.95);
}
.ok-img-expand-nav-mobile:hover {
background: rgba(0,0,0,.7) !important;
}
.ok-img-expand-nav-mobile:active {
opacity: .7;
}
/* 모바일 전용 화살표 — img-wrap 안에 absolute 오버레이 (기본 숨김) */
.ok-img-expand-nav-mobile {
display: none !important;
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 40px !important; height: 40px !important;
z-index: 20 !important;
background: rgba(0,0,0,.55) !important;
backdrop-filter: blur(6px) !important;
border-radius: 50% !important;
border: none !important;
cursor: pointer !important;
color: #fff !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.ok-img-expand-nav-mobile-prev { left: 10px !important; right: auto !important; }
.ok-img-expand-nav-mobile-next { right: 10px !important; left: auto !important; }
.ok-img-expand-nav-mobile svg { width: 18px !important; height: 18px !important; }
@media (max-width: 480px) {
.ok-img-expand-inner { gap: 0 !important; }
.ok-img-expand-img-wrap {
width: min(92vw, 420px) !important;
max-height: 84vh !important;
}
/* 데스크톱 화살표 숨김 */
.ok-img-expand-nav-prev-desktop,
.ok-img-expand-nav-next-desktop { display: none !important; }
/* 모바일 화살표 img-wrap 안에 absolute로 표시 */
.ok-img-expand-nav-mobile { display: flex !important; }
}
@keyframes okImgExpandIn {
from { transform: scale(.75); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* 상품명 — 이미지 안 하단 오버레이 */
.ok-img-expand-name {
position: absolute;
bottom: 18px; left: 0; right: 0;
padding: 0 16px;
background: none;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
z-index: 3;
}
.ok-img-expand-name-text {
/* 검정 반투명 타원 뱃지 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
background: rgba(0,0,0,.52);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 999px;
padding: 9px 22px;
font-size: clamp(16px, 2.4vw, 22px);
font-weight: 800;
color: #fff;
text-align: center;
letter-spacing: .04em;
line-height: 1.35;
word-break: keep-all;
overflow-wrap: break-word;
max-width: 88%;
}
/* ── 이미지 확대 모달 번호 칩 영역 ── */
#okImgExpandNumChips {
width: min(60vw, 600px); /* 이미지 래퍼와 동일 너비 */
margin-top: 10px;
padding: 10px 12px;
background: rgba(10, 10, 20, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.1);
border-radius: 14px;
box-sizing: border-box;
}
#okImgExpandNumChipsList {
display: flex;
flex-wrap: wrap;
gap: 7px;
justify-content: center;
}
/* 개별 칩 공통 */
.ok-num-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
letter-spacing: .01em;
white-space: nowrap;
line-height: 1;
transition: opacity .15s;
}
/* 미판매 — 금색 */
.ok-num-chip.available {
background: rgba(251,191,36,.13);
border: 1.5px solid rgba(251,191,36,.7);
color: #fbbf24;
box-shadow: 0 0 8px rgba(251,191,36,.2);
}
/* 판매 완료 — 빨간색 + 취소선 */
.ok-num-chip.sold {
background: rgba(239,68,68,.1);
border: 1.5px solid rgba(239,68,68,.45);
color: #f87171;
opacity: .72;
}
.ok-num-chip.sold .ok-num-chip-num {
text-decoration: line-through;
text-decoration-color: #f87171;
}
/* 모바일: 이미지 너비 따라 축소 */
@media (max-width: 600px) {
#okImgExpandNumChips {
width: 92vw;
padding: 8px 10px;
}
.ok-num-chip {
font-size: 12px;
padding: 4px 10px;
}
}
/* 당첨 주의 (등급 없음 시 다르게) */
.ok-prize-item.depleted {
opacity: .55;
filter: grayscale(.5);
}
/* 라스트원 상품 카드 */
@keyframes loCardGlow {
0%,100% { box-shadow: 0 0 0 1px rgba(251,191,36,.15), 0 0 16px rgba(251,191,36,.2), 0 6px 20px rgba(0,0,0,.7); }
50% { box-shadow: 0 0 0 1px rgba(251,191,36,.3), 0 0 36px rgba(251,191,36,.45), 0 6px 28px rgba(0,0,0,.75); }
}
.ok-lastone-item {
animation: loCardGlow 2.8s ease-in-out infinite;
}
.ok-lastone-item:hover { transform: translateY(-6px) scale(1.04) !important; }
/* 서브텍스트 (보조 남은 수 카운트) */
.ok-prize-sub {
display: none; /* 모달에서만 사용 */
}
/* ══ 상품 상세 팝업 모달 ══ */
/* ══ 상품 상세 모달 — 아케이드 네온 ══ */
.ok-prize-detail-modal {
position: fixed; inset: 0; z-index: 50000;
display: none; align-items: center; justify-content: center;
background: rgba(2,3,16,.88);
backdrop-filter: blur(12px);
opacity: 0; pointer-events: none;
transition: opacity .22s;
padding: 0;
}
.ok-prize-detail-modal.show {
display: flex;
opacity: 1; pointer-events: all;
}
.ok-prize-detail-box {
border-radius: 26px;
width: min(500px, 94vw);
box-shadow:
0 0 0 1px rgba(255,255,255,.07),
0 30px 80px rgba(0,0,0,.9),
0 0 50px rgba(139,92,246,.2);
display: flex; flex-direction: column; align-items: stretch; gap: 0;
position: relative;
animation: okPrizeDetailIn .28s cubic-bezier(.34,1.56,.64,1) both;
overflow: hidden;
background: #0a0d1f;
border: 1.5px solid rgba(139,92,246,.45);
}
@keyframes okPrizeDetailIn {
from { transform: scale(.88) translateY(24px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes loTrophyFloat {
0%,100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-4px) scale(1.05); }
}
@keyframes loShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* 이미지 히어로 영역 */
.ok-prize-detail-hero {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 24px 24px 0 0;
}
.ok-prize-detail-hero img,
.ok-prize-detail-hero .ok-prize-emoji-lg {
width: 100%; height: 100%;
object-fit: cover;
display: block;
cursor: pointer;
}
.ok-prize-detail-hero .ok-prize-emoji-lg {
font-size: 80px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg,#0f1230,#130820);
}
/* 히어로 위 상단 그라디언트 — 제거 */
.ok-prize-detail-hero::before {
content: none;
}
/* 히어로 아래 그라디언트 (이름 가독성) */
.ok-prize-detail-hero::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 110px;
background: linear-gradient(to top, rgba(5,5,20,.95), transparent);
z-index: 1; pointer-events: none;
}
/* 히어로 위 등급 뱃지 */
.ok-prize-detail-rank {
position: absolute; top: 14px; left: 16px; z-index: 2;
font-size: 12px; font-weight: 900; letter-spacing: .15em;
color: #fff;
border-radius: 8px; padding: 5px 14px;
text-transform: uppercase;
box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
/* 히어로 위 닫기 버튼 */
/* 히어로 위 닫기 버튼 — 사용 안 함 (닫기는 배경 클릭으로 수행) */
/* 히어로 위 상품명 (하단 오버레이) */
.ok-prize-detail-name {
position: absolute; bottom: 14px; left: 16px; right: 16px; z-index: 2;
font-size: 18px; font-weight: 900; color: #f1f5f9;
line-height: 1.25; letter-spacing: -.3px;
text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
/* 하단 정보 패널 */
.ok-prize-detail-info {
padding: 16px 18px 18px;
display: flex; flex-direction: column; gap: 12px;
background: #0a0d1f;
}
/* 스탯 2열 */
.ok-prize-detail-stats {
display: flex; align-items: stretch;
width: 100%; gap: 0;
background: rgba(255,255,255,.04);
border: 1px solid rgba(139,92,246,.18);
border-radius: 14px; overflow: hidden;
}
.ok-prize-detail-stat {
flex: 1; text-align: center;
padding: 12px 8px 10px;
display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pd-stat-divider {
width: 1px; background: rgba(139,92,246,.18);
align-self: stretch;
}
.pd-stat-icon { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.pd-stat-remain { background: rgba(99,102,241,.06); }
.pd-stat-prob { background: rgba(16,185,129,.05); }
.ok-prize-detail-stat-val {
font-size: 22px; font-weight: 900; color: #a78bfa;
line-height: 1;
}
.pd-stat-prob .ok-prize-detail-stat-val { color: #34d399; }
.ok-prize-detail-stat-val.zero { color: #ef4444; }
.ok-prize-detail-stat-val.sold-out { color: #ef4444; font-size: 15px; }
.ok-prize-detail-stat-label {
font-size: 10px; color: #64748b; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
}
/* 소진율 게이지 */
.ok-prize-detail-gauge-wrap { width: 100%; }
.ok-prize-detail-gauge-label {
display: flex; justify-content: space-between; align-items: center;
font-size: 11.5px; font-weight: 800; margin-bottom: 7px;
color: #94a3b8;
}
.ok-prize-detail-gauge-label span:last-child {
color: #c4b5fd; font-size: 13px;
}
.ok-prize-detail-gauge-bg {
width: 100%; height: 8px;
background: rgba(255,255,255,.06);
border-radius: 999px; overflow: hidden;
}
.ok-prize-detail-gauge-fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, #4f46e5, #7c3aed, #a78bfa);
transition: width .7s cubic-bezier(.34,1.1,.64,1);
position: relative;
}
.ok-prize-detail-gauge-fill::after {
content: '';
position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.3));
border-radius: 999px;
}
.ok-prize-detail-gauge-fill.full {
background: linear-gradient(90deg, #991b1b, #dc2626, #f87171);
}
/* 화살표 버튼 — ok-prize-detail-modal flex row 자녀, 카드 바로 옆 배치 */
/* ok-prize-detail-modal 전체를 row로 — [◀] [카드] [▶] */
.ok-prize-detail-modal {
/* flex row 덮어쓰기 — 기존 column 정렬을 row로 변경 */
flex-direction: row !important;
gap: 16px !important;
padding: 0 12px !important;
}
#pdNavPrev, #pdNavNext {
flex-shrink: 0;
width: 52px; height: 52px;
border-radius: 50%;
border: none;
cursor: pointer;
display: none; align-items: center; justify-content: center;
user-select: none;
transition: background .18s, transform .15s, box-shadow .18s;
background: rgba(255,255,255,.10);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
color: #fff;
/* position 제거 — flex item으로 배치 */
position: static;
transform: none;
align-self: center;
}
#pdNavPrev svg, #pdNavNext svg {
width: 24px; height: 24px; flex-shrink: 0;
filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
#pdNavPrev:hover, #pdNavNext:hover {
background: rgba(139,92,246,.45);
box-shadow: 0 6px 28px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.22);
transform: scale(1.1);
}
#pdNavPrev:active, #pdNavNext:active {
transform: scale(.95);
}
@media (max-width: 520px) {
.ok-prize-detail-modal { gap: 10px !important; padding: 0 6px !important; }
#pdNavPrev, #pdNavNext { width: 40px; height: 40px; }
#pdNavPrev svg, #pdNavNext svg { width: 18px; height: 18px; }
}
/* 쿠지 종이 그리드 */
/* ══════════════════════════════════════════
🎫 이치방쿠지 스타일 쿠지 종이 그리드
══════════════════════════════════════════ */
.ok-paper-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
padding: 10px 2px 20px 2px;
overflow: visible;
}
/* PC에서 종이 카드 겹침 방지: 좌우 여백 추가 */
@media (min-width: 601px) {
.ok-paper-grid {
padding: 10px 18px 20px 18px;
gap: 12px;
}
}
/* PC에서 8열 → 넓은 화면에서도 카드 과밀 방지 */
@media (min-width: 1024px) {
.ok-paper-grid {
grid-template-columns: repeat(8, 1fr);
padding: 10px 24px 20px 24px;
gap: 14px;
}
}
@media(max-width:900px){ .ok-paper-grid{ grid-template-columns: repeat(6, 1fr); gap:8px; } }
@media(max-width:600px){ .ok-paper-grid{ grid-template-columns: repeat(4, 1fr); gap:7px; } }
@media(max-width:380px){ .ok-paper-grid{ grid-template-columns: repeat(4, 1fr); gap:6px; } }
/* ★ [PERF-MOBILE] 모바일: CSS containment — 각 카드 선택 시 그리드 전체 레이아웃 재계산 차단
contain: layout style — transform:none으로 selected overflow:visible 문제 없으므로 layout 추가 가능
(기존 scale pop 제거됐기 때문에 layout containment가 안전하게 적용됨) */
@media (max-width: 768px) {
.ok-paper-grid { contain: layout style; }
.ok-paper { contain: layout style; }
}
/* 쿠지 종이 카드 - 자연스러운 쌓인 종이 느낌 */
.ok-paper {
aspect-ratio: 3/2;
border-radius: 9px;
cursor: pointer;
position: relative; overflow: visible;
background: #e8820c;
border: 1.5px solid #d4700a;
box-shadow:
0 2px 0 rgba(0,0,0,.25),
0 4px 8px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -1px 0 rgba(0,0,0,.15);
/* ★ [BUG-FIX HOVER-FLICKER] transition 단일화 — 하단 중복 정의 제거로 통합
cubic-bezier(.34,1.4,.64,1) = spring overshoot easing (살짝 튀어오름) */
transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease, outline .1s ease;
user-select: none;
/* ★ [BUG-FIX HOVER-FLICKER] transform은 시각적 확대만, hit-test 영역은 원래 크기 유지
→ hover 상태에서 인접 카드 hit-test 침범 방지를 위해 isolation 컨텍스트 생성 */
isolation: isolate;
/* ★ [PERF] will-change:transform 상시 적용 제거
— 카드 수백 장이 항상 GPU 레이어를 점유하면 메모리·합성 비용 과다
— hover/active 진입 직전 시점에만 부여 (아래 규칙) */
/* 카드마다 미세하게 다른 기울기 → nth-child로 부여 */
}
/* skinFront/skinBack 이미지 적용 시 기본 스타일 덮어쓰기 */
.ok-paper.has-skin {
background: transparent;
border-color: transparent;
box-shadow:
0 2px 0 rgba(0,0,0,.35),
0 4px 12px rgba(0,0,0,.45);
/* ★ [BUG-FIX STAMP] overflow:hidden → overflow:visible
이전: overflow:hidden이면 ::after 스탬프가 카드 경계에서 잘려 선택 표시 안 보임
수정: visible로 변경 후 내부 이미지 레이어(back/front-layer)에서 overflow:hidden 유지 */
overflow: visible;
border-radius: 9px;
}
/* 뒷면 배경 이미지 레이어 (z-index:0) */
.ok-paper-back-layer {
position: absolute; inset: 0;
border-radius: 8px;
overflow: hidden;
z-index: 0;
pointer-events: none; /* ★ 클릭은 부모 .ok-paper에서만 처리 */
}
.ok-paper-back-layer img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 8px;
display: block;
pointer-events: none;
}
/* 앞면 이미지 레이어 (z-index:1, 위에 겹침) */
.ok-paper-front-layer {
position: absolute; inset: 0;
border-radius: 8px;
overflow: hidden;
z-index: 1;
pointer-events: none; /* ★ 클릭은 부모 .ok-paper에서만 처리 */
}
.ok-paper-front-layer img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 8px;
display: block;
pointer-events: none;
}
/* 짝수/홀수 배치로 자연스러운 느낌 — PC 전용 */
.ok-paper:nth-child(3n+1) { transform: rotate(-0.6deg); }
.ok-paper:nth-child(3n+2) { transform: rotate(0.4deg); }
.ok-paper:nth-child(3n) { transform: rotate(-0.2deg); }
/* ★ [PERF-MOBILE] 모바일 카드 그리드 통합 최적화 블록
─ 이 블록에서 모바일 ok-paper 관련 모든 성능 규칙을 한 곳에서 관리 ─
제거 항목:
· rotate(nth-child) → transform: none (카드마다 GPU 레이어 생성 방지)
· box-shadow 전체 → none (blur 포함 다레이어 GPU blur 연산 제거)
· transition → none (탭 즉각 반응, 보간 비용 0)
· isolation: isolate → auto (stacking context 생성 비용 제거)
· selected transform → none (선택 카드마다 GPU 합성 레이어 누적 방지)
· ok-paper-action-bar animation → none (selectBar 슬라이드인 비용 제거) */
@media (max-width: 768px) {
/* ① rotate 제거 */
.ok-paper:nth-child(3n+1),
.ok-paper:nth-child(3n+2),
.ok-paper:nth-child(3n) { transform: none !important; }
.ok-paper.revealed:nth-child(3n+1),
.ok-paper.revealed:nth-child(3n+2),
.ok-paper.revealed:nth-child(3n) { transform: none !important; }
/* ② 기본 카드: box-shadow·transition·isolation 모두 제거 */
.ok-paper {
box-shadow: none !important;
transition: none !important;
isolation: auto !important;
will-change: auto !important;
}
/* ③ has-skin 카드도 그림자 제거 */
.ok-paper.has-skin { box-shadow: none !important; }
/* ④ active 탭 피드백: opacity만 (transform 비용 0) */
.ok-paper:active:not(.revealed) {
opacity: 0.75 !important;
transform: none !important;
}
/* ⑤ 선택 상태: transform 없음 (outline으로만 구분, 위 블록에서 선언) */
.ok-paper.selected {
transform: none !important;
will-change: auto !important;
}
/* ⑥ tap-feedback: opacity만 */
.ok-paper.tap-feedback {
opacity: 0.7 !important;
transform: none !important;
}
/* ⑦ selectBar 슬라이드인 animation 제거 */
.ok-paper-action-bar { animation: none !important; }
}
.ok-paper:hover:not(.revealed):not(.selected) {
/* ★ [BUG-FIX HOVER-FLICKER] scale 1.1→1.06으로 축소
1.1은 인접 카드(gap 10~14px) hit-test 영역을 침범해 연속 enter/leave 유발
1.06은 카드 크기 대비 gap 여유로 침범 없음 */
will-change: transform; /* hover 진입 직전에만 GPU 레이어 예약 */
transform: scale(1.06) translateY(-4px) rotate(0deg);
box-shadow:
0 8px 24px rgba(232,130,12,.5),
0 0 0 2px rgba(251,191,36,.7),
inset 0 1px 0 rgba(255,255,255,.3);
z-index: 5;
}
.ok-paper:active:not(.revealed) {
will-change: transform;
transform: scale(0.97) translateY(1px) rotate(0deg) !important;
box-shadow:
0 1px 4px rgba(0,0,0,.4),
inset 0 2px 4px rgba(0,0,0,.25);
transition-duration: .07s;
}
/* ★ [MOBILE-TOUCH] ok-paper 터치 후 hover/active 고착 방지
— hover: none = 마우스 없는 터치 전용 기기 */
@media (hover: none) {
.ok-paper:hover:not(.revealed):not(.selected),
.ok-paper:active:not(.revealed):not(.selected) {
transform: none !important;
box-shadow:
0 2px 0 rgba(0,0,0,.25),
0 4px 8px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -1px 0 rgba(0,0,0,.15);
will-change: auto;
z-index: auto;
}
/* tap-feedback는 opacity만 유지 (이미 모바일 override 있음) */
}
/* ★ [PERF] 선택 완료된 카드는 transform 고정 — will-change 필요 없음 */
.ok-paper.selected { will-change: auto; }
.ok-paper.revealed {
pointer-events: none;
cursor: default;
/* 흐림 효과 제거 — opacity/filter 없음 */
}
.ok-paper.revealed:nth-child(3n+1) { transform: rotate(-0.6deg); }
.ok-paper.revealed:nth-child(3n+2) { transform: rotate(0.4deg); }
.ok-paper.revealed:nth-child(3n) { transform: rotate(-0.2deg); }
/* 뒷면(번호 공개) 오버레이 */
.ok-paper.revealed .ok-paper-front-face { display: none; }
.ok-paper.revealed .ok-paper-back-face { display: flex; }
/* Canvas 종이 스타일 */
.ok-paper-canvas {
width: 100% !important;
height: 100% !important;
display: block;
border-radius: 8px;
pointer-events: none; /* 클릭은 부모 div에서 처리 */
}
/* Canvas 종이 선택 상태 — 캔버스에 초록 테두리 추가 강조 (PC 전용) */
.ok-paper.selected .ok-paper-canvas {
outline: 2px solid rgba(16,185,129,.6);
outline-offset: 0px;
}
/* 모바일: canvas outline 제거 — 부모 .ok-paper outline으로 대체 */
@media (max-width: 768px) {
.ok-paper.selected .ok-paper-canvas { outline: none !important; }
}
/* 앞면 레이아웃 - canvas _drawDefaultFront와 동일한 오렌지 티켓 */
.ok-paper-front-face {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: space-between;
padding: 8% 12% 8% 13%;
border-radius: 8px;
overflow: hidden;
background: #F08010;
}
/* 흰 외곽 테두리 */
.ok-paper-front-face::before {
content:''; position:absolute;
inset: 3.5%;
border: 2.5px solid rgba(255,255,255,.9);
border-radius: 5px;
pointer-events:none; z-index:3;
}
/* 왼쪽 세로 파란 엣지 라인 */
.ok-paper-front-face::after {
content:''; position:absolute;
left: 13%; top: 8%; bottom: 8%;
width: 2%; max-width: 2.5px;
background: #3366FF;
border-radius: 1px;
z-index: 2;
}
.ok-paper-logo-area {
display: flex; align-items: center; justify-content: center;
width: 100%; position: relative; z-index: 4;
flex: 1; margin-top: 4%;
}
.ok-paper-kuji-logo {
width: 55%; max-width: 44px;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
/* 바코드 - 하단에 흰 배경 + 검정 바 (canvas와 동일 위치) */
.ok-paper-barcode {
width: 74%; height: 15%;
background-color: #fff;
background-image: repeating-linear-gradient(
90deg,
#000 0px, #000 2px,
transparent 2px, transparent 4px,
#000 4px, #000 7px,
transparent 7px, transparent 9px,
#000 9px, #000 11px,
transparent 11px, transparent 13px,
#000 13px, #000 16px,
transparent 16px, transparent 18px,
#000 18px, #000 20px,
transparent 20px, transparent 22px,
#000 22px, #000 25px,
transparent 25px, transparent 27px
);
border-radius: 2px;
position: relative; z-index: 4;
flex-shrink: 0;
margin-bottom: 2%;
}
/* 왼쪽 노치 구멍 */
/* ok-paper-notch: 그리드 카드에서 검은 점 제거 - 표시 안함 */
.ok-paper-notch {
display: none;
}
/* 앞면 순번 배지 (좌상단) */
.ok-paper-num-badge {
position: absolute; top: 5%; left: 3%;
font-size: clamp(8px, 1.8vw, 10px);
font-weight: 900; color: #fff;
background: rgba(15,10,30,.78);
border: 1.5px solid rgba(180,150,255,.55);
border-radius: 5px;
padding: 2px 5px;
display: flex; align-items:center; justify-content:center;
z-index: 5; line-height: 1.2;
letter-spacing: .5px;
text-shadow: 0 0 8px rgba(180,150,255,.7);
pointer-events: none;
user-select: none;
}
@media (min-width: 769px) {
.ok-paper-num-badge {
font-size: clamp(10px, 1.1vw, 14px);
padding: 3px 7px;
border-radius: 6px;
}
}
/* 보라 화살표 아이콘 - canvas 위치와 정렬 */
.ok-paper-arrow {
position: absolute; left: 13%; top: 50%;
transform: translateY(-50%);
width: 16%; aspect-ratio: 1;
z-index: 5;
display: flex; align-items:center; justify-content:center;
}
.ok-paper-arrow svg { width: 100%; height: 100%; }
/* ─── 뒷면 - 카드 전체를 직접 채움 ─── */
.ok-paper-back-face {
display: none;
position: absolute; inset: 0;
background: #F08010; /* 주황 외곽 */
border-radius: 8px;
overflow: hidden;
z-index: 10; /* ★ [REVEALED-FIX] 다른 레이어(back-layer, front-layer, canvas) 위에 표시 */
}
/* 뒷면 내부 검정 영역 (흰 테두리 없음) */
.ok-paper-back-inner {
position: absolute;
inset: 6% 7%;
background: #0A0A0A;
border-radius: 4px;
overflow: hidden;
z-index: 1;
}
/* 상단 진한 파랑 스트라이프 (검정영역 기준 상단 22%) */
.ok-paper-back-stripe-top {
display: block !important;
position: absolute; top: 0; left: 0; right: 0;
height: 22%;
background: #1a47cc;
}
/* 흰색 얇은 스트라이프 (22%~28%) */
.ok-paper-back-stripe-mid {
display: block !important;
position: absolute; top: 22%; left: 0; right: 0;
height: 6%;
background: #FFFFFF;
}
/* 하단 하늘색 스트라이프 (하단 22%) */
.ok-paper-back-stripe-bot {
display: block !important;
position: absolute; bottom: 0; left: 0; right: 0;
height: 22%;
background: #6ca0ea;
}
/* 번호: ok-paper-back-inner 기준 52% */
.ok-paper-revealed-num {
position: absolute; z-index: 4;
/* 배경 검정 + 글자 흰색이므로 text-shadow 불필요 — 빛남 효과 완전 제거 */
top: 52%; left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(22px, 5.4vw, 38px);
font-weight: 900; color: #fff;
line-height: 1;
text-align: center;
white-space: nowrap;
letter-spacing: -.02em;
}
/* 신규 번호 뱃지 (뒷면 상단 왼쪽) */
.ok-paper-back-num-label {
position: absolute; top: 3%; left: 4%;
font-size: clamp(6px, 1.1vw, 9px); font-weight: 800;
color: #fff; opacity: .7; z-index: 2;
}
/* ══════════════════════════════════════════
🎁 드래그 뜯기 모달 (v2 - 완전 재작성)
══════════════════════════════════════════ */
.ok-tear-modal {
position: fixed; inset: 0; z-index: 10000;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background: rgb(3,4,14);
backdrop-filter: none;
padding: 0; /* Android: statusBarView/navBarView가 상하 공간 처리 */
}
.ok-tear-modal.hidden { display: none; }
/* 콘텐츠 래퍼 — 직접 flex column 중앙 정렬 */
.ok-tear-content-wrap {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 0; /* 자식 간격은 각 자식 margin으로 제어 */
}
/* 상단 타이틀 */
.ok-tear-title {
font-size: 15px; font-weight: 800; color: #fbbf24;
text-shadow: 0 0 14px rgba(251,191,36,.6);
letter-spacing: .06em;
text-align: center;
margin: 0 0 0px; /* 카드와 간격 최소화 */
flex-shrink: 0;
}
/* 뜯기 스테이지 컨테이너 */
.ok-tear-stage {
position: relative;
z-index: 0; /* 힌트 카드(z-index:1)에 가리지 않도록 */
width: min(500px, 94vw);
aspect-ratio: 3/2;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
cursor: grab;
touch-action: none;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
.ok-tear-stage:active { cursor: grabbing; }
/* ── 뒷면 레이어: canvas가 직접 그리므로 배경 투명 ── */
.ok-tear-back-layer {
position: absolute; inset: 0;
background: transparent;
z-index: 0;
}
/* 왼쪽 반원 구멍 제거됨 - canvas에서 직접 처리 */
/* 안쪽 흰 테두리 박스 (앞면 내부 박스와 동일) */
.ok-tear-back-inner {
position: absolute; inset: 5% 7%;
border: 2.5px solid rgba(255,255,255,.6);
border-radius: 10px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
z-index: 1; gap: 8%;
background: transparent; overflow: visible;
}
/* 번호: 처음부터 보이되 드래그 진행에 따라 선명해짐 */
.ok-tear-back-num {
position: relative; z-index: 3;
font-size: clamp(48px, 11vw, 86px);
font-weight: 900; color: #fff;
text-shadow:
0 0 30px rgba(255,230,100,.95),
0 0 60px rgba(255,180,0,.6),
0 4px 20px rgba(0,0,0,.8);
letter-spacing: -.02em; line-height: 1;
opacity: 0; /* 뜯기 시작 전 완전히 숨김 — 스포 방지 */
transition: opacity .15s;
}
.ok-tear-back-num.revealed {
opacity: 1;
transition: opacity .3s ease;
}
/* 바코드 (뒷면) */
.ok-tear-back-barcode {
width: 68%; height: 11%;
background: repeating-linear-gradient(
90deg,
#000 0, #000 2px, transparent 2px, transparent 3px,
#000 3px, #000 5px, transparent 5px, transparent 7px,
#000 7px, #000 9px, transparent 9px, transparent 11px,
#000 11px, #000 14px, transparent 14px, transparent 16px,
#000 16px, #000 17px, transparent 17px, transparent 19px
);
background-color: rgba(255,255,255,.92);
border-radius: 2px;
opacity: 0; transition: opacity 0s;
}
.ok-tear-back-barcode.revealed {
opacity: 1;
transition: opacity .4s .25s ease;
}
/* ── 앞면 Canvas (드래그로 왼→오 사라짐) ── */
#okTearCanvas {
position: absolute; inset: 0; z-index: 2;
width: 100%; height: 100%;
cursor: grab; touch-action: none;
/* GPU 합성 레이어 → 모바일 드래그 부드럽게 */
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
/* 앞면이 뒷면 위에 완전히 덮음 */
}
#okTearCanvas:active { cursor: grabbing; }
/* 찢기 파티클 라인 */
.ok-tear-spark-line {
position: absolute; top:0; bottom:0; width: 5px; z-index: 4;
background: linear-gradient(180deg,
transparent 0%, rgba(255,240,100,.2) 15%,
#fff700 30%, #fffbe0 50%, #ffaa00 70%,
rgba(255,200,0,.2) 85%, transparent 100%);
filter: blur(1.5px);
opacity: 0; pointer-events: none;
transition: opacity .08s;
}
.ok-tear-spark-line.active { opacity: 1; }
/* 결과 오버레이 (뜯기 완료 후) */
/* ── 찢기 결과 오버레이 (전체화면 당첨 강조) ── */
.ok-tear-result-overlay {
position: fixed; inset: 0; z-index: 99000;
background: linear-gradient(160deg, #08021a 0%, #1e0848 45%, #0a1448 80%, #08021a 100%);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 0; padding: 20px 16px;
opacity: 0; pointer-events: none;
transition: opacity .3s cubic-bezier(.4,.0,.2,1);
overflow: hidden;
will-change: opacity, transform;
backface-visibility: hidden;
/* 스크롤 방지 */
}
.ok-tear-result-overlay.show { opacity: 1; pointer-events: all; }
/* 당첨 크라운 - 더 크게 */
.ok-result-crown {
font-size: clamp(44px,10vw,72px);
margin-bottom: 4px;
animation: okCrownBounce .7s ease both;
filter: drop-shadow(0 0 24px rgba(251,191,36,1)) drop-shadow(0 0 48px rgba(251,191,36,.5));
position: relative; z-index: 2;
line-height: 1;
}
@keyframes okCrownBounce {
0% { transform: scale(0) rotate(-15deg); opacity:0; }
60% { transform: scale(1.3) rotate(5deg); opacity:1; }
80% { transform: scale(0.92) rotate(-2deg); }
100% { transform: scale(1) rotate(0deg); }
}
/* 당첨 타이틀 - 더 크고 더 화려하게 */
.ok-tear-result-title {
font-size: clamp(30px,7.5vw,52px);
font-weight: 900;
color: #fbbf24; /* 기본색 (이모티콘에 적용) */
background: linear-gradient(135deg, #ffe564, #fbbf24, #fcd34d, #fbbf24, #f59e0b);
-webkit-background-clip: text; background-clip: text;
text-shadow: none;
animation: okTitlePop .55s .05s cubic-bezier(.34,1.56,.64,1) both;
letter-spacing: -.01em;
margin-bottom: 8px;
position: relative; z-index: 2;
filter: drop-shadow(0 0 12px rgba(251,191,36,.3));
}
/* 이모티콘은 그라데이션 클리핑 적용 안함 – ::before 트릭 */
.ok-tear-result-title .ok-title-emoji {
-webkit-background-clip: unset;
background-clip: unset;
-webkit-text-fill-color: initial;
background: none;
color: initial;
display: inline-block;
}
@keyframes okTitlePop {
from { transform: scale(.5); opacity:0; }
to { transform: scale(1); opacity:1; }
}
/* 당첨 번호 배지 - 더 눈에 띄게 */
.ok-result-num-badge {
font-size: clamp(16px,3.2vw,24px); font-weight:900;
color: #fbbf24;
background: rgba(251,191,36,.22);
border: 2px solid rgba(251,191,36,.7);
border-radius: 999px; padding: 6px 28px;
letter-spacing: .12em;
margin-bottom: 16px;
animation: okFadeSlideUp .5s .15s ease both;
position: relative; z-index: 2;
box-shadow: 0 0 20px rgba(251,191,36,.25);
}
@keyframes okFadeSlideUp {
from { transform: translateY(16px); opacity:0; }
to { transform: translateY(0); opacity:1; }
}
/* 상품 카드 - 더 크고 화려하게 */
.ok-result-prize-card {
position: relative;
width: min(420px, 94vw);
background: linear-gradient(145deg, #1a0533 0%, #0d1b4b 60%, #1a0533 100%);
border-radius: 28px;
border: 2.5px solid rgba(139,92,246,.8);
box-shadow:
0 0 0 1px rgba(251,191,36,.15),
0 0 0 6px rgba(139,92,246,.15),
0 0 50px rgba(139,92,246,.6),
0 0 100px rgba(251,191,36,.15),
0 28px 80px rgba(0,0,0,.85);
padding: 28px 24px 24px;
display: flex; flex-direction: column; align-items: center; gap: 14px;
animation: okCardAppear .6s .2s cubic-bezier(.34,1.56,.64,1) both;
overflow: hidden;
}
@keyframes okCardAppear {
from { transform: scale(.7) translateY(40px); opacity:0; }
to { transform: scale(1) translateY(0); opacity:1; }
}
/* 카드 내 빛 효과 */
.ok-result-prize-card::before {
content:'';
position:absolute; top:-50%; left:-50%; width:200%; height:200%;
background: conic-gradient(from 0deg, transparent 0deg, rgba(251,191,36,.06) 30deg, transparent 60deg, transparent 180deg, rgba(139,92,246,.06) 210deg, transparent 240deg);
animation: okCardSpin 4s linear infinite;
pointer-events:none;
}
@keyframes okCardSpin { to { transform: rotate(360deg); } }
/* 카드 내 등급 */
.ok-result-prize-rank {
position: absolute; top: 14px; left: 14px;
font-size: 11px; font-weight:900; letter-spacing:.12em;
color: #818cf8;
background: rgba(99,102,241,.25);
border: 1px solid rgba(99,102,241,.4);
border-radius: 999px; padding: 3px 10px;
}
/* 상품 이미지 - 더 크게 */
.ok-result-prize-img-wrap {
width: min(220px, 55vw); height: min(220px, 55vw);
border-radius: 22px;
background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
border: 2.5px solid rgba(255,255,255,.22);
display: flex; align-items:center; justify-content:center;
overflow: hidden;
box-shadow:
0 0 0 5px rgba(139,92,246,.25),
0 0 30px rgba(139,92,246,.3),
0 16px 50px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.2);
position: relative;
flex-shrink: 0;
animation: okCardAppear .6s .3s cubic-bezier(.34,1.56,.64,1) both;
}
.ok-result-prize-img-wrap img {
width:100%; height:100%; object-fit:cover; border-radius:18px;
}
.ok-result-prize-img-placeholder {
font-size: 64px; opacity:.55;
}
/* 상품 이름 - 더 크게 강조 */
.ok-result-prize-name {
font-size: clamp(22px,5.5vw,34px);
font-weight: 900;
color: #f1f5f9;
text-align: center;
text-shadow:
0 0 20px rgba(251,191,36,.4),
0 2px 12px rgba(0,0,0,.6);
line-height: 1.2;
padding: 0 10px;
letter-spacing: -.01em;
}
/* 이름 & 등급 (구버전 호환) */
.ok-tear-result-prize { display: none; }
.ok-tear-result-rank { display: none; }
.ok-tear-result-img { display: none !important; }
/* 확인 버튼 */
.ok-tear-result-btn {
padding: 16px 52px;
background: linear-gradient(135deg, #16a34a, #15803d, #14532d);
border: 2px solid rgba(74,222,128,.45);
border-radius: 16px;
color:#fff; font-size:16px; font-weight:900;
cursor:pointer; font-family:inherit;
margin-top: 28px;
box-shadow: 0 0 0 4px rgba(22,163,74,.18), 0 8px 32px rgba(22,163,74,.45);
transition: filter .15s, transform .1s, box-shadow .15s;
letter-spacing: .04em;
/* 항상 hover 상태처럼 밝게 */
filter: brightness(1.12);
}
.ok-tear-result-btn:hover { filter:brightness(1.25); transform:translateY(-3px); box-shadow: 0 0 0 6px rgba(22,163,74,.25), 0 12px 36px rgba(22,163,74,.55); }
.ok-tear-result-btn:active { transform:translateY(0); filter:brightness(1.05); }
/* 빛 줄기 배경 (고정형 - 화면 밖으로 나가지 않음) */
.ok-result-rays {
position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;
border-radius: 0;
}
.ok-result-rays::before {
content:'';
position:absolute;
top: 50%; left: 50%;
width: 200vmax; height: 200vmax;
transform: translate(-50%, -50%);
background: repeating-conic-gradient(
rgba(120,50,200,.12) 0deg 5deg,
rgba(60,10,100,.06) 5deg 10deg
);
animation: okRaysSpin 12s linear infinite;
}
.ok-result-rays::after {
content:'';
position:absolute; inset:0;
background:
radial-gradient(ellipse 70% 40% at 50% 0%, rgba(139,92,246,.3) 0%, transparent 65%),
radial-gradient(ellipse 50% 30% at 50% 100%, rgba(251,191,36,.15) 0%, transparent 60%);
pointer-events:none;
}
@keyframes okRaysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* ── 찢기 진동 이펙트 ── */
@keyframes okTearShake {
0%,100% { transform: translate(0,0) rotate(0deg); }
10% { transform: translate(-4px, 2px) rotate(-1deg); }
20% { transform: translate(4px, -2px) rotate(1deg); }
30% { transform: translate(-5px, 1px) rotate(-1.5deg); }
40% { transform: translate(5px, -1px) rotate(1.5deg); }
50% { transform: translate(-3px, 3px) rotate(-0.5deg); }
60% { transform: translate(3px, -3px) rotate(0.5deg); }
70% { transform: translate(-2px, 1px) rotate(-0.5deg); }
80% { transform: translate(2px, -1px) rotate(0deg); }
}
.ok-tear-stage.shaking {
animation: okTearShake 0.4s cubic-bezier(.36,.07,.19,.97);
}
/* ── 당첨 펑 이펙트 (버스트 원형) ── */
.ok-result-boom {
position: fixed; top: 50%; left: 50%;
transform: translate(-50%, -50%) translateZ(0);
width: 0; height: 0;
pointer-events: none; z-index: 98999;
contain: layout style;
}
.ok-result-boom-ring {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0) translateZ(0);
border-radius: 50%; border: 3px solid;
opacity: 0;
will-change: transform, opacity;
backface-visibility: hidden;
}
.ok-result-boom-ring.r1 {
width: 120px; height: 120px;
border-color: #fbbf24;
animation: okBoomRing 0.65s 0s ease-out forwards;
}
.ok-result-boom-ring.r2 {
width: 220px; height: 220px;
border-color: #a78bfa;
animation: okBoomRing 0.75s 0.07s ease-out forwards;
}
.ok-result-boom-ring.r3 {
width: 340px; height: 340px;
border-color: #fbbf24;
animation: okBoomRing 0.85s 0.14s ease-out forwards;
}
/* r4는 모바일에서 생략 (성능) */
@keyframes okBoomRing {
0% { transform: translate(-50%,-50%) scale(0) translateZ(0); opacity: 1; }
70% { opacity: 0.7; }
100% { transform: translate(-50%,-50%) scale(1) translateZ(0); opacity: 0; }
}
/* ── 당첨 오버레이 팝인 ── */
.ok-tear-result-overlay.boom-in {
animation: okOverlayBoomIn 0.45s cubic-bezier(.2,.8,.3,1) both;
will-change: transform, opacity;
}
@keyframes okOverlayBoomIn {
0% { opacity: 0; transform: scale(0.92) translateZ(0); }
100% { opacity: 1; transform: scale(1) translateZ(0); }
}
/* ── 당첨 카드 진동 (펑 직후) ── */
@keyframes okPrizeCardPulse {
0%,100% { box-shadow: 0 0 0 1px rgba(251,191,36,.1), 0 0 40px rgba(139,92,246,.5), 0 0 80px rgba(251,191,36,.12), 0 20px 60px rgba(0,0,0,.8); }
50% { box-shadow: 0 0 0 4px rgba(251,191,36,.4), 0 0 80px rgba(139,92,246,.9), 0 0 140px rgba(251,191,36,.3), 0 20px 60px rgba(0,0,0,.8); }
}
.ok-result-prize-card.pulsing {
animation: okPrizeCardPulse 0.6s ease-in-out 3;
}
/* 하단 힌트 텍스트 */
.ok-tear-hint {
text-align: center; color:#64748b; font-size:12px;
line-height: 1.8; margin: 6px 0 0; /* 종이와 간격 최소화 */
flex-shrink: 0;
}
.ok-tear-hint b { color:#94a3b8; }
/* ══ 뜯기 힌트 카드 섹션 ══════════════════════════════════
종이를 뜯을수록 번호 자릿수가 공개되면서
해당 구간의 상품 후보를 부채꼴 카드로 보여줌
═══════════════════════════════════════════════════════ */
#tearHintCards {
position: relative;
z-index: 1;
/* 높이는 JS에서 count별로 동적 설정 */
width: min(500px, 94vw); /* ok-tear-stage와 폭 맞춤 */
height: 230px; /* 기본값, JS에서 override */
flex-shrink: 0;
margin: 0; /* 여백 0 — 종이와 밀착 */
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity .4s ease;
overflow: visible;
}
#tearHintCards.visible { opacity: 1; }
/* 힌트 라벨 — 제거됨(display:none) */
.tear-hint-label { display: none; }
/* ══ 개별 힌트 카드 ══
카드 크기/위치는 JS에서 count 기반으로 직접 제어
CSS는 기본 스타일만 담당
══════════════════════ */
.tear-hint-card {
position: absolute;
bottom: 0;
/* 기본 크기 — JS에서 count별로 override */
width: 88px; height: 124px;
border-radius: 11px;
background: linear-gradient(160deg, #1e2340 0%, #0d1224 100%);
border: 1.5px solid rgba(251,191,36,.38);
box-shadow:
0 8px 24px rgba(0,0,0,.8),
0 0 0 1px rgba(255,255,255,.05) inset;
overflow: hidden;
display: flex; flex-direction: column;
align-items: center; justify-content: flex-start;
opacity: 0;
will-change: transform, opacity;
transition: opacity .32s ease, transform .32s cubic-bezier(.34,1.4,.64,1);
}
/* 카드 내 상품 이미지 영역 */
.tear-hint-card-img {
width: 100%;
flex: 1;
object-fit: cover;
display: block;
min-height: 0;
}
.tear-hint-card-img-placeholder {
flex: 1; width: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 24px;
background: linear-gradient(135deg, #1e2a4a, #0f172a);
min-height: 0;
}
/* ── 카드 하단 번호 배지 ── */
.tear-hint-card-rank {
flex-shrink: 0;
width: 100%;
/* 더 진한 그라데이션 + 위쪽 블러 영역 확대 */
background: linear-gradient(180deg,
rgba(5,5,20,.0) 0%,
rgba(5,5,20,.55) 35%,
rgba(5,5,20,.95) 100%);
padding: 10px 6px 8px; /* 위 padding 늘려 글자 공간 확보 */
text-align: center;
font-size: 14px; font-weight: 900;
color: #fde68a; /* 밝은 금색 */
text-shadow:
0 0 8px rgba(251,191,36,.9),
0 0 16px rgba(251,191,36,.5),
0 1px 3px rgba(0,0,0,1);
letter-spacing: .01em;
line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 1개 단독 / 부채꼴 중앙 카드 강조 */
.tear-hint-card.center-card {
border-color: rgba(251,191,36,.75);
box-shadow:
0 12px 32px rgba(251,191,36,.30),
0 4px 16px rgba(0,0,0,.8),
0 0 0 1px rgba(255,255,255,.12) inset;
}
/* 부채꼴 일반 카드 */
.tear-hint-card.fan-card {
border-color: rgba(255,255,255,.28);
box-shadow:
0 6px 20px rgba(0,0,0,.7),
0 0 0 1px rgba(255,255,255,.06) inset;
}
/* 피라미드 위 행 카드 */
.tear-hint-card.zz-up {
border-color: rgba(251,191,36,.6);
box-shadow:
0 8px 26px rgba(251,191,36,.18),
0 4px 14px rgba(0,0,0,.75),
0 0 0 1px rgba(255,255,255,.1) inset;
}
/* 지그재그 아래 카드 (미사용이지만 유지) */
.tear-hint-card.zz-down {
border-color: rgba(255,255,255,.2);
box-shadow:
0 4px 16px rgba(0,0,0,.65),
0 0 0 1px rgba(255,255,255,.04) inset;
filter: brightness(0.9);
}
/* 번호 공개 표시줄 — 제거 */
.tear-num-reveal-bar {
display: none;
}
.tear-num-digit {
width: 28px; height: 36px;
border-radius: 6px;
background: rgba(255,255,255,.06);
border: 1.5px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 900; color: #64748b;
transition: all .3s cubic-bezier(.34,1.4,.64,1);
}
.tear-num-digit.revealed {
background: rgba(251,191,36,.15);
border-color: rgba(251,191,36,.6);
color: #fbbf24;
text-shadow: 0 0 12px rgba(251,191,36,.8);
transform: scale(1.1);
}
/* 반쯤 공개 중 — 숫자가 보이지만 아직 흐릿 */
.tear-num-digit.revealing {
background: rgba(251,191,36,.06);
border-color: rgba(251,191,36,.3);
color: rgba(251,191,36,.45);
text-shadow: 0 0 8px rgba(251,191,36,.3);
transform: scale(1.05);
}
.tear-num-digit.hidden-digit {
color: #334155;
}
/* 배경 장식 티켓 */
.ok-tear-bg-deco { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.ok-tear-bg-ticket {
position:absolute; opacity:.06;
background:#e8820c; border-radius:8px;
transform-origin:center;
}
/* 한꺼번에 뽑기 바 */
.ok-bulk-bar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
background: linear-gradient(145deg, #1e2235, #252840);
border: 1px solid rgba(99,102,241,.2); border-radius: 14px;
padding: 14px 18px; margin-top: 14px;
}
.ok-bulk-label { font-size: 13px; font-weight: 800; color: #94a3b8; white-space: nowrap; }
.ok-bulk-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ok-bulk-btn {
padding: 9px 18px; border-radius: 12px;
background: linear-gradient(135deg, #4f46e5, #8b5cf6);
border: none; color: #fff; font-size: 13px; font-weight: 900;
cursor: pointer; font-family: inherit;
box-shadow: 0 4px 14px rgba(139,92,246,.35);
transition: filter .15s, transform .1s;
}
.ok-bulk-btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.ok-bulk-btn:active { transform: translateY(0); }
.ok-bulk-btn:disabled { filter: grayscale(.7); opacity: .5; cursor: not-allowed; transform: none; }
/* ═══ 결과 모달 ═══ */
.ok-result-modal {
position: fixed; inset: 0; z-index: 11000;
display: flex; align-items: center; justify-content: center;
}
.ok-result-modal[hidden] { display: none !important; }
.ok-result-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
}
.ok-result-container {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center;
gap: 16px; padding: 20px 20px;
width: min(480px, 96vw);
}
/* 종이 뒤집기 */
.ok-single-result { perspective: 1000px; }
.ok-paper-flip {
width: 200px; height: 300px;
transform-style: preserve-3d;
transition: transform .8s cubic-bezier(.4,.2,.2,1);
position: relative;
border-radius: 18px;
cursor: pointer;
}
.ok-paper-flip.flipped { transform: rotateY(180deg); }
.ok-paper-front, .ok-paper-back {
position: absolute; inset: 0; border-radius: 18px;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center;
overflow: hidden;
}
.ok-paper-front {
background: linear-gradient(160deg, #3b0764, #4c1d95, #1e1b4b);
border: 2px solid rgba(139,92,246,.6);
box-shadow: 0 0 40px rgba(139,92,246,.4), 0 20px 60px rgba(0,0,0,.6);
}
/* 앞면 쿠지 종이 디자인: 이미지로 교체하려면 .ok-paper-design에 background-image 설정 */
.ok-paper-design {
display: flex; flex-direction: column; align-items: center; gap: 8px;
/* background-image: url('/images/kuji-paper-front.png'); background-size:cover; */
}
.ok-paper-stamp { font-size: 36px; opacity: .7; }
.ok-paper-num { font-size: 32px; font-weight: 900; color: #c4b5fd; letter-spacing: -.03em; }
.ok-paper-label { font-size: 11px; font-weight: 900; color: rgba(196,181,253,.6); letter-spacing: .2em; text-transform: uppercase; }
.ok-paper-back {
transform: rotateY(180deg);
background: linear-gradient(160deg, #0f172a, #1e1b4b);
border: 2px solid rgba(99,102,241,.5);
box-shadow: 0 0 40px rgba(99,102,241,.3), 0 20px 60px rgba(0,0,0,.6);
}
/* 뒷면 당첨 이미지: id="okResultImg" src에 자동 설정됨 */
.ok-result-rank {
font-size: 14px; font-weight: 900; color: #818cf8;
background: rgba(99,102,241,.2); padding: 3px 12px; border-radius: 999px;
letter-spacing: .1em; margin-bottom: 8px;
}
.ok-result-img { width: 100px; height: 100px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; }
.ok-result-name { font-size: 16px; font-weight: 900; color: #f1f5f9; text-align: center; padding: 0 12px; }
.ok-result-sub { font-size: 12px; color: #94a3b8; font-weight: 700; margin-top: 4px; text-align: center; }
/* 종이 뒤집기 힌트 */
.ok-flip-hint {
font-size: 13px; color: #c4b5fd; font-weight: 700;
animation: okPulse 1.5s ease-in-out infinite;
}
@keyframes okPulse { 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
/* 다중 결과 */
.ok-bulk-result { width: 100%; }
.ok-bulk-result-title { font-size: 18px; font-weight: 900; color: #f1f5f9; text-align: center; margin-bottom: 16px; }
.ok-bulk-result-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 12px;
max-height: 60vh; overflow-y: auto;
}
.ok-bulk-result-item {
background: linear-gradient(145deg, #1e2235, #252840);
border: 1px solid rgba(99,102,241,.25); border-radius: 14px;
padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
animation: okFadeIn .4s ease both;
}
@keyframes okFadeIn { from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } }
.ok-bulk-result-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.ok-bulk-result-rank { font-size: 10px; font-weight: 900; color: #8b5cf6; letter-spacing: .06em; }
.ok-bulk-result-name { font-size: 12px; font-weight: 800; color: #f1f5f9; text-align: center; line-height: 1.3; }
/* 결과 버튼 */
.ok-result-actions { display: flex; gap: 10px; }
.ok-result-close-btn {
padding: 13px 36px; border-radius: 14px; border: none;
background: linear-gradient(135deg, #4f46e5, #8b5cf6); color: #fff;
font-size: 15px; font-weight: 900; cursor: pointer; font-family: inherit;
box-shadow: 0 6px 20px rgba(139,92,246,.4);
transition: filter .15s, transform .1s;
}
.ok-result-close-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.ok-result-again-btn {
padding: 13px 24px; border-radius: 14px;
border: 1.5px solid rgba(139,92,246,.4); background: transparent;
color: #c4b5fd; font-size: 15px; font-weight: 900; cursor: pointer; font-family: inherit;
transition: background .15s, border-color .15s;
}
.ok-result-again-btn:hover { background: rgba(139,92,246,.15); border-color: #8b5cf6; }
.ok-result-again-btn.hidden { display:none; }
/* 폭죽 캔버스 */
.ok-confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* ── 내 대기열 플로팅 버튼 (완전 리메이크) ── */
#okQueueFloatBtn {
display: none;
position: fixed;
bottom: calc(var(--fp, 56px) + 14px); /* 왼쪽 여백(14px)과 동일한 하단 간격 */
left: 14px;
z-index: 9500;
cursor: pointer;
border: none;
background: transparent;
padding: 0;
transition: transform .2s, filter .2s;
animation: floatBtnIn .4s cubic-bezier(.22,.61,.36,1);
filter: drop-shadow(0 6px 20px rgba(79,70,229,.55));
}
@media (min-width: 601px) {
#okQueueFloatBtn { bottom: 28px; }
}
#okQueueFloatBtn.show { display: block !important; }
/* 쿠지 선택창(okDetailView)이 열려있을 때 내 차례 버튼 숨김 */
body:has(#okDetailView:not(.hidden)) #okQueueFloatBtn { display: none !important; }
/* 대기열 화면(okQueueView)이 열려있을 때 내 차례 플로팅 버튼 숨김 — 화면 내 자체 버튼으로 대체 */
body:has(#okQueueView:not(.hidden)) #okQueueFloatBtn { display: none !important; }
/* 라스트원 오버레이 표시 중 대기열 플로팅 버튼 강제 숨김 (소켓 이벤트로 show 클래스가 붙어도 무시) */
body:has(#lastOneRevealOverlay) #okQueueFloatBtn { display: none !important; }
#okQueueFloatBtn:hover { transform: translateY(-4px); filter: drop-shadow(0 10px 28px rgba(79,70,229,.75)); }
#okQueueFloatBtn:active { transform: scale(.96); }
#okQueueFloatBtn.active-turn { filter: drop-shadow(0 6px 20px rgba(16,185,129,.6)); animation: floatBtnIn .4s cubic-bezier(.22,.61,.36,1), floatPulse 2s ease-in-out infinite; }
#okQueueFloatBtn.active-turn:hover { filter: drop-shadow(0 10px 28px rgba(16,185,129,.85)); }
/* 버튼 내부 카드 */
.okfloat-card {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px 11px 13px;
border-radius: 18px;
background: linear-gradient(135deg, #1a1740 0%, #2d2a6e 60%, #3730a3 100%);
border: 1.5px solid rgba(139,92,246,.5);
min-width: 160px;
max-width: 220px;
position: relative;
overflow: hidden;
}
.okfloat-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 55%);
pointer-events: none;
border-radius: inherit;
}
#okQueueFloatBtn.active-turn .okfloat-card {
background: linear-gradient(135deg, #052e16 0%, #064e3b 55%, #065f46 100%);
border-color: rgba(52,211,153,.55);
}
/* 아이콘 영역 */
.okfloat-icon-wrap {
width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
background: rgba(99,102,241,.2);
border: 1px solid rgba(139,92,246,.35);
display: flex; align-items: center; justify-content: center;
font-size: 18px; line-height: 1;
transition: background .2s;
}
#okQueueFloatBtn.active-turn .okfloat-icon-wrap {
background: rgba(16,185,129,.2);
border-color: rgba(52,211,153,.35);
}
/* 텍스트 영역 */
.okfloat-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.okfloat-label {
font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: rgba(165,180,252,.65); white-space: nowrap;
}
#okQueueFloatBtn.active-turn .okfloat-label { color: rgba(110,231,183,.65); }
.okfloat-status {
font-size: 13px; font-weight: 900; white-space: nowrap;
color: #e0e7ff; letter-spacing: -.02em; line-height: 1.2;
}
#okQueueFloatBtn.active-turn .okfloat-status { color: #6ee7b7; }
/* 화살표 */
.okfloat-arrow {
font-size: 16px; color: rgba(165,180,252,.45); flex-shrink: 0;
transition: transform .2s, color .2s;
margin-left: 2px;
}
#okQueueFloatBtn:hover .okfloat-arrow { transform: translateX(3px); color: rgba(165,180,252,.9); }
#okQueueFloatBtn.active-turn .okfloat-arrow { color: rgba(110,231,183,.5); }
#okQueueFloatBtn.active-turn:hover .okfloat-arrow { color: rgba(110,231,183,.95); }
/* ★ [SESSION-FIX] 응답 대기 모드 — 플로팅버튼 스타일 (노란색 긴박감 테마) */
/* 카드 배경: 노란색 계열로 변환 */
#okQueueFloatBtn.resp-waiting .okfloat-card {
background: linear-gradient(135deg, #1c1400 0%, #2d1f00 55%, #3d2800 100%);
border-color: rgba(251,191,36,.6);
}
/* 아이콘 래퍼 */
#okQueueFloatBtn.resp-waiting .okfloat-icon-wrap {
background: rgba(251,191,36,.2);
border-color: rgba(251,191,36,.4);
}
/* 라벨 */
#okQueueFloatBtn.resp-waiting .okfloat-label { color: rgba(251,191,36,.75); }
/* 상태 텍스트 */
#okQueueFloatBtn.resp-waiting .okfloat-status {
color: #fbbf24; font-size: 12px; font-weight: 900;
}
/* 상태 점 */
#okQueueFloatBtn.resp-waiting .okfloat-dot {
background: #fbbf24;
box-shadow: 0 0 0 0 rgba(251,191,36,.6);
animation: dotPulseResp 1.0s ease-in-out infinite;
}
@keyframes dotPulseResp {
0% { box-shadow: 0 0 0 0 rgba(251,191,36,.7); }
60% { box-shadow: 0 0 0 7px rgba(251,191,36,.0); }
100% { box-shadow: 0 0 0 0 rgba(251,191,36,.0); }
}
/* 화살표 */
#okQueueFloatBtn.resp-waiting .okfloat-arrow { color: rgba(251,191,36,.5); }
#okQueueFloatBtn.resp-waiting:hover .okfloat-arrow { color: rgba(251,191,36,.95); }
/* 버튼 전체 glow + 애니메이션 */
#okQueueFloatBtn.resp-waiting {
filter: drop-shadow(0 6px 18px rgba(251,191,36,.45));
animation: floatBtnIn .4s cubic-bezier(.22,.61,.36,1), floatPulseResp 1.8s ease-in-out infinite;
}
@keyframes floatPulseResp {
0%, 100% { filter: drop-shadow(0 6px 18px rgba(251,191,36,.45)); }
50% { filter: drop-shadow(0 8px 28px rgba(251,191,36,.85)); }
}
#okQueueFloatBtn.resp-waiting:hover {
filter: drop-shadow(0 10px 26px rgba(251,191,36,.8));
}
/* 상태 점 (펄스) */
.okfloat-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
background: rgba(139,92,246,.7);
margin-left: -4px; margin-right: -2px;
}
#okQueueFloatBtn.active-turn .okfloat-dot {
background: #34d399;
box-shadow: 0 0 0 0 rgba(52,211,153,.6);
animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); }
60% { box-shadow: 0 0 0 6px rgba(52,211,153,.0); }
100% { box-shadow: 0 0 0 0 rgba(52,211,153,.0); }
}
@keyframes floatBtnIn {
from { opacity: 0; transform: translateX(-50px) scale(.82); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes floatPulse {
0%, 100% { filter: drop-shadow(0 6px 20px rgba(16,185,129,.6)); }
50% { filter: drop-shadow(0 8px 32px rgba(16,185,129,.95)); }
}
/* ══ 플로팅 모래시계 타이머 위젯 ══ */
#okFloatTimerWidget {
position: fixed;
/* ★ [UI수정] 헤더(--hdr-total) + 탭바(--tab-h) 바로 아래 8px 여백
모바일(≤560px): 탭바 hidden → --tab-h 무시, PC: 탭바 아래 배치 */
top: calc(var(--hdr-total) + var(--timer-tab-offset, 0px) + 8px);
left: 16px;
z-index: 395; /* 액션바(394)보다 위, 탭바(400) 아래 */
display: none;
flex-direction: row;
align-items: center;
gap: 10px;
background: rgba(10,20,40,.88);
border: 2px solid rgba(52,211,153,.55);
border-radius: 20px;
padding: 10px 18px 10px 14px;
box-shadow: 0 4px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(52,211,153,.3);
cursor: default;
backdrop-filter: blur(12px);
transition: border-color .5s ease, box-shadow .5s ease, background .5s ease;
}
/* 모바일(≤560px): 탭바 없음 → tab-offset = 0, 단 포인트바(--mpb-h) + 액션바(--ok-action-bar-h) 아래로 */
@media (max-width: 560px) {
#okFloatTimerWidget {
--timer-tab-offset: 0px;
/* ★ [TIMER-ALIGN] 전체선택 버튼 왼쪽 끝(inner padding 10px)에 나란히 정렬 */
left: 10px;
/* ★ [TIMER-POS-FIX] CSS 기본값: 헤더 + 포인트바 + 액션바(약 56px) + 간격 아래
JS _okAdjustTimerWidgetTop()이 실측값으로 덮어쓰므로 초기 가림 방지용
대기열(액션바 없음): 헤더+포인트바 바로 아래(+0px)
쿠지선택(액션바 있음): 버튼바 바로 아래(+1px) */
top: calc(var(--hdr-total) + var(--mpb-h, 0px) + var(--ok-action-bar-h, 56px) + 1px);
/* 30% 축소 */
padding: 7px 13px 7px 10px;
gap: 7px;
border-radius: 14px;
}
.ok-float-timer-icon { font-size: 18px !important; }
.ok-float-timer-text { font-size: 20px !important; }
.ok-float-timer-label { font-size: 9px !important; }
/* ★ [QUEUE-TIMER-POS] 대기열: 액션바 없으므로 헤더+포인트바 바로 아래 4px */
body:has(#okQueueView:not(.hidden)) #okFloatTimerWidget {
top: calc(var(--hdr-total) + var(--mpb-h, 0px) + 4px);
}
}
/* PC(≥561px): 상단 탭바 표시 → tab-offset = --tab-h */
@media (min-width: 561px) {
#okFloatTimerWidget { --timer-tab-offset: var(--tab-h, 47px); left: 20px; }
}
/* ★ [MOBILE-WIDE] 561~750px(갤폴드/갤탭): 모바일처럼 하단탭 → 상단탭 offset 없음
단, 포인트바(--mpb-h)는 이 범위에서도 표시되므로 top에 반영 */
@media (min-width: 561px) and (max-width: 750px) {
#okFloatTimerWidget {
--timer-tab-offset: 0px;
/* ★ [TIMER-ALIGN] 전체선택 버튼 왼쪽 끝에 나란히 정렬 */
left: 10px;
/* ★ [TIMER-POS-FIX] 액션바(약 56px) 아래 CSS 기본값 */
top: calc(var(--hdr-total) + var(--mpb-h, 0px) + var(--ok-action-bar-h, 56px) + 1px);
}
/* ★ [QUEUE-TIMER-POS] 대기열: 액션바 없으므로 헤더+포인트바 바로 아래 4px */
body:has(#okQueueView:not(.hidden)) #okFloatTimerWidget {
top: calc(var(--hdr-total) + var(--mpb-h, 0px) + 4px);
}
}
#okFloatTimerWidget.show { display: flex !important; }
/* ★ [SESSION-FIX] 응답 대기 중에는 모래시계 위젯 완전 숨김 */
#okFloatTimerWidget.resp-waiting { display: none !important; }
#okFloatTimerWidget.warn {
border-color: rgba(251,191,36,.65);
box-shadow: 0 4px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(251,191,36,.3);
background: rgba(25,18,5,.88);
}
#okFloatTimerWidget.danger {
border-color: rgba(248,113,113,.75);
box-shadow: 0 4px 24px rgba(248,113,113,.3), 0 0 18px rgba(248,113,113,.2);
background: rgba(30,8,8,.88);
animation: ok-float-danger-pulse 1s ease-in-out infinite;
}
@keyframes ok-float-danger-pulse {
0%,100% { box-shadow: 0 4px 24px rgba(248,113,113,.3), 0 0 18px rgba(248,113,113,.2); }
50% { box-shadow: 0 4px 32px rgba(248,113,113,.55), 0 0 28px rgba(248,113,113,.35); }
}
.ok-float-timer-icon { font-size: 26px; line-height: 1; animation: ok-float-swing 1.8s ease-in-out infinite; flex-shrink: 0; }
@keyframes ok-float-swing { 0%,100%{ transform: rotate(-12deg); } 50%{ transform: rotate(12deg); } }
.ok-float-timer-body { display: flex; flex-direction: column; gap: 2px; }
.ok-float-timer-text {
font-size: 28px;
font-weight: 900;
color: #34d399;
letter-spacing: .04em;
line-height: 1;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 12px rgba(52,211,153,.55);
transition: color .4s ease, text-shadow .4s ease;
}
.ok-float-timer-text.warn { color: #fbbf24; text-shadow: 0 0 12px rgba(251,191,36,.55); }
.ok-float-timer-text.danger { color: #f87171; text-shadow: 0 0 14px rgba(248,113,113,.7); animation: ok-timer-blink .6s steps(1) infinite; }
.ok-float-timer-label { font-size: 10px; color: rgba(255,255,255,.45); font-weight: 600; letter-spacing: .04em; line-height: 1; }
@keyframes ok-timer-blink { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
/* ══ 포인트 안내 팝업 ══ */
#pointInfoBackdrop {
position: fixed; inset: 0; z-index: 9800;
background: rgba(0,0,0,.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
#pointInfoCard {
position: fixed;
z-index: 9801;
left: 50%; transform: translateX(-50%);
top: 50%;
margin-top: -10px;
transform: translate(-50%, -50%);
width: min(420px, calc(100vw - 32px));
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
animation: ptInfoIn .22s cubic-bezier(.34,1.45,.64,1);
}
@keyframes ptInfoIn {
from { opacity:0; transform: translate(-50%,-46%) scale(.94); }
to { opacity:1; transform: translate(-50%,-50%) scale(1); }
}
#pointInfoClose {
position: absolute; top: 12px; right: 14px;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.7); border-radius: 50%;
width: 28px; height: 28px; font-size: 13px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
#pointInfoClose:hover { background: rgba(255,255,255,.18); }
/* 팝업 내부 콘텐츠 공통 */
.pi-wrap {
padding: 28px 24px 24px;
}
.pi-icon {
font-size: 36px; line-height: 1; margin-bottom: 10px; display: block;
}
.pi-title {
font-size: 18px; font-weight: 900; margin-bottom: 4px; line-height: 1.2;
}
.pi-sub {
font-size: 12px; font-weight: 600; margin-bottom: 16px; opacity: .65;
}
.pi-desc {
font-size: 13.5px; line-height: 1.7; margin-bottom: 18px; opacity: .85;
}
.pi-uses {
display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;
}
.pi-use-item {
display: flex; align-items: flex-start; gap: 10px;
background: rgba(255,255,255,.05); border-radius: 10px;
padding: 10px 13px;
border: 1px solid rgba(255,255,255,.07);
}
.pi-use-icon { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.pi-use-text { font-size: 12.5px; line-height: 1.5; }
.pi-use-text strong { display: block; font-weight: 800; margin-bottom: 1px; }
.pi-note {
font-size: 11px; opacity: .5; line-height: 1.5; margin-bottom: 16px;
}
.pi-btn {
width: 100%; padding: 13px; border-radius: 12px;
border: none; font-size: 14px; font-weight: 800;
cursor: pointer; transition: opacity .15s, transform .1s;
}
.pi-btn:hover { opacity: .88; }
.pi-btn:active { transform: scale(.97); }
/* 쿠지 테마 */
.pi-kuji { background: linear-gradient(135deg,#1a1740,#2d2a6e,#3730a3); color:#fff; }
.pi-kuji .pi-title { background: linear-gradient(90deg,#a5b4fc,#818cf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pi-kuji .pi-btn { background: linear-gradient(135deg,#4f46e5,#6366f1); color:#fff; box-shadow:0 4px 18px rgba(99,102,241,.4); }
.pi-kuji .pi-how-title { color: #a5b4fc; }
.pi-kuji .pi-how-item { border-color: rgba(99,102,241,.25); background: rgba(99,102,241,.1); }
/* 포인트 테마 */
.pi-point { background: linear-gradient(135deg,#1c1407,#2d1f00,#3d2a00); color:#fff; }
.pi-point .pi-title { background: linear-gradient(90deg,#fcd34d,#fbbf24); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pi-point .pi-btn { background: linear-gradient(135deg,#d97706,#f59e0b); color:#fff; box-shadow:0 4px 18px rgba(217,119,6,.4); }
.pi-point .pi-how-title { color: #fcd34d; }
.pi-point .pi-how-item { border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.08); }
/* 온라인쿠지 테마 */
.pi-okuji { background: linear-gradient(135deg,#1a0a1a,#2d0f2d,#3d1060); color:#fff; }
.pi-okuji .pi-title { background: linear-gradient(90deg,#f9a8d4,#f472b6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pi-okuji .pi-btn { background: linear-gradient(135deg,#be185d,#ec4899); color:#fff; box-shadow:0 4px 18px rgba(236,72,153,.4); }
.pi-okuji .pi-how-title { color: #f9a8d4; }
.pi-okuji .pi-how-item { border-color: rgba(244,114,182,.25); background: rgba(244,114,182,.08); }
/* 온라인쿠지 포인트 안내 → '바로 충전하기' 보조 버튼 */
.pi-charge-btn {
margin-top: 10px;
background: linear-gradient(135deg,#4f46e5,#7c3aed) !important;
box-shadow: 0 4px 18px rgba(124,58,237,.45) !important;
display: flex; align-items: center; justify-content: center; gap: 6px;
font-size: 14px !important;
}
/* 구하는 방법 섹션 */
.pi-how-title {
font-size: 11px; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; margin-bottom: 7px; margin-top: 4px;
}
.pi-how-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pi-how-item {
display: flex; align-items: center; gap: 9px;
border-radius: 8px; padding: 8px 11px;
border: 1px solid rgba(255,255,255,.08);
font-size: 12px; line-height: 1.45;
}
.pi-how-icon { font-size: 16px; flex-shrink: 0; }
/* ══ 푸터 (ms-footer 공용) ══ */
.ms-footer {
background: #0f172a;
border-top: 1px solid #1e293b;
margin-top: 0;
flex-shrink: 0; /* body flex column에서 footer 압축 방지 */
/* 모바일 전용: 하단 탭바 높이만큼 여백 확보 (PC는 탭바 없으므로 0) */
padding-bottom: 0;
}
@media (max-width: 560px) {
.ms-footer {
/* 모바일: 탭바 + safe-area 여백 — body padding 제거했으므로 footer만으로 처리 */
margin-top: 0;
padding-bottom: var(--bottom-nav, 56px); /* navBarView가 홈바 처리 */
}
}
@media (min-width: 561px) and (max-width: 750px) {
.ms-footer {
/* Galaxy Fold 펼침(561-750px): 터치 기기는 하단탭 표시 → 탭바+safe-area 여백 */
padding-bottom: var(--bottom-nav, 56px); /* navBarView가 홈바 처리 */
}
}
.ms-footer-inner {
max-width: 1200px; margin: 0 auto;
/* 세로 여백 최소화: 위아래 12px로 압축 */
padding: 12px 24px 10px;
}
.ms-footer-top {
display: flex; align-items: center;
justify-content: space-between; gap: 10px; flex-wrap: wrap;
/* 하단 구분선+여백 축소 */
padding-bottom: 8px; border-bottom: 1px solid #1e293b; margin-bottom: 8px;
}
.ms-footer-brand { display: flex; align-items: center; gap: 8px; }
.ms-footer-brand-mark {
width: 26px; height: 26px; border-radius: 7px;
background: linear-gradient(135deg, var(--brand), var(--accent));
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: #fff; font-weight: 900; flex-shrink: 0;
}
.ms-footer-brand-name { font-size: 13px; font-weight: 900; color: #e2e8f0; }
.ms-footer-brand-sub { font-size: 10px; color: #475569; margin-top: 1px; }
.ms-footer-links { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.ms-footer-links a {
font-size: 11px; color: #475569;
transition: color .15s; text-decoration: none; white-space: nowrap;
}
.ms-footer-links a:hover { color: #94a3b8; text-decoration: underline; }
/* 사업자 정보: 세로 공간 최소화 — 2열 그리드, 줄간격 축소 */
.ms-footer-biz {
display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 1px 20px; margin-bottom: 8px;
}
.ms-footer-biz-item {
display: flex; align-items: baseline; gap: 4px;
font-size: 11px; color: #475569; line-height: 1.5;
}
.ms-footer-biz-item strong {
color: #64748b; font-weight: 700; white-space: nowrap;
flex-shrink: 0; font-size: 10px; letter-spacing: .02em;
}
.ms-footer-copy {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 6px;
font-size: 10.5px; color: #334155;
padding-top: 8px; border-top: 1px solid #1e293b;
}
.ms-footer-pg {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 5px;
background: #1e293b; border: 1px solid #334155;
font-size: 10px; color: #64748b; font-weight: 600;
}
/* ══ 이벤트 탭 활성화 시: 푸터 위 여백을 크게 줘서 사업자정보가 화면 밖으로 내려감 ══ */
body.event-tab-active .ms-footer {
margin-top: 100vh;
}
/* ══ 반응형 헤더 (중복 규칙 — 위 공통 @style 블록이 우선) ══ */
@media (max-width: 480px) {
/* 모바일: 탭바 숨김 (이미 560px에서 숨김됨, 중복 보험용) */
.lk-tabbar { display: none !important; }
}
/* ══ 공지 모달 ══ */
/* ★ [UI-FIX] notice-modal z-index: 헤더(400)/PC탭바(400)/모바일탭바(600) 모두 위로 */
.notice-modal{
position:fixed;inset:0;display:none;
align-items:center;justify-content:center;
z-index:700; /* 헤더(400) + PC탭바(400) + 모바일탭바(600) 전부 위 */
/* ★ 모바일: 하단탭바(56px+safe-area) 위, 상단(헤더60px+탭바~45px) 아래 가용영역 안에 배치 */
padding-top: calc(var(--hdr-total, 60px) + 8px);
padding-bottom: calc(var(--bottom-nav, 56px) + 8px); /* navBarView가 홈바 처리 */
box-sizing: border-box;
}
.notice-modal.show{display:flex}
.notice-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px)}
.notice-card{
position:relative;width:min(720px,92vw);
/* ★ max-height: 고정 vh 대신 실제 가용 영역(헤더+탭바 제외) 기준으로 계산 */
max-height: calc(100vh
- var(--hdr-total, 60px) /* 상단 헤더 */
- 45px /* PC 탭바 높이(약 45px) */
- var(--bottom-nav, 56px) /* 하단 탭바(모바일) */
- env(safe-area-inset-bottom, 0px)
- 32px /* 상하 여백 */
);
overflow:auto;
background:#fff;border-radius:20px;
border:1.5px solid rgba(99,102,241,.2);
box-shadow:0 32px 80px rgba(99,102,241,.2), 0 4px 20px rgba(0,0,0,.08);
padding:24px 26px;
}
/* PC (561px 이상): 하단탭바 없음 → padding-bottom 제거, PC 탭바 높이 반영 */
@media (min-width: 561px) {
.notice-modal {
padding-bottom: 16px; /* PC는 하단탭 없음 */
}
.notice-card {
max-height: calc(100vh
- var(--hdr-total, 60px)
- 45px /* PC 탭바 */
- 32px
);
}
}
/* ★ [MOBILE-WIDE] 561~750px(갤폴드/갤탭): 하단탭 있음 → 모바일 기준 복원 */
@media (min-width: 561px) and (max-width: 750px) {
.notice-modal {
padding-bottom: calc(var(--bottom-nav, 56px) + 8px); /* navBarView가 홈바 처리 */
}
.notice-card {
max-height: calc(100vh
- var(--hdr-total, 60px)
- var(--bottom-nav, 56px)
- env(safe-area-inset-bottom, 0px)
- 24px
);
}
}
/* 모바일 (560px 이하): 하단탭바 있음 */
@media (max-width: 560px) {
.notice-card {
width: 96vw;
padding: 16px 14px;
border-radius: 16px;
max-height: calc(100vh
- var(--hdr-total, 60px)
- var(--bottom-nav, 56px)
- env(safe-area-inset-bottom, 0px)
- 24px
);
}
.notice-header .title { font-size: 16px; }
}
.notice-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.notice-header .title{
font-size:19px;font-weight:900;
background:linear-gradient(135deg,#6366f1,#8b5cf6);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.notice-close{
width:32px;height:32px;border-radius:10px;
background:#f1f5f9;border:0;cursor:pointer;
font-size:16px;color:#64748b;
display:flex;align-items:center;justify-content:center;
transition:background .15s;
}
.notice-close:hover{background:#e2e8f0;color:#374151;}
.notice-body{line-height:1.7;font-size:14px;color:#334155}
.notice-body h3{margin:16px 0 8px;font-size:15px;font-weight:900;color:#1e293b}
.notice-body hr{border:0;border-top:1px solid #f1f5f9;margin:12px 0}
/* ================================================================
★ MAINSHOP 스타일 통합 오버라이드 (shop.html 전용)
================================================================ */
/* ── 탭바: 고급 중앙정렬 스타일 (PC 전용 — 모바일은 display:none 유지) ── */
/* 공통 스타일 (display 제외) */
.lk-tabbar {
background: var(--surface) !important;
border-bottom: 1px solid var(--border) !important;
box-shadow: 0 2px 12px rgba(80,70,229,.08) !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
flex-shrink: 0 !important;
justify-content: center !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
/* ★ display:flex는 PC(>560px)에서만 — 모바일 display:none을 덮어쓰지 않음 */
@media (min-width: 561px) {
.lk-tabbar {
display: flex !important;
}
/* PC: 하단 탭바 숨김 — 상단 탭바로만 이동 */
#bottomNavBar {
display: none !important;
}
}
/* ★ [MOBILE-WIDE] 561~750px(갤폴드/갤탭): 상단탭 숨김 + 하단탭 복원 */
@media (min-width: 561px) and (max-width: 750px) {
.lk-tabbar {
display: none !important;
}
#bottomNavBar {
display: flex !important;
}
}
.lk-tabbar::-webkit-scrollbar { display: none !important; }
/* 탭 버튼 컨테이너: 내부 버튼들만 flex */
.lk-tabbar .tab-btn {
flex: 0 0 auto !important;
}
.tab-btn {
padding: 14px 18px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--text-3) !important;
border: none !important;
border-bottom: 2.5px solid transparent !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
transition: color .18s, border-color .18s, background .18s !important;
white-space: nowrap !important;
letter-spacing: -0.01em !important;
position: relative !important;
}
.tab-btn::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important; left: 50% !important;
width: 0 !important; height: 2.5px !important;
background: var(--brand) !important;
border-radius: 2px 2px 0 0 !important;
transition: width .22s cubic-bezier(.4,0,.2,1), left .22s cubic-bezier(.4,0,.2,1) !important;
}
.tab-btn:hover {
color: var(--brand) !important;
background: rgba(80,70,229,.05) !important;
border-bottom-color: transparent !important;
}
.tab-btn:hover::after {
width: 60% !important; left: 20% !important;
}
.tab-btn.active {
color: var(--brand) !important;
border-bottom-color: transparent !important;
background: rgba(80,70,229,.07) !important;
box-shadow: none !important;
font-weight: 800 !important;
}
.tab-btn.active::after {
width: 80% !important; left: 10% !important;
}
/* ── wrap: 최대너비 + 패딩 ── */
.wrap {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px 20px !important;
}
/* ── 전체 탭 공통 상단 spacing ──────────────────────────────
탭바 아래 첫 콘텐츠까지 일관된 여백 적용.
wrap 안/밖 섹션 모두 동일한 padding-top 28px 부여.
온라인쿠지는 풀블리드 히어로 배너가 탭바 바로 아래 붙으므로
배너 자체에 margin-bottom 추가, onlineKujiSection은 제외.
──────────────────────────────────────────────────────────── */
.wrap > section,
#goodsSection,
#auctionSection,
#eventSection {
padding-top: 18px !important;
}
/* wrap 바깥 섹션: 모바일에서 좌우 4px 여백 적용 */
@media (max-width: 560px) {
#goodsSection,
#auctionSection,
#eventSection {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* 온라인쿠지: 배너가 탭바 역할을 겸하므로 섹션 자체는 제외 */
#onlineKujiSection {
padding-top: 0 !important;
flex: 1; /* body flex-column 안에서 남은 공간 전부 차지 */
min-height: calc(100vh - var(--hdr-total, 120px)); /* footer 항상 하단 고정 */
display: flex; flex-direction: column;
}
#bangkujiSection {
flex: 1;
min-height: calc(100vh - var(--hdr-total, 120px));
display: flex; flex-direction: column;
}
/* ── 히어로 배너 중복 오버라이드 제거됨 (B안 블록이 위에서 처리) ── */
/* ── 상품 카드 — neon 제거, 깔끔한 프리미엄 스타일 ── */
.product {
background: var(--surface) !important;
border: 1.5px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
transition: box-shadow .22s, transform .22s, border-color .22s !important;
}
.product::before {
/* 레인보우 탑 라인 완전 제거 */
display: none !important;
}
.product:hover {
box-shadow: 0 8px 32px rgba(80,70,229,.13), 0 2px 8px rgba(0,0,0,.06) !important;
transform: translateY(-4px) !important;
border-color: rgba(80,70,229,.25) !important;
}
.product-name {
color: var(--text-1) !important;
font-size: 13.5px !important;
font-weight: 800 !important;
}
.price {
color: var(--brand) !important;
font-size: 16px !important;
}
.buy-button {
background: linear-gradient(135deg, var(--brand), var(--accent)) !important;
box-shadow: 0 3px 12px rgba(80,70,229,.3) !important;
border-radius: 10px !important;
}
.buy-button:hover:not(:disabled) {
opacity: .92 !important;
transform: translateY(-1px) !important;
}
/* 품절 오버레이 개선 */
.sold-out-overlay {
background: rgba(15,23,42,.6) !important;
animation: none !important;
font-size: 22px !important;
font-weight: 900 !important;
backdrop-filter: blur(2px) !important;
}
/* ── 테이블 헤더 색상: brand 계열로 통일 ── */
.tbl-header {
background: linear-gradient(135deg, rgba(80,70,229,.07), rgba(99,102,241,.05)) !important;
border-bottom: 1px solid rgba(80,70,229,.12) !important;
}
.tbl-header-title { color: var(--brand-dark, #3730a3) !important; }
.tbl-wrap {
border: 1.5px solid var(--border) !important;
box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
table.history th {
background: linear-gradient(135deg, rgba(80,70,229,.06), rgba(99,102,241,.04)) !important;
color: var(--brand-dark, #3730a3) !important;
}
/* ── 경매 — 섹션 색상 조정 ── */
/* 경매는 다크 게임UI 유지 */
/* ── 쿠폰/히스토리 서브탭 ── */
.hist-tab-btn {
border-bottom: 2.5px solid transparent;
background: none;
color: var(--text-3);
font-weight: 700;
}
.hist-tab-btn.active {
color: var(--brand);
border-bottom-color: var(--brand);
background: rgba(80,70,229,.05);
}
/* ── 쿠지 내역 필터 바 ── */
.kh-filter-bar {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px 10px;
background: #f8f9ff;
border-bottom: 1px solid rgba(99,102,241,.10);
}
.kh-search-wrap {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1.5px solid rgba(99,102,241,.18);
border-radius: 10px;
padding: 0 12px;
height: 38px;
transition: border-color .15s;
}
.kh-search-wrap:focus-within {
border-color: var(--brand, #6366f1);
box-shadow: 0 0 0 3px rgba(99,102,241,.10);
}
.kh-search-ico { font-size: 14px; flex-shrink: 0; }
.kh-search-input {
border: none;
outline: none;
flex: 1;
font-size: 13px;
font-weight: 500;
color: #1e1b4b;
background: transparent;
}
.kh-search-input::placeholder { color: #a0a3b1; }
.kh-filter-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.kh-filter-chip {
padding: 5px 12px;
border-radius: 999px;
border: 1.5px solid rgba(99,102,241,.20);
background: #fff;
color: #64748b;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
}
.kh-filter-chip:hover { border-color: var(--brand,#6366f1); color: var(--brand,#6366f1); }
.kh-filter-chip.active {
background: var(--brand,#6366f1);
border-color: var(--brand,#6366f1);
color: #fff;
}
/* ── 쿠지 내역 페이지네이션 ── */
.kh-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
padding: 18px 14px 24px;
flex-wrap: wrap;
}
.kh-page-btn {
min-width: 36px;
height: 36px;
border-radius: 9px;
border: 1.5px solid rgba(99,102,241,.20);
background: #fff;
color: #64748b;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all .15s;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
}
.kh-page-btn:hover { border-color: var(--brand,#6366f1); color: var(--brand,#6366f1); }
.kh-page-btn.active {
background: var(--brand,#6366f1);
border-color: var(--brand,#6366f1);
color: #fff;
}
.kh-page-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
/* ── 택배 조회 탭 CSS ── */
/* 안내 배너 */
.deliv-notice-banner {
margin: 12px 0 16px;
padding: 16px 20px;
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
border: 2px solid #6366f1;
border-radius: 14px;
font-size: 13px;
color: #fff;
line-height: 1.9;
display: flex;
align-items: flex-start;
gap: 14px;
}
.deliv-notice-icon {
font-size: 22px;
flex-shrink: 0;
margin-top: 2px;
filter: drop-shadow(0 0 6px rgba(99,102,241,.7));
}
.deliv-notice-text { flex: 1; }
.deliv-notice-title {
font-size: 14px;
font-weight: 900;
color: #fff;
letter-spacing: -.2px;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.deliv-notice-text p { color: #e0e7ff; margin: 0; }
.deliv-notice-text strong { color: #fbbf24; font-weight: 900; }
.deliv-notice-text .sub { color: #c7d2fe; margin-top: 5px; }
.deliv-notice-text .sub strong { color: #a5f3fc; }
/* 카드 */
.deliv-card {
background: linear-gradient(145deg, #0d1526 0%, #111a30 100%);
border: 1.5px solid rgba(99,102,241,.28);
border-radius: 18px;
padding: 0;
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(99,102,241,0);
animation: fadeSlideIn .35s ease both;
transition: box-shadow .2s, border-color .2s;
}
.deliv-card:hover { border-color: rgba(99,102,241,.5); box-shadow: 0 6px 32px rgba(99,102,241,.15); }
.deliv-card.is-expired { border-color: rgba(100,116,139,.18); opacity: .7; }
.deliv-card.is-expired:hover { border-color: rgba(100,116,139,.3); box-shadow: none; }
/* 카드 상단 색띠 헤더 */
.deliv-card-header {
background: linear-gradient(90deg, rgba(99,102,241,.18) 0%, rgba(139,92,246,.1) 100%);
border-bottom: 1px solid rgba(99,102,241,.18);
padding: 14px 18px 12px;
display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px;
}
.deliv-card.is-expired .deliv-card-header {
background: rgba(100,116,139,.08);
border-bottom-color: rgba(100,116,139,.15);
}
.deliv-card-title {
font-size: 14px; font-weight: 800; color: #e2e8f0;
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.deliv-card-title-icon { font-size: 18px; }
.deliv-card-date { font-size: 11px; color: #64748b; margin-top: 2px; }
/* 카드 본문 */
.deliv-card-body { padding: 14px 18px 16px; }
/* 운송장 행 */
.deliv-tn-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 10px;
margin-bottom: 8px;
}
.deliv-tn-row:last-child { margin-bottom: 0; }
.deliv-tn-index {
width: 20px; height: 20px; border-radius: 50%;
background: rgba(99,102,241,.2); border: 1px solid rgba(99,102,241,.35);
font-size: 10px; font-weight: 900; color: #a5b4fc;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.deliv-tracking-num {
font-family: 'Courier New', monospace;
font-size: 14px; font-weight: 900; color: #c4b5fd;
letter-spacing: .8px; flex: 1; min-width: 0;
}
.deliv-query-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 14px;
background: linear-gradient(135deg, #6366f1, #4f46e5);
border: none; border-radius: 999px; color: #fff;
font-size: 11.5px; font-weight: 800; cursor: pointer; text-decoration: none;
transition: opacity .15s, transform .15s; white-space: nowrap; flex-shrink: 0;
box-shadow: 0 2px 10px rgba(99,102,241,.35);
}
.deliv-query-btn:hover { opacity: .88; transform: translateY(-1px); }
.deliv-query-btn.expired {
background: rgba(100,116,139,.15); color: #64748b;
cursor: default; pointer-events: none; box-shadow: none;
border: 1px solid rgba(100,116,139,.2);
}
/* 배지 */
.deliv-badge-cj {
display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.28);
border-radius: 999px; font-size: 10px; color: #86efac; font-weight: 700; white-space: nowrap;
}
.deliv-badge-expired {
display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
background: rgba(100,116,139,.1); border: 1px solid rgba(100,116,139,.22);
border-radius: 999px; font-size: 10px; color: #94a3b8; white-space: nowrap;
}
.deliv-badge-count {
display: inline-flex; align-items: center; padding: 2px 7px;
background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3);
border-radius: 999px; font-size: 10px; color: #a5b4fc; font-weight: 700;
}
/* ── 컨텐츠 하위탭 ── */
.contents-subtab-bar {
display: flex;
gap: 0;
border-bottom: 2px solid rgba(99,102,241,.2);
margin-bottom: 16px;
}
.contents-sub-btn {
padding: 10px 18px;
border: none;
border-bottom: 2.5px solid transparent;
background: none;
color: var(--text-3,#64748b);
font-weight: 700;
font-size: 14px;
cursor: pointer;
font-family: inherit;
transition: color .15s, border-color .15s;
}
.contents-sub-btn.active {
color: var(--brand,#6366f1);
border-bottom-color: var(--brand,#6366f1);
background: rgba(99,102,241,.05);
}
/* ── 용자모집 카드 ── */
/* ══════════════════════════════════════════════
용자모집 — 아케이드 UI v2
══════════════════════════════════════════════ */
/* ── 로비 그리드 ── */
.yj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; padding:4px 0 28px; }
/* ── 로비 카드 ── */
.yj-card {
background: linear-gradient(160deg,rgba(12,10,40,.96),rgba(22,18,65,.96));
border: 1px solid rgba(99,102,241,.22);
border-radius: 20px;
overflow: hidden;
cursor: pointer;
transition: transform .2s, border-color .22s, box-shadow .22s;
position: relative;
box-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.yj-card::before {
content:''; position:absolute; inset:0; border-radius:20px; pointer-events:none;
background: linear-gradient(160deg,rgba(99,102,241,.06) 0%,transparent 60%);
}
.yj-card:hover { transform: translateY(-4px); border-color:rgba(139,92,246,.55); box-shadow: 0 14px 44px rgba(99,102,241,.28); }
/* 카드 이미지 — 16/10 비율 */
.yj-card-img { width:100%; aspect-ratio:16/10; object-fit:cover; background:#0a0820; display:block; }
.yj-card-img-ph {
width:100%; aspect-ratio:16/10;
background: linear-gradient(135deg,#0f0c2e 0%,#1e1b4b 50%,#2d1f6e 100%);
display:flex; align-items:center; justify-content:center; font-size:36px;
position:relative; overflow:hidden;
}
.yj-card-img-ph::after {
content:''; position:absolute; inset:0;
background: repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(99,102,241,.04) 18px, rgba(99,102,241,.04) 19px);
}
/* 카드 바디 */
.yj-card-body { padding: 13px 15px 15px; }
.yj-card-top { display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.yj-card-title {
font-weight:900; font-size:14px; color:#e2e8f0; margin-bottom:6px; line-height:1.3;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
letter-spacing:-.01em;
}
.yj-card-prize {
font-size:11.5px; color:#c4b5fd;
background: linear-gradient(90deg,rgba(99,102,241,.14),rgba(139,92,246,.08));
border:1px solid rgba(139,92,246,.22); border-radius:9px;
padding:5px 10px; margin-bottom:9px; line-height:1.4;
display:flex; align-items:flex-start; gap:5px;
}
.yj-card-prize-icon { flex-shrink:0; font-size:13px; }
/* 인원 진행바 */
.yj-card-pbar-wrap { margin-bottom:8px; }
.yj-card-pbar-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.yj-card-pbar-label { font-size:10.5px; color:#64748b; font-weight:700; letter-spacing:.04em; }
.yj-card-pbar-cnt { font-size:11.5px; font-weight:900; color:#a78bfa; }
.yj-card-pbar {
height:6px; background:rgba(99,102,241,.1); border-radius:99px; overflow:hidden;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.yj-card-pbar-fill {
height:100%; border-radius:99px;
background: linear-gradient(90deg,#4f46e5,#7c3aed,#a78bfa);
transition: width .6s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 8px rgba(139,92,246,.5);
}
.yj-card-pbar-fill.full {
background: linear-gradient(90deg,#d97706,#f59e0b,#fbbf24);
box-shadow: 0 0 8px rgba(245,158,11,.5);
}
/* 하단 메타 행 */
.yj-card-footer { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:3px; }
.yj-card-pill {
font-size:10.5px; font-weight:800; border-radius:20px; padding:3px 9px;
background:rgba(255,255,255,.06); color:#94a3b8; border:1px solid rgba(255,255,255,.09);
display:inline-flex; align-items:center; gap:3px; letter-spacing:.01em;
}
.yj-card-pill.fee {
background: linear-gradient(90deg,rgba(99,102,241,.15),rgba(139,92,246,.1));
color:#a5b4fc; border-color:rgba(99,102,241,.28);
}
.yj-card-pill.time { background:rgba(245,158,11,.1); color:#fcd34d; border-color:rgba(245,158,11,.28); }
.yj-card-pill.time.urgent {
background:rgba(239,68,68,.14); color:#fca5a5; border-color:rgba(239,68,68,.35);
animation:yj-pulse .65s infinite alternate;
}
/* LIVE 배지 */
.yj-live-badge {
position:absolute; top:9px; right:9px;
background: linear-gradient(135deg,#dc2626,#ef4444);
color:#fff; font-size:9.5px; font-weight:900;
padding:3px 9px; border-radius:20px; letter-spacing:.1em;
animation:yj-pulse .65s infinite alternate;
box-shadow: 0 2px 10px rgba(239,68,68,.5);
}
/* 상태 배지 */
.yj-card-status { display:inline-block; padding:3px 10px; border-radius:20px; font-size:10.5px; font-weight:800; letter-spacing:.04em; }
.yj-status-waiting { background:rgba(16,185,129,.14); color:#34d399; border:1px solid rgba(16,185,129,.28); }
.yj-status-full { background:rgba(245,158,11,.14); color:#fbbf24; border:1px solid rgba(245,158,11,.28); }
.yj-status-live { background:rgba(239,68,68,.14); color:#f87171; border:1px solid rgba(239,68,68,.28); animation:yj-pulse .9s infinite alternate; }
.yj-status-done { background:rgba(100,116,139,.1); color:#64748b; border:1px solid rgba(100,116,139,.2); }
@keyframes yj-pulse { from{opacity:.65} to{opacity:1} }
@keyframes yj-flicker { 0%,100%{opacity:1} 50%{opacity:.7} }
@keyframes yj-scanline { from{background-position:0 0} to{background-position:0 100%} }
/* ── 구매내역 카드 (유지) ── */
.yj-hist-card {
background: linear-gradient(135deg,rgba(20,16,54,.85),rgba(30,25,80,.85));
border: 1.5px solid rgba(99,102,241,.22);
border-radius: 14px; overflow:hidden; margin-bottom:10px;
transition: border-color .2s, box-shadow .2s;
animation: kujiCardIn .35s ease both;
}
.yj-hist-card:hover { border-color:rgba(139,92,246,.5); box-shadow:0 6px 24px rgba(99,102,241,.18); }
.yj-hist-card.has-lastone { border-color:rgba(245,158,11,.6); background:linear-gradient(135deg,rgba(28,20,0,.9),rgba(40,28,4,.9)); box-shadow:0 0 0 2px rgba(245,158,11,.18),0 6px 28px rgba(245,158,11,.15); }
.yj-hist-card.has-lastone::before { content:'';display:block;height:3px;background:linear-gradient(90deg,#f59e0b,#fbbf24,#f59e0b); }
.yj-hist-inner { display:flex; align-items:center; gap:12px; padding:12px 14px; }
.yj-hist-thumb { width:54px; height:54px; object-fit:cover; border-radius:10px; flex-shrink:0; border:1.5px solid rgba(255,255,255,.08); }
.yj-hist-thumb-ph { width:54px; height:54px; border-radius:10px; flex-shrink:0; background:linear-gradient(135deg,#312e81,#4c1d95); display:flex;align-items:center;justify-content:center;font-size:22px; border:1.5px solid rgba(99,102,241,.2); }
.yj-hist-info { flex:1; min-width:0; }
.yj-hist-title { font-weight:800; font-size:14px; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yj-hist-meta { font-size:11px; color:#64748b; margin-top:3px; }
.yj-hist-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.yj-hist-tag { font-size:11px; padding:2px 8px; border-radius:20px; background:rgba(99,102,241,.12); color:#a5b4fc; border:1px solid rgba(99,102,241,.2); }
.yj-hist-tag-win { font-size:11px; padding:2px 10px; border-radius:20px; font-weight:800; background:linear-gradient(90deg,rgba(245,158,11,.25),rgba(251,191,36,.2)); color:#fcd34d; border:1px solid rgba(245,158,11,.45); }
.yj-hist-right { text-align:right; flex-shrink:0; }
.yj-hist-fee { font-size:13px; font-weight:800; color:#c4b5fd; }
.yj-hist-status { font-size:11px; color:#64748b; margin-top:3px; }
.yj-hist-win-badge { display:inline-block; margin-top:5px; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px; letter-spacing:.04em; }
/* ════════════════════════════════════════
용자모집 방 (room) — 아케이드 리뉴얼
════════════════════════════════════════ */
.yj-room {
background: linear-gradient(160deg,rgba(6,5,20,.97),rgba(12,10,40,.97));
border: 1px solid rgba(99,102,241,.18);
border-radius: 22px; overflow:hidden;
box-shadow: 0 4px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
position: relative;
}
/* 스캔라인 오버레이 — 아케이드 느낌 */
.yj-room::after {
content:''; position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:22px;
background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.07) 3px, rgba(0,0,0,.07) 4px);
opacity:.35;
}
/* 헤더 */
.yj-room-header {
background: linear-gradient(90deg,#3730a3,#4f46e5,#6d28d9);
padding: 14px 20px;
display: flex; align-items:center; gap:12px;
position:relative; z-index:1;
border-bottom: 1px solid rgba(255,255,255,.08);
box-shadow: 0 4px 20px rgba(79,70,229,.35);
}
.yj-room-header::before {
content:''; position:absolute; inset:0;
background: repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,.02) 60px,rgba(255,255,255,.02) 61px);
pointer-events:none;
}
/* 2컬럼 바디 */
.yj-room-body { display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:400px; position:relative; z-index:1; }
@media(max-width:680px){ .yj-room-body { grid-template-columns:1fr; } }
/* 왼쪽 패널 */
.yj-room-left { position:relative; display:flex; flex-direction:column; border-right:1px solid rgba(99,102,241,.12); min-width:0; }
/* 이미지 — 1:1 비율 */
.yj-room-img-wrap {
position:relative; width:100%; padding-top:100%; /* 1:1 */
overflow:hidden; background:#04031a; flex-shrink:0; cursor:zoom-in;
}
.yj-room-img-wrap img {
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center; display:block;
transition: transform .28s ease;
}
.yj-room-img-wrap:hover img { transform: scale(1.05); }
.yj-room-img-placeholder {
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-size:54px;
background: linear-gradient(135deg,#0a0820,#1e1b4b,#2d1f6e);
}
.yj-room-img-placeholder::after {
content:''; position:absolute; inset:0;
background: repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(99,102,241,.04) 20px,rgba(99,102,241,.04) 21px);
}
/* 확대 아이콘 */
.yj-room-img-zoom-icon {
position:absolute; bottom:10px; right:10px;
background:rgba(0,0,0,.6); color:#fff; font-size:14px;
width:30px; height:30px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
opacity:0; transition:opacity .2s; pointer-events:none;
backdrop-filter:blur(4px);
}
.yj-room-img-wrap:hover .yj-room-img-zoom-icon { opacity:1; }
@media(max-width:680px){ .yj-room-img-wrap { padding-top:100%; } }
/* 이미지 확대 모달 */
#yjImgModal { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.9); align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(8px); }
#yjImgModal.open { display:flex; animation:yjModalIn .18s ease; }
@keyframes yjModalIn { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:none} }
#yjImgModal img { max-width:min(90vw,720px); max-height:90vh; object-fit:contain; border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.8); }
#yjImgModal .yj-modal-close { position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
#yjImgModal .yj-modal-close:hover { background:rgba(255,255,255,.25); }
/* 정보 패널 */
.yj-room-info {
padding:16px 18px; flex:1; display:flex; flex-direction:column; gap:10px;
background: linear-gradient(180deg,rgba(6,5,20,.7),rgba(10,8,32,.8));
}
.yj-info-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:800; }
.yj-info-prize {
background: linear-gradient(90deg,rgba(245,158,11,.1),rgba(251,191,36,.07));
border:1px solid rgba(245,158,11,.28); color:#fbbf24;
padding:10px 13px; border-radius:11px; font-size:12.5px; line-height:1.6;
position:relative; overflow:hidden;
}
.yj-info-prize::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#f59e0b,#fbbf24); border-radius:2px 0 0 2px; }
.yj-info-desc { color:#64748b; font-size:12.5px; line-height:1.7; }
.yj-info-stat { display:flex; flex-direction:column; gap:0; background:rgba(99,102,241,.05); border-radius:10px; border:1px solid rgba(99,102,241,.1); overflow:hidden; }
.yj-info-stat-row { display:flex; justify-content:space-between; align-items:center; font-size:11.5px; padding:7px 12px; border-bottom:1px solid rgba(99,102,241,.08); }
.yj-info-stat-row:last-child { border-bottom:none; }
.yj-info-stat-label { color:#475569; font-weight:700; letter-spacing:.02em; }
.yj-info-stat-value { color:#c4b5fd; font-weight:800; }
/* 오른쪽 패널 */
.yj-room-right { display:flex; flex-direction:column; background:rgba(8,6,28,.5); position:relative; overflow:hidden; }
.yj-room-right-header { padding:12px 15px 10px; border-bottom:1px solid rgba(99,102,241,.1); }
.yj-participants-label {
font-size:10px; font-weight:900; color:#6366f1; letter-spacing:.14em;
margin-bottom:5px; text-transform:uppercase;
}
.yj-progress-bar {
height:4px; background:rgba(99,102,241,.12); border-radius:99px; overflow:hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.yj-progress-fill {
height:100%;
background: linear-gradient(90deg,#4f46e5,#7c3aed,#a78bfa);
border-radius:99px; transition:width .6s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 6px rgba(139,92,246,.6);
}
/* 슬롯 그리드 — 스크롤 가능, 버튼 영역이 항상 하단 고정 */
.yj-slot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:7px; padding:12px; flex:1; align-content:start;
overflow-y:auto; min-height:0; /* flex 자식에서 스크롤 작동하려면 min-height:0 필수 */
}
/* 슬롯 카드 */
.yj-slot {
background: linear-gradient(160deg,rgba(20,16,60,.8),rgba(15,12,48,.8));
border: 1px solid rgba(99,102,241,.18);
border-radius: 11px; padding:9px 5px;
text-align:center; font-size:11.5px; color:#475569; font-weight:800;
transition: all .18s; cursor:default; user-select:none;
position:relative; overflow:hidden;
}
.yj-slot::before {
content: attr(data-slot);
position:absolute; top:3px; left:5px;
font-size:8px; font-weight:900; color:rgba(99,102,241,.35); letter-spacing:.04em;
}
.yj-slot.empty { cursor:pointer; color:#6366f1; border-color:rgba(99,102,241,.28); }
.yj-slot.empty:hover {
background: linear-gradient(135deg,rgba(79,70,229,.25),rgba(109,40,217,.2));
border-color:#818cf8; color:#c4b5fd;
transform:translateY(-2px) scale(1.03);
box-shadow: 0 4px 16px rgba(99,102,241,.28);
}
.yj-slot.picking {
background: linear-gradient(135deg,rgba(99,102,241,.32),rgba(139,92,246,.25));
border-color:#818cf8; border-width:2px; color:#a78bfa;
transform:translateY(-2px) scale(1.05);
box-shadow: 0 6px 20px rgba(99,102,241,.4);
animation: yj-pick-pulse .65s infinite alternate;
}
.yj-slot.mine {
background: linear-gradient(135deg,#4338ca,#6d28d9,#7c3aed);
border-color:#a78bfa; color:#fff;
box-shadow: 0 4px 16px rgba(109,40,217,.5), inset 0 1px 0 rgba(255,255,255,.15);
}
.yj-slot.taken {
background:rgba(15,12,40,.5); border-color:rgba(99,102,241,.1);
color:#334155; cursor:default;
}
.yj-slot.winner {
background: linear-gradient(135deg,#b45309,#d97706,#f59e0b);
border-color:#fcd34d; color:#fff;
box-shadow: 0 0 0 2px rgba(251,191,36,.3);
animation: yj-winner-glow .9s infinite alternate;
}
@keyframes yj-pick-pulse { from{box-shadow:0 4px 12px rgba(99,102,241,.3)} to{box-shadow:0 8px 28px rgba(99,102,241,.6)} }
@keyframes yj-winner-glow { from{box-shadow:0 4px 20px rgba(245,158,11,.5),0 0 0 2px rgba(251,191,36,.2)} to{box-shadow:0 10px 44px rgba(239,68,68,.7),0 0 0 3px rgba(251,191,36,.5)} }
/* 참가 버튼 영역 — 항상 하단에 고정 (슬롯이 많아도 밀리지 않음) */
.yj-join-area { padding:12px 13px 15px; border-top:1px solid rgba(99,102,241,.1); display:flex; flex-direction:column; gap:7px;
flex-shrink:0; /* 슬롯 그리드가 늘어나도 버튼 영역은 축소되지 않음 */
background:rgba(8,6,28,.85); /* 반투명 배경으로 그리드 위 고정 시 가독성 확보 */
}
.yj-slot-hint { font-size:11.5px; color:#6366f1; text-align:center; font-weight:800; min-height:17px; letter-spacing:.02em; }
.yj-join-btn-row { display:flex; gap:7px; }
.yj-btn-join {
flex:1; min-width:0; padding:12px;
background: linear-gradient(135deg,#3730a3,#4f46e5,#6d28d9);
color:#fff; border:none; border-radius:11px;
font-size:13.5px; font-weight:900; cursor:pointer; font-family:inherit;
box-shadow: 0 4px 18px rgba(79,70,229,.4), inset 0 1px 0 rgba(255,255,255,.12);
transition: opacity .15s, transform .1s;
letter-spacing:.01em;
}
.yj-btn-join:not(:disabled):hover { opacity:.9; transform:translateY(-1px); }
.yj-btn-join:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.yj-btn-random {
flex:1; min-width:0; padding:12px;
background: linear-gradient(135deg,#0369a1,#0ea5e9,#6366f1);
color:#fff; border:none; border-radius:11px;
font-size:12.5px; font-weight:900; cursor:pointer; font-family:inherit;
box-shadow: 0 4px 14px rgba(14,165,233,.35), inset 0 1px 0 rgba(255,255,255,.12);
transition: opacity .15s, transform .1s; white-space:nowrap;
}
.yj-btn-random:not(:disabled):hover { opacity:.88; transform:translateY(-1px); }
.yj-btn-random:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.yj-btn-cancel {
width:100%; padding:11px;
background:rgba(220,38,38,.1); color:#f87171;
border:1px solid rgba(239,68,68,.25); border-radius:11px;
font-size:13px; font-weight:800; cursor:pointer; font-family:inherit;
transition: background .15s;
}
.yj-btn-cancel:hover { background:rgba(220,38,38,.2); }
/* ── 라이브 종이뽑기 그리드 ── */
/* ★ [PERF] 3D flip 구조 제거 → flat 2D 레이어 전환
기존: perspective+preserve-3d+backface-visibility → 카드당 GPU 레이어 2개 (1000개=2000 레이어)
변경: opacity+scale 전환 → GPU 레이어 0개, 브라우저 compositor 부담 없음 */
.yj-live-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px; padding:12px; flex:1; align-content:start; }
/* wrap: 상대 위치 컨텍스트만 — perspective/3d 컨텍스트 없음 */
.yj-paper-wrap { position:relative; width:100%; aspect-ratio:2/3; cursor:pointer; }
.yj-paper-wrap.opened { cursor:default; pointer-events:none; }
/* ★ [PERF] yj-paper-inner: transform-style:preserve-3d 제거 → GPU 레이어 승격 차단 */
.yj-paper-inner { position:relative; width:100%; height:100%; }
/* front/back: absolute 겹침, 3D 없음
front는 기본 표시, back은 hidden → opened 시 교차 fade+scale */
.yj-paper-front, .yj-paper-back {
position:absolute; inset:0; border-radius:13px;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:8px 6px; text-align:center; overflow:hidden;
/* ★ [PERF] backface-visibility 제거 — GPU 레이어 승격 원인 제거 */
/* ★ [PERF] will-change 제거 — 전체 카드에 상시 적용 시 GPU 레이어 일괄 생성됨, opened 시점에만 JS로 부여 */
transition: opacity .32s ease, transform .32s cubic-bezier(.4,0,.2,1);
}
/* 기본(닫힘): front 보임, back 숨김+살짝 축소 */
.yj-paper-front { opacity:1; transform:scale(1); z-index:1; }
.yj-paper-back { opacity:0; transform:scale(.88); z-index:0; }
/* opened: front 사라지고 back 등장 */
.yj-paper-wrap.opened .yj-paper-front { opacity:0; transform:scale(.88); }
.yj-paper-wrap.opened .yj-paper-back { opacity:1; transform:scale(1); z-index:1; }
.yj-paper-front {
background: linear-gradient(160deg,#0f0c2e,#1a1650,#231a6e);
border:1px solid rgba(99,102,241,.4);
box-shadow: 0 4px 18px rgba(99,102,241,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.yj-paper-front::before {
content:''; position:absolute; inset:0; border-radius:13px;
background: repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(99,102,241,.04) 12px,rgba(99,102,241,.04) 13px);
}
.yj-paper-num { font-size:20px; font-weight:900; color:#818cf8; line-height:1; }
.yj-paper-label { font-size:8.5px; color:rgba(129,140,248,.6); margin-top:4px; letter-spacing:.1em; font-weight:800; }
.yj-paper-icon { font-size:22px; margin-bottom:2px; }
.yj-paper-owner {
font-size:9px; margin-top:5px; padding:2px 7px; border-radius:20px;
background:rgba(99,102,241,.18); color:#a5b4fc; font-weight:800;
max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.yj-paper-owner-me { background:rgba(245,158,11,.2); color:#fbbf24; }
.yj-paper-back {
background: linear-gradient(135deg,#1e3a5f,#1e4d6b);
border:1px solid rgba(56,189,248,.3);
/* ★ [PERF] transform:rotateY(180deg) 제거 — 3D flip 방식 폐기, opacity/scale 전환 사용 */
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.yj-paper-back.prize-back {
background: linear-gradient(135deg,#78350f,#92400e,#b45309);
border-color:rgba(251,191,36,.6);
box-shadow: 0 0 0 2px rgba(251,191,36,.2), 0 6px 28px rgba(245,158,11,.4), inset 0 1px 0 rgba(255,255,255,.1);
animation: yj-winner-glow .8s infinite alternate;
}
.yj-paper-back.goods-back {
background: linear-gradient(135deg,#1e3a5f,#1a4065);
border-color:rgba(56,189,248,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.yj-paper-back-icon { font-size:24px; margin-bottom:4px; }
.yj-paper-back-name { font-size:9.5px; font-weight:900; color:#e2e8f0; line-height:1.3; word-break:break-all; }
.yj-paper-back-sub { font-size:8.5px; color:#64748b; margin-top:3px; }
.yj-paper-wrap.my-slot .yj-paper-front { border-color:#818cf8; box-shadow:0 0 0 2px rgba(129,140,248,.4),0 4px 18px rgba(99,102,241,.3); }
/* live 상태 슬롯 힌트 */
.yj-live-hint { font-size:11.5px; color:#818cf8; text-align:center; padding:8px 14px 0; font-weight:800; animation:yj-pulse .9s infinite alternate; letter-spacing:.02em; }
@keyframes yj-paper-appear { from{opacity:0;transform:translateY(12px) scale(.93)} to{opacity:1;transform:none} }
/* ★ [PERF] .yj-paper-wrap에 animation 전역 적용 제거 — JS IntersectionObserver가 개별 제어하므로 CSS 전역 애니메이션과 충돌 발생
(opacity:0 초기값 + CSS animation 동시 적용 → 나왔다 사라졌다 반복 버그 원인) */
.goods-subtab-bar {
background: var(--surface) !important;
border: 1.5px solid var(--border) !important;
}
.goods-subtab.active {
background: linear-gradient(135deg, var(--brand), var(--accent)) !important;
}
/* ── 포인트 가져오기 / 배송지 개선 ── */
.pf-card, .pf-banner {
border-radius: var(--radius) !important;
}
/* ── ok-set-card: 프리미엄 ── */
.ok-set-card {
border: 1.5px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
transition: box-shadow .22s, transform .22s, border-color .22s !important;
}
.ok-set-card:hover {
box-shadow: 0 8px 28px rgba(80,70,229,.12), 0 2px 8px rgba(0,0,0,.05) !important;
transform: translateY(-3px) !important;
border-color: rgba(80,70,229,.22) !important;
}
/* ★ [MOBILE-TOUCH] 두 번째 ok-set-card hover 고착 방지 */
@media (hover: none) {
.ok-set-card:hover {
transform: none !important;
border-color: var(--border, rgba(255,255,255,.08)) !important;
box-shadow: none !important;
}
}
.ok-set-card-img { border-radius: 14px 14px 0 0 !important; }
/* ── 필터/타이틀: 위 메인 스타일 참조 ── */
/* ── 구매 버튼 ok-set-card ── */
.ok-set-card-btn {
background: linear-gradient(135deg, var(--brand), var(--accent)) !important;
border-radius: 10px !important;
box-shadow: 0 3px 10px rgba(80,70,229,.28) !important;
font-weight: 800 !important;
}
/* ── 바텀 네비 ── */
#bottomNavBar {
background: var(--surface) !important;
border-top: 1px solid var(--border) !important;
box-shadow: 0 -4px 20px rgba(80,70,229,.10) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
.bnav-item {
color: var(--text-3) !important;
font-size: 10px !important;
font-weight: 600 !important;
transition: color .18s !important;
}
.bnav-item::after {
background: linear-gradient(90deg, var(--brand), var(--accent)) !important;
height: 2.5px !important;
left: 25% !important; right: 25% !important;
border-radius: 0 0 3px 3px !important;
}
.bnav-item .bnav-ico {
font-size: 20px !important;
transition: transform .18s !important;
}
.bnav-item.active {
color: var(--brand) !important;
font-weight: 800 !important;
}
.bnav-item.active .bnav-ico {
transform: translateY(-1px) scale(1.08) !important;
}
.bnav-item.active::after { opacity: 1 !important; }
.bnav-item:active { opacity: .7 !important; }
/* ── 이벤트 섹션 카드 ── */
#eventSection .product {
border: 1.5px solid var(--border) !important;
}
/* ── 모바일 반응형: 배너/공통 패딩 ── */
@media (max-width: 560px) {
/* wrap 좌우 0 — 하단은 footer와 콘텐츠 사이 여백 확보 */
.wrap { padding: 0 0 24px !important; }
/* ok-hero-banner 모바일: 위 768px 블록에서 처리 — 여기선 제거 */
/* 탭 공통 상단 간격 — 좌우 0, 하단 여백 추가 */
.wrap > section,
#goodsSection,
#auctionSection,
#eventSection {
padding-top: 16px !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 24px !important;
}
.tab-btn { padding: 11px 12px !important; font-size: 12px !important; }
/* 카드/그리드 반경은 위 560px 블록에서 10px 처리 — 여기선 중복 제거 */
.product { border-radius: 10px !important; }
.product-name { font-size: 12px !important; }
.price { font-size: 13px !important; }
}
/* ══════════════════════════════════════════════════════
📱 모바일 전용 포인트 현황 바 (#mobilePointBar)
— 쿠지P / 포인트P / 이벤트P 잔액 표시 (클릭/탭 전환 없음)
PC(>560px)에서는 완전 숨김 / 비로그인 시 숨김
══════════════════════════════════════════════════════ */
/* 모바일 포인트 바: 기본 숨김 (비로그인, 또는 PC) */
#mobilePointBar {
display: none; /* JS가 모바일 로그인 후 오버라이드 */
}
/* PC(≥751px): CSS !important가 JS inline style도 차단 — 절대 비표시 */
@media (min-width: 751px) {
#mobilePointBar { display: none !important; }
}
/* 561~750px(갤폴드/갤탭): 동일 스타일 적용 — 750px 이하 통합 */
@media (max-width: 750px) {
/* ── 컨테이너: sticky 고정 — 헤더 바로 아래 스크롤 따라다님 ── */
#mobilePointBar {
width: 100%;
flex-shrink: 0;
/* 배경: 다크 테마 surface 변수 사용 (헤더와 통일감) */
background: var(--surface, #1e2235);
border-bottom: 1px solid var(--border, #2d3348);
box-shadow: 0 2px 12px rgba(0,0,0,.18);
padding: 0;
overflow: hidden;
/* ★ sticky: 헤더(position:fixed) 높이 바로 아래 고정 */
position: sticky;
top: var(--hdr-total);
z-index: 395; /* 헤더(500) > 포인트바(395) > 콘텐츠 */
}
/* display 값은 JS가 로그인 후 주입 (flex) */
/* ── 내부: 3칸 균등 분할 ── */
#mobilePointBar-inner {
display: flex;
width: 100%;
}
/* ── 각 포인트 셀 ── */
.mpb-cell {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 4px 9px;
gap: 3px;
position: relative;
transition: background .15s;
}
.mpb-cell:active { background: rgba(255,255,255,.07); }
/* 클릭 힌트 아이콘 */
.mpb-cell::before {
content: none; /* 구분선은 + 셀렉터로 처리 */
}
.mpb-cell + .mpb-cell::before {
content: '';
position: absolute;
left: 0; top: 18%; bottom: 18%;
width: 1px;
background: var(--border, rgba(255,255,255,.1));
}
/* ── 라벨 ── */
.mpb-label {
font-size: 10px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
}
/* 쿠지 — 인디고 그라데이션 */
#mpbKuji .mpb-label { background: linear-gradient(90deg,#818cf8,#6366f1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
/* 포인트 — 황금 그라데이션 */
#mpbPoint .mpb-label { background: linear-gradient(90deg,#fbbf24,#d97706); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
/* 이벤트 — 핑크 그라데이션 */
#mpbEvent .mpb-label { background: linear-gradient(90deg,#f472b6,#ec4899); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
/* ── 금액 값 ── */
.mpb-val {
font-size: 13.5px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
color: var(--text-1, #f1f5f9);
}
/* ── 단위 텍스트 ── */
.mpb-unit {
font-size: 9.5px;
font-weight: 700;
color: var(--text-3, #94a3b8);
margin-left: 1px;
}
/* ── 셀 하단 컬러 액센트 라인 ── */
#mpbKuji::after { content:''; position:absolute; bottom:0; left:8%; right:8%; height:2.5px; border-radius:2px 2px 0 0; background:linear-gradient(90deg,#6366f1,#818cf8); }
#mpbPoint::after { content:''; position:absolute; bottom:0; left:8%; right:8%; height:2.5px; border-radius:2px 2px 0 0; background:linear-gradient(90deg,#d97706,#fbbf24); }
#mpbEvent::after { content:''; position:absolute; bottom:0; left:8%; right:8%; height:2.5px; border-radius:2px 2px 0 0; background:linear-gradient(90deg,#ec4899,#f472b6); }
}
/* ══════════════════════════════════════════════════════════════
🔒 하단 고정 UI 통합 배치 규칙 (모바일 + PC)
─────────────────────────────────────────────────────────────
z-index 계층:
탭바(bottomNavBar) z:600
토스트/배너 z:20000 (탭바보다 위, 뜯기 모달보다 아래)
전체화면 모달 z:9990+ (탭바 포함 전체 덮음)
─────────────────────────────────────────────────────────────
bottom 기준값:
모바일(≤600px): 탭바(56px) + safe-area + gap
PC(>600px) : gap 만큼만
─────────────────────────────────────────────────────────────
CSS 변수:
--bnav: 56px 탭바 높이
--sai : env(safe-area-inset-bottom, 0px)
--fp : calc(var(--bnav) + var(--sai)) 모바일 기본 floor
══════════════════════════════════════════════════════════════ */
/* safe-area probe */
#_saiProbe {
position: fixed; bottom: 0; /* navBarView가 홈바 처리 */
height: 0; width: 0; pointer-events: none; visibility: hidden; z-index: -1;
}
/* CSS 변수 보강: --bnav/--sai/--fp (--bottom-nav 와 동기화) */
:root {
--bnav: var(--bottom-nav, 56px); /* 기존 --bottom-nav 와 동기 */
--sai: 0px; /* Android: navBarView가 홈바 공간 처리 → env()=0 고정 */
--fp: calc(var(--bnav) + var(--sai)); /* 탭바+safe-area floor */
--mpb-h: 0px; /* mobilePointBar 높이: JS가 로그인 후 동적 갱신 */
--mobile-safe-bottom: 24px; /* Android: navBarView가 홈바 처리 → 고정 24px */
--app-nav-inset: 0px; /* Android WebView 시스템 네비게이션 바 높이: JS가 동적 계산 */
}
/* ══ 탭바: z-index 절대 수호 ══
z-index 계층(오름차순):
600 탭바(bottomNavBar) — 항상 최하 base
9100 moreSheet 백드롭
9200 moreSheet 시트
9500 플로팅 버튼 (탭바 위 bottom offset 으로 겹침 방지)
9800 스크롤-투-탑 버튼
9985 결제완료 모달 (전체화면, 탭바 포함 덮음)
9990 다중뜯기 모달 (전체화면)
20000 토스트/배너 (전체화면 모달 제외 최상위)
플로팅버튼은 bottom calc 로 탭바 위에 배치 → 탭바가 가리지 않음.
moreSheet 는 bottom=var(--fp) 로 탭바 위에서 시작 → 탭바 노출 유지. */
#bottomNavBar {
z-index: 600 !important; /* 기본값 유지 — 탭바 위 UI는 bottom offset 으로 배치 */
}
/* evHistoryModal 열릴 때 탭바를 모달 뒤로 내림 */
#bottomNavBar.evh-behind {
z-index: 1 !important;
}
/* evHistoryModal 열린 동안 상/하단 탭바 + 상단 헤더/포인트바 완전 숨김 (채팅방 방식) */
body.evh-modal-open #bottomNavBar,
body.evh-modal-open #lkTabbar,
body.evh-modal-open #lkSiteHeader,
body.evh-modal-open #mobilePointBar {
display: none !important;
}
/* ★ [TEAR-NAV] 뜯기 화면(다중/단일) 진입 시 하단 탭바 완전 숨김 — 모바일 전용 */
@media (max-width: 768px) {
body.ok-tear-open #bottomNavBar {
display: none !important;
}
/* ★ [DETAIL-NAV] 쿠지 종이 선택 페이지 진입 시 하단 탭바 완전 숨김 */
body.ok-detail-open #bottomNavBar {
display: none !important;
}
/* ★ [DETAIL-NAV] 탭바 숨김 시 --fp를 safe-area 만으로 재정의
→ okFloatPayBar padding-bottom이 탭바 56px 빈 공간 없이 딱 붙음 */
body.ok-detail-open {
--fp: 0px !important; /* navBarView가 홈바 처리 */
--bnav: 0px !important;
}
/* ★ [DETAIL-NAV] 하단 폰 UI safe-area 영역만 배경 채움
- #okFloatPayBar 자체는 투명(배경 없음) — ok-float-pay-inner 뒤가 안 비쳐야 하므로
- ::after 가상요소로 safe-area 높이만큼 배경 삽입 (버튼 영역 위까지 올라오지 않음) */
body.ok-detail-open #okFloatPayBar {
padding-bottom: 0px !important; /* navBarView가 홈바 처리 */
}
/* 충전 탭 UI 세로 축소 — 모바일 2행 레이아웃 compact */
body.ok-detail-open .ok-float-pay-inner {
border-radius: 16px 16px 0 0;
gap: 7px !important;
padding: 10px 14px 8px !important;
}
body.ok-detail-open .ok-float-pay-info {
gap: 6px !important;
}
body.ok-detail-open .ok-float-pay-icon { font-size: 17px !important; }
body.ok-detail-open .ok-float-pay-count { font-size: 13px !important; }
body.ok-detail-open .ok-float-pay-count::after { font-size: 13px !important; margin: 0 5px !important; }
body.ok-detail-open .ok-float-pay-price { font-size: 13px !important; }
body.ok-detail-open .ok-float-pay-price b { font-size: 13px !important; }
body.ok-detail-open .ok-float-clear-btn { width: 28px !important; height: 28px !important; font-size: 13px !important; }
body.ok-detail-open .ok-float-pay-actions { gap: 8px !important; }
body.ok-detail-open .ok-float-charge-btn {
padding: 9px 0 !important;
font-size: 13px !important;
border-radius: 12px !important;
}
body.ok-detail-open .ok-float-buy-btn {
padding: 9px 0 !important;
font-size: 14px !important;
border-radius: 12px !important;
}
}
#okQueueFloatBtn { z-index: 9500 !important; }
/* ══ 대기열 플로팅 버튼 ══ */
#okQueueFloatBtn {
bottom: calc(var(--bnav, 56px) + 10px) !important; /* 탭바 바로 위 10px — navBarView가 홈바 처리 */
transition: bottom 0.2s ease;
}
/* ★ [APP-NAV-FIX] 앱(Android WebView) 전용: 시스템 내비게이션 바 높이 추가
targetSdk=35(Android 15) edge-to-edge 강제 적용 시 env(safe-area-inset-bottom)이
WebView에서 0 또는 부정확한 값을 반환할 수 있음.
JS _setNavInset()이 visualViewport 차이로 정확히 계산한 --app-nav-inset을 추가 적용.
okFloatPayBar와 동일한 패턴. 브라우저 접속 시에는 is-app-android 미주입 → 영향 없음. */
html.is-app-android #okQueueFloatBtn {
bottom: calc(var(--bnav, 56px) + var(--app-nav-inset, 0px) + 10px) !important; /* navBarView가 홈바 처리 */
}
@media (min-width: 601px) {
#okQueueFloatBtn { bottom: 16px !important; } /* PC: 탭바 없음 */
}
@media (min-width: 601px) and (max-width: 750px) {
/* Galaxy Fold 펼침(601-750px): 하단탭+safe-area 위로 배치 */
#okQueueFloatBtn {
bottom: calc(var(--bnav, 56px) + 10px) !important; /* navBarView가 홈바 처리 */
}
html.is-app-android #okQueueFloatBtn {
bottom: calc(var(--bnav, 56px) + var(--app-nav-inset, 0px) + 10px) !important; /* navBarView가 홈바 처리 */
}
}
/* ══ 결제 완료 확인 모달: 탭바 위 여백 확보 ══ */
#okPayDoneModal {
padding-bottom: calc(var(--fp) + 8px) !important;
}
@media (min-width: 601px) {
#okPayDoneModal {
padding-bottom: 8px !important; /* PC: 탭바 없음 */
}
}
/* ══ 구매 선택바 (뽑기 화면 상단 sticky) ══ */
#okSelectBar {
position: sticky;
top: 0;
z-index: 52;
display: none !important; /* 상단 바 숨김 — floating 바로 대체 */
}
/* ══ Floating 결제 바 (하단탭 위 고정) ══ */
/* ★ 모바일+중간화면 전용: 구매하기 바(okFloatPayBar)가 표시될 때
→ okFloatPayBar(구매하기 바)는 원래 위치(--fp) 그대로 유지
→ okQueueFloatBtn(타이머 버튼)을 구매하기 바 위로 올림 (--fp + 68px)
→ scrollTopBtn(빨간 위로가기)는 JS(_updateScrollBtnBottom)가 직접 계산
:has() 는 Chrome 105+/Safari 15.4+/Firefox 121+ 지원 (구형 미지원 시 JS fallback) */
@media (max-width: 750px) {
body:has(#okFloatPayBar:not(.hidden)) #okQueueFloatBtn {
bottom: calc(var(--fp, 56px) + 68px) /* navBarView가 홈바 처리 */ !important;
}
/* JS fallback: ok-float-pay-visible 클래스 지원 (구형 브라우저 대비) */
body.ok-float-pay-visible #okQueueFloatBtn {
bottom: calc(var(--fp, 56px) + 68px) /* navBarView가 홈바 처리 */ !important;
}
}
#okFloatPayBar {
position: fixed;
bottom: 0;
left: 0; right: 0;
z-index: 590; /* 탭바(600) 바로 아래 */
padding: 0 12px calc(var(--fp, 56px)); /* 하단탭 높이만큼 내부 여백으로 탭바에 밀착 */
pointer-events: none;
transition: bottom 0.2s ease;
}
/* ★ [SAFE-AREA-BG] 하단 safe-area 영역 배경 채움 — 항상 적용
탭바 있을 때: 탭바(z:600)에 가려져 보이지 않음 (무해)
탭바 없을 때(ok-detail-open 등): ok-float-pay-inner 동일 다크 배경으로 폰 UI 투명 방지 */
#okFloatPayBar::after {
content: '';
display: block;
position: absolute;
left: 0; right: 0; bottom: 0;
height: 0; /* navBarView가 홈바 처리 */
background: #13111f;
pointer-events: none;
z-index: 0;
}
#okFloatPayBar.hidden { display: none !important; }
/* ── 중간 화면 (601~750px): 갤럭시 폴드 펼침 / 소형 갤탭
→ 2줄 레이아웃 유지 + 탭바 여백 유지 + 좌우 여백 넓게 ── */
@media (min-width: 601px) and (max-width: 750px) {
#okFloatPayBar {
bottom: 0;
padding: 0 20px calc(var(--fp, 56px)); /* 탭바+safe-area 여백 유지 */
left: 0; right: 0;
transform: none;
max-width: none;
}
}
/* ── PC / 대형 화면 (751px 이상): 1줄 레이아웃, 중앙 정렬 ── */
@media (min-width: 751px) {
#okFloatPayBar { bottom: 0; padding-bottom: 0; max-width: 760px; left: 50%; transform: translateX(-50%); } /* PC: 탭바 없음 */
}
/* ── 앱(Android WebView) 전용: 모든 너비에서 시스템 네비게이션 바 여백 추가 ──
is-app-android 클래스는 JS(페이지 로드 즉시)가 UA 감지 후 에 주입.
--app-nav-inset: visualViewport 차이로 동적 계산 (제스처 모드:0px, 버튼 모드:~48px).
브라우저 접속 시에는 이 셀렉터가 적용되지 않으므로 기존 동작 유지. ── */
html.is-app-android #okFloatPayBar {
padding-bottom: calc(var(--fp, 56px) + var(--app-nav-inset, 0px)) !important;
}
/* 앱 + 601px 이상: PC 분기(padding-bottom:0)를 override하여 여백 복원 */
@media (min-width: 601px) {
html.is-app-android #okFloatPayBar {
padding-bottom: calc(var(--fp, 56px) + var(--app-nav-inset, 0px)) !important;
/* 751px 이상(1줄 PC 분기)에서도 앱이면 탭바+네비게이션 여백 확보 */
}
}
/* ══ [MOBILE-WIDE] 터치 기기(갤폴드/갤탭 등) 너비 무관 모바일 UI 강제 적용 ══
is-touch-device = UA(/Android|iPhone|iPad/) 또는 maxTouchPoints>1+Macintosh(iPad Pro)
★ 561px 초과에서만 적용 — 일반폰(≤560px)은 기존 CSS 분기가 담당, 충돌 방지.
※ PC 브라우저는 is-touch-device 미적용 → 기존 동작 그대로 유지. ══ */
@media (min-width: 561px) {
html.is-touch-device .lk-tabbar {
display: none !important; /* 상단탭 숨김 */
}
html.is-touch-device #bottomNavBar {
display: flex !important; /* 하단탭 표시 */
}
/* mobilePointBar: JS 로그인 체크 후 display:flex 주입 — CSS 강제 불필요 */
/* 터치 기기에서 구매바: PC 중앙정렬 해제 → 풀너비 모바일 형태 */
html.is-touch-device #okFloatPayBar {
max-width: none !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
padding-bottom: calc(var(--fp, 56px)) !important;
}
/* notice-modal: 터치 기기에서 하단탭 여백 복원 */
html.is-touch-device .notice-modal {
padding-bottom: calc(var(--bottom-nav, 56px) + 8px) !important; /* navBarView가 홈바 처리 */
}
html.is-touch-device .notice-card {
max-height: calc(100vh
- var(--hdr-total, 60px)
- var(--bottom-nav, 56px)
- env(safe-area-inset-bottom, 0px)
- 24px
) !important;
}
}
.ok-float-pay-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: linear-gradient(135deg, #13111f 0%, #1e1b4b 50%, #2d2a5e 100%);
border: 1.5px solid rgba(99,102,241,.45);
border-top: 2px solid rgba(139,92,246,.6);
border-radius: 20px 20px 0 0;
padding: 10px 14px 8px; /* 모바일: 하단 살짝 compact */
box-shadow: 0 -6px 32px rgba(79,70,229,.3), 0 -1px 0 rgba(139,92,246,.2);
pointer-events: all;
position: relative;
overflow: hidden;
}
@media (min-width: 751px) {
.ok-float-pay-inner { padding: 14px 20px 10px; } /* PC(751px+): 하단 compact */
}
.ok-float-pay-inner::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(139,92,246,.8), rgba(99,102,241,.8), transparent);
}
.ok-float-pay-info {
display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; flex-wrap: nowrap;
}
.ok-float-pay-icon {
font-size: 22px; flex-shrink: 0; line-height: 1;
filter: drop-shadow(0 0 8px rgba(139,92,246,.6));
}
/* PC/기본: 장수·포인트·뱃지 가로 일렬 — 동일 크기·중앙 정렬 */
.ok-float-pay-text {
display: flex; flex-direction: row; align-items: center; gap: 0; min-width: 0; flex-wrap: nowrap;
}
.ok-float-pay-count {
font-size: 16px; color: #c4b5fd; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; line-height: 1.2;
}
/* 구분자 · */
.ok-float-pay-count::after {
content: '·'; margin: 0 8px; color: #475569; font-weight: 400; font-size: 16px;
}
.ok-float-pay-price {
font-size: 16px; color: #e0e7ff; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap;
}
.ok-float-pay-price b { color: #a5b4fc; font-size: 16px; font-weight: 800; }
#okFloatPayUnit { font-size: 14px !important; font-weight: 700; color: #8b9cc8; margin-left: 3px; vertical-align: baseline; }
.ok-float-pay-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: nowrap; }
/* ok-float-buy-btn-full: 충전 버튼 제거 후 구매하기 버튼 단독 풀너비 */
.ok-float-buy-btn-full { flex: 1 !important; min-width: 0; }
@media (min-width: 751px) {
/* PC(751px+): 1줄 레이아웃, 폰트 약간 키움 */
.ok-float-pay-count { font-size: 17px; }
.ok-float-pay-count::after { font-size: 17px; margin: 0 9px; }
.ok-float-pay-price { font-size: 17px; }
.ok-float-pay-price b { font-size: 17px; }
#okFloatPayUnit { font-size: 15px !important; }
}
.ok-float-clear-btn {
width: 34px; height: 34px; border-radius: 10px;
background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
color: #fca5a5; font-size: 15px; font-weight: 700; cursor: pointer;
transition: all .18s; display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ok-float-clear-btn:hover { background: rgba(239,68,68,.28); border-color: rgba(239,68,68,.6); transform: scale(1.08); }
.ok-float-charge-btn {
padding: 10px 14px; border-radius: 999px;
background: transparent;
border: 1.5px solid rgba(139,92,246,.55);
color: #c4b5fd; font-size: 13px; font-weight: 800;
cursor: pointer; transition: all .18s;
white-space: nowrap; letter-spacing: -.01em;
flex-shrink: 0;
}
.ok-float-charge-btn:hover { background: rgba(139,92,246,.18); border-color: rgba(167,139,250,.8); color: #ddd6fe; transform: translateY(-1px); }
.ok-float-charge-btn:active { transform: translateY(0) scale(.97); }
.ok-float-buy-btn {
padding: 10px 22px; border-radius: 999px;
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #9333ea 100%);
border: none; color: #fff; font-size: 14px; font-weight: 900;
cursor: pointer; transition: all .18s;
white-space: nowrap; letter-spacing: .01em;
box-shadow: 0 4px 16px rgba(99,102,241,.4);
position: relative; overflow: hidden;
}
.ok-float-buy-btn::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
pointer-events: none;
}
.ok-float-buy-btn:hover:not(:disabled) {
filter: brightness(1.15); transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(99,102,241,.55);
}
.ok-float-buy-btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.ok-float-buy-btn:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(.3); }
/* ── 모바일 전용: 2행 레이아웃 (600px 이하) ── */
/* ★ 기본 스타일 뒤에 위치해야 덮어쓰기가 올바르게 동작 */
@media (max-width: 600px) {
/* 내부 컨테이너: flex-column으로 2행 */
.ok-float-pay-inner {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 14px 16px 12px;
border-radius: 20px 20px 0 0;
}
/* ── 1행: 아이콘 + 선택 정보(가로 일렬) + ✕ 버튼 ── */
.ok-float-pay-info {
width: 100%;
flex: unset;
justify-content: flex-start;
align-items: center;
gap: 8px;
}
/* ✕ 버튼: info 행 맨 오른쪽으로 밀기 */
.ok-float-pay-info .ok-float-clear-btn {
margin-left: auto;
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 9px;
}
.ok-float-pay-icon { font-size: 20px; }
/* 장수 + 포인트 + 뱃지 가로 일렬 (모바일 — 기본 스타일 상속, 크기 통일) */
.ok-float-pay-text { flex: 1; }
.ok-float-pay-count { font-size: 15px; }
.ok-float-pay-count::after { font-size: 15px; margin: 0 7px; }
.ok-float-pay-price { font-size: 15px; }
.ok-float-pay-price b { font-size: 15px; }
#okFloatPayUnit { font-size: 13px !important; }
#okFloatPayBar.all-last .ok-float-pay-price::after { margin: 0 7px; }
/* ── 2행: 구매하기 버튼 풀너비 ── */
.ok-float-pay-actions {
width: 100%;
flex-shrink: unset;
gap: 10px;
}
.ok-float-buy-btn,
.ok-float-buy-btn-full {
flex: 1;
padding: 13px 0;
font-size: 16px;
font-weight: 900;
border-radius: 14px;
letter-spacing: .01em;
}
}
/* ── 중간 화면 2줄 레이아웃 (601~750px): 갤럭시 폴드 펼침 / 소형 갤탭
max-width:600px 블록과 동일한 2줄 구조지만 좌우 여백·폰트 더 여유롭게 ── */
@media (min-width: 601px) and (max-width: 750px) {
/* 내부 컨테이너: 2줄 유지 */
.ok-float-pay-inner {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 16px 24px 14px; /* 좌우 여백 더 넓게 */
border-radius: 20px 20px 0 0;
}
/* ── 1행: 아이콘 + 선택 정보 + ✕ 버튼 ── */
.ok-float-pay-info {
width: 100%;
flex: unset;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.ok-float-pay-info .ok-float-clear-btn {
margin-left: auto;
flex-shrink: 0;
width: 34px; height: 34px;
border-radius: 10px;
}
.ok-float-pay-icon { font-size: 22px; }
.ok-float-pay-text { flex: 1; }
.ok-float-pay-count { font-size: 16px; }
.ok-float-pay-count::after { font-size: 16px; margin: 0 9px; }
.ok-float-pay-price { font-size: 16px; }
.ok-float-pay-price b { font-size: 16px; }
#okFloatPayUnit { font-size: 14px !important; }
#okFloatPayBar.all-last .ok-float-pay-price::after { margin: 0 9px; }
/* ── 2행: 구매하기 버튼 풀너비 (중간 화면) ── */
.ok-float-pay-actions {
width: 100%;
flex-shrink: unset;
gap: 12px;
}
.ok-float-buy-btn,
.ok-float-buy-btn-full {
flex: 1;
padding: 14px 0;
font-size: 17px;
font-weight: 900;
border-radius: 14px;
letter-spacing: .01em;
}
/* all-last 강조 색 (중간 화면도 모바일과 동일하게) */
#okFloatPayBar.all-last .ok-float-pay-count { color: #fbbf24; }
#okFloatPayBar.all-last .ok-float-pay-count::after { color: rgba(251,191,36,.5); }
}
/* ── 마지막 장 전체 선택 시 구매버튼·카운터 강조 (all-last) ── */
#okFloatPayBar.all-last .ok-float-buy-btn:not(:disabled) {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 40%, #f59e0b 100%);
box-shadow: 0 0 0 3px rgba(239,68,68,.45), 0 6px 24px rgba(239,68,68,.55);
animation: okAllLastPulse 1.2s ease-in-out infinite;
}
#okFloatPayBar.all-last .ok-float-pay-count b {
color: #fbbf24;
text-shadow: 0 0 8px rgba(251,191,36,.8);
animation: okAllLastPulse 1.2s ease-in-out infinite;
}
/* 2줄 레이아웃(≤750px) 시 all-last 구분자도 황금색으로 */
@media (max-width: 750px) {
#okFloatPayBar.all-last .ok-float-pay-count { color: #fbbf24; }
#okFloatPayBar.all-last .ok-float-pay-count::after { color: rgba(251,191,36,.5); }
}
#okFloatPayBar.all-last .ok-float-pay-icon {
animation: okAllLastSpin 1.5s linear infinite;
display: inline-block;
}
@keyframes okAllLastPulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: .82; transform: scale(1.04); }
}
@keyframes okAllLastSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ══ 차례 시간 배지 (대기열 참가 화면) ══ */
.ok-queue-turn-time-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 20px;
background: rgba(30,36,54,.8);
border: 1.5px solid rgba(148,163,184,.2);
color: #94a3b8; font-size: 13px; font-weight: 800;
margin-bottom: 14px;
letter-spacing: .01em;
}
.ok-turn-time-icon { font-size: 15px; }
/* ══ okQueueJoinBox: 현재 진행자 강조 카드 ══ */
.ok-join-host-card {
display: flex; align-items: center; gap: 10px;
background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(5,150,105,.08));
border: 1.5px solid rgba(16,185,129,.45);
border-radius: 14px; padding: 10px 16px;
margin: 4px 0 10px; width: 100%; box-sizing: border-box;
box-shadow: 0 0 16px rgba(16,185,129,.18), inset 0 1px 0 rgba(255,255,255,.04);
animation: okFadeIn .35s ease;
}
.ok-join-host-avatar {
font-size: 24px; line-height: 1; flex-shrink: 0;
filter: drop-shadow(0 0 6px rgba(16,185,129,.6));
}
.ok-join-host-info { flex: 1; text-align: left; min-width: 0; }
.ok-join-host-label {
font-size: 10px; color: #34d399; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
text-shadow: 0 0 8px rgba(52,211,153,.5);
}
.ok-join-host-name {
font-size: 14px; font-weight: 900; color: #ecfdf5;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-shadow: 0 0 10px rgba(52,211,153,.3);
}
/* 초록색 라이브 점 (깜빡임) */
.ok-join-host-live-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
background: #10b981;
box-shadow: 0 0 6px rgba(16,185,129,.8);
animation: okLiveDotBlink 1.2s ease-in-out infinite;
}
@keyframes okLiveDotBlink {
0%,100% { opacity: 1; box-shadow: 0 0 6px rgba(16,185,129,.8); }
50% { opacity: .4; box-shadow: 0 0 2px rgba(16,185,129,.3); }
}
/* joinBox에 진행자 있을 때 — state-box에 초록 테두리 강조 */
.ok-queue-state-box.join.has-active {
border-color: rgba(16,185,129,.35);
box-shadow: 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04),
0 0 20px rgba(16,185,129,.1);
}
/* 아이콘: 대기자 있으면 다른 느낌 */
.ok-queue-state-box.join.has-active .ok-queue-state-icon {
filter: drop-shadow(0 0 16px rgba(16,185,129,.5));
}
/* ══ 뽑기 화면 하단 여백 (탭바+floating 바에 가리지 않게) ══ */
.ok-papers-section {
padding-bottom: 0; /* ok-done-bar padding-top이 위 여백 담당 */
}
@media (min-width: 601px) {
.ok-papers-section {
padding-bottom: 0;
}
}
/* ══ 위로가기 버튼 (scroll-to-top) ══
bottom 위치는 JS(_updateScrollBtnBottom)가 직접 계산해서 inline으로 설정
CSS는 기타 스타일만 담당 */
#scrollTopBtn {
display: flex;
align-items: center;
justify-content: center;
transition: bottom 0.2s ease, opacity 0.25s, transform 0.25s;
}
/* ══ 전역 floating 뒤로가기 버튼 ══ */
#globalBackBtn {
display: none;
position: fixed;
left: 14px;
z-index: 9401;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0 14px 0 10px;
height: 40px;
border-radius: 20px;
border: none;
cursor: pointer;
background: rgba(30, 30, 50, 0.82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #e2e8f0;
font-size: 13px;
font-weight: 700;
font-family: inherit;
box-shadow: 0 2px 12px rgba(0,0,0,.35);
transition: opacity .2s, transform .15s, bottom .2s ease;
white-space: nowrap;
letter-spacing: -.2px;
}
#globalBackBtn:active { transform: scale(.93); }
#globalBackBtn .gbb-arrow { font-size: 16px; line-height: 1; }
/* ══ moreSheet (더보기 바텀시트) ══
모바일/PC 모두 탭바 위에서 시작 (bottom = --fp / --bottom-nav)
백드롭은 탭바를 덮지 않음 */
#moreSheet {
bottom: var(--fp) !important;
padding-bottom: 8px !important;
}
#moreSheetBackdrop {
bottom: calc(var(--bnav, 56px) + var(--sai, 0px)) !important;
}
@media (min-width: 601px) {
#moreSheet { bottom: 0 !important; padding-bottom: 8px !important; } /* PC */
#moreSheetBackdrop { bottom: 0 !important; }
}
@media (min-width: 601px) and (max-width: 750px) {
/* Galaxy Fold 펼침(601-750px): 홈바/safe-area 가림 방지 */
#moreSheet {
bottom: 0 !important;
padding-bottom: 18px !important; /* navBarView가 홈바 처리 */
}
}
/* ══ 전체화면 모달 내부 스크롤 컨텐츠: 탭바에 가리지 않도록 하단 여백 ══
inset:0 모달은 탭바를 덮지만, overflow-y:auto 스크롤 컨텐츠 끝이
탭바 뒤로 숨지 않도록 padding-bottom 추가 */
#okMultiResultModal > div {
padding-bottom: calc(var(--fp) + 16px) !important;
}
@media (min-width: 601px) {
#okMultiResultModal > div {
padding-bottom: 16px !important; /* PC: 탭바 없음 */
}
}
/* ══ 대기열 뷰 / 뽑기 뷰: 탭바에 가리지 않도록 하단 여백 ══ */
#okQueueView {
padding-bottom: calc(var(--fp) + 4px);
}
#okDetailView {
padding-bottom: 0; /* ok-done-bar margin-bottom이 담당 */
}
/* ── 세트 진입 스크롤: 히어로 카드(썸네일) 상단 = 헤더+탭바 바로 아래 ── */
/* _scrollToHero → getBoundingClientRect 실측 → window.scrollTo (CSS 변수 타이밍 무관) */
.ok-queue-hero-card {
scroll-margin-top: calc(var(--hdr-total, 60px) + var(--tab-h, 47px) + 4px);
}
/* ── 대기열 박스: scrollIntoView({ block:'end' }) 시 하단 nav+10px 여백 확보 ── */
#okQueueActiveBox,
#okQueueWaitingBox,
#okQueueJoinBox {
scroll-margin-bottom: calc(var(--bottom-nav, 56px) + 10px);
}
@media (min-width: 601px) {
#okQueueView {
padding-bottom: 4px; /* PC: 탭바 없음 */
}
.ok-queue-hero-card {
scroll-margin-top: calc(var(--hdr-total, 60px) + 4px); /* PC: 탭바 없음 */
}
#okQueueActiveBox,
#okQueueWaitingBox,
#okQueueJoinBox {
scroll-margin-bottom: 10px; /* PC: bottomNav 없음 */
}
#okDetailView {
padding-bottom: 0;
}
}
/* ══════════════════════════════════════════════════════════
★ UX 개선 패치 v2 — 23-feature upgrade
══════════════════════════════════════════════════════════ */
/* ── FEAT-1: 제스처 힌트 오버레이 ── */
#okGestureHint {
position: fixed; inset: 0; z-index: 10100;
background: rgba(0,0,0,.55); display: flex;
flex-direction: column; align-items: center; justify-content: center;
animation: okFadeIn .3s ease;
pointer-events: all;
}
#okGestureHint .ok-gh-hand {
font-size: 60px; animation: okGestureSwipe 1.2s ease-in-out infinite;
filter: drop-shadow(0 4px 16px rgba(99,102,241,.6));
}
#okGestureHint .ok-gh-text {
margin-top: 18px; color: #e0e7ff; font-size: 18px; font-weight: 700;
text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
#okGestureHint .ok-gh-sub {
color: #94a3b8; font-size: 13px; margin-top: 6px;
}
@keyframes okGestureSwipe {
0% { transform: translateX(-30px) rotate(-10deg); opacity:.5; }
50% { transform: translateX(30px) rotate(10deg); opacity:1; }
100% { transform: translateX(-30px) rotate(-10deg); opacity:.5; }
}
/* ── FEAT-2: 타이머 긴급 UI ── */
.ok-timer-urgent-30 { color: #ef4444 !important; animation: okTimerPulse 1s ease infinite; }
.ok-timer-urgent-10 { color: #ef4444 !important; animation: okTimerFlash .4s ease infinite;
text-shadow: 0 0 12px rgba(239,68,68,.9); }
.ok-timer-ring-urgent { box-shadow: 0 0 0 4px rgba(239,68,68,.5) !important; }
@keyframes okTimerPulse {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:.6; transform:scale(1.05); }
}
@keyframes okTimerFlash {
0%,100% { background:rgba(239,68,68,.15); }
50% { background:rgba(239,68,68,.4); }
}
/* ── FEAT-2b: 5초 팝업 카운트다운 ── */
#okTimerBigPopup {
position: fixed; inset: 0; z-index: 10200;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
#okTimerBigPopup .ok-tbp-num {
font-size: 120px; font-weight: 900; color: #ef4444;
text-shadow: 0 0 40px rgba(239,68,68,.8), 0 0 80px rgba(239,68,68,.4);
animation: okTimerBigPop .6s ease-out;
line-height: 1;
}
@keyframes okTimerBigPop {
0% { transform: scale(2.5); opacity:0; }
60% { transform: scale(.9); opacity:1; }
100% { transform: scale(1); opacity:1; }
}
/* ── FEAT-3: 랭크별 결과 이펙트 ── */
#okRankEffectOverlay {
position: fixed; inset: 0; z-index: 10050;
pointer-events: none; overflow: hidden;
}
.ok-rank-gold-flash {
animation: okGoldFlash .6s ease-out forwards;
}
@keyframes okGoldFlash {
0% { background: rgba(251,191,36,.45); }
100% { background: transparent; }
}
.ok-rank-silver-shimmer {
animation: okSilverShimmer .8s ease-out forwards;
}
@keyframes okSilverShimmer {
0% { background: rgba(148,163,184,.3); }
100% { background: transparent; }
}
/* ── FEAT-4: 멀티티어 그리드 스크롤 인디케이터 ── */
.ok-multi-scroll-hint {
position: sticky; bottom: 70px; left: 0; right: 0; height: 48px;
background: linear-gradient(to bottom, transparent, rgba(5,7,20,.9));
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 6px; pointer-events: none; font-size: 13px;
color: #a5b4fc; font-weight: 700; animation: okBounceY 1.2s ease infinite;
z-index: 9;
}
@keyframes okBounceY {
0%,100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* ── FEAT-5: 세트카드 추가 배지 ── */
.ok-card-time-badge {
display: inline-flex; align-items: center; gap: 3px;
background: rgba(16,185,129,.15); color: #10b981;
border: 1px solid rgba(16,185,129,.3); border-radius: 6px;
font-size: 10px; font-weight: 700; padding: 2px 6px;
margin-left: 4px;
}
.ok-card-first-prize-badge {
display: inline-flex; align-items: center; gap: 3px;
background: rgba(251,191,36,.12); color: #fbbf24;
border: 1px solid rgba(251,191,36,.3); border-radius: 6px;
font-size: 10px; font-weight: 700; padding: 2px 6px;
margin-left: 4px;
}
.ok-card-participating-overlay {
position: absolute; inset: 0; background: rgba(99,102,241,.18);
border-radius: 16px; display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800; color: #a5b4fc; pointer-events: none;
letter-spacing: .04em;
}
/* ── FEAT-6: 필터 정렬 드롭다운 ── */
.ok-sort-select {
background: var(--surface); color: var(--text-2);
border: 1.5px solid var(--border); border-radius: 8px;
font-size: 12px; font-weight: 600; padding: 5px 10px;
cursor: pointer; outline: none; font-family: inherit;
transition: border-color .2s;
}
.ok-sort-select:focus { border-color: var(--brand); }
/* ok-filter-row: 위 메인 스타일 참조 */
/* ── FEAT-8: 대기열 예상 대기시간 (아케이드 리메이크) ── */
.ok-queue-wait-est {
position: relative; overflow: hidden;
background: linear-gradient(135deg, #0d0628 0%, #150a3a 60%, #0d0628 100%);
border: 2px solid #ff2d78;
border-radius: 16px; padding: 14px 20px;
/* waitingBox 내부에 배치: 위 순서배지와 구분, 아래 멤버리스트와 여유 */
margin: 16px 0 6px;
display: flex; align-items: center; justify-content: center; gap: 14px;
box-shadow: 0 0 14px rgba(255,45,120,.45), 0 0 32px rgba(255,45,120,.18), inset 0 0 20px rgba(255,45,120,.06);
width: 100%;
}
/* 스캔라인 애니메이션 */
.ok-queue-wait-est::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,45,120,.12) 50%, transparent 100%);
animation: okWaitScan 1.8s ease-in-out infinite;
}
/* 상단 하이라이트 라인 */
.ok-queue-wait-est::after {
content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,180,220,.7), transparent);
}
@keyframes okWaitScan {
0% { transform: translateX(-100%); opacity: 0; }
30% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}
.ok-wait-icon {
font-size: 26px; line-height: 1; flex-shrink: 0;
filter: drop-shadow(0 0 6px #ff2d78);
animation: okHourglassSpin 2.4s ease-in-out infinite;
display: inline-block;
}
@keyframes okHourglassSpin {
0% { transform: rotate(0deg); }
40% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
90% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
@keyframes okWaitBounce {
0%,100% { transform: translateY(0) scale(1); }
40% { transform: translateY(-5px) scale(1.15); }
60% { transform: translateY(-3px) scale(1.1); }
}
.ok-wait-body { display: flex; flex-direction: column; gap: 3px; }
.ok-wait-label {
font-size: 10px; color: #c0a0ff; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
text-shadow: 0 0 8px rgba(192,160,255,.6);
}
.ok-wait-value {
font-size: 22px; font-weight: 900; line-height: 1.1;
color: #ffe600;
text-shadow: 0 0 10px rgba(255,230,0,.8), 0 0 24px rgba(255,230,0,.4);
letter-spacing: .5px;
}
.ok-wait-value b { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.7); }
.ok-wait-sub {
font-size: 10px; color: #a78bda; margin-top: 1px;
letter-spacing: .5px;
}
/* ── FEAT-10: 라이브 당첨 피드 — 하단 팝업 비활성화 (히어로 패널에만 표시) ── */
#okLiveWinFeed {
display: none !important; /* 하단 팝업 피드 완전 비활성화 */
}
/* ── FEAT-11: 결제완료 모달 애니메이션 ── */
.ok-paydone-numbers {
display: flex; flex-wrap: wrap; gap: 6px;
justify-content: center; margin: 12px 0;
}
.ok-paydone-num-chip {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff; border-radius: 10px; padding: 6px 12px;
font-size: 16px; font-weight: 900;
animation: okChipFanIn .4s ease both;
box-shadow: 0 4px 14px rgba(99,102,241,.45);
}
@keyframes okChipFanIn {
from { transform: translateY(20px) scale(0.5); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.ok-paydone-tear-btn-pulse {
animation: okBtnPulse 1.4s ease infinite;
}
@keyframes okBtnPulse {
0%,100% { box-shadow: 0 4px 20px rgba(99,102,241,.4); transform: scale(1); }
50% { box-shadow: 0 4px 36px rgba(99,102,241,.8); transform: scale(1.03); }
}
/* ── FEAT-12: 배송 완료 애니메이션 체크 ── */
.ok-deliv-check-anim {
display: inline-block;
animation: okCheckBounce .5s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes okCheckBounce {
0% { transform: scale(0) rotate(-45deg); opacity:0; }
100% { transform: scale(1) rotate(0); opacity:1; }
}
.ok-deliv-cta-pulse {
animation: okDelivPulse 1.5s ease infinite;
}
@keyframes okDelivPulse {
0%,100% { box-shadow: 0 4px 16px rgba(16,185,129,.3); }
50% { box-shadow: 0 4px 28px rgba(16,185,129,.7); }
}
/* ── FEAT-13: iOS safe-area 보완 ── */
/* ★ [HITBOX-FIX] okQueueFloatBtn 제외:
이 버튼은 bottom 값 자체에 safe-area + --app-nav-inset 이 이미 포함되어 있음.
padding-bottom을 추가하면 버튼 히트박스가 시각적 카드 아래로 늘어나는 버그 발생.
앱(Android WebView)에서 특히 심각 — env(safe-area-inset-bottom)이 부정확한 값을 반환하거나
bottom calc와 이중 적용되어 히트박스가 아래로 튀어나옴. */
#okMultiResultBtnBar {
padding-bottom: 0; /* navBarView가 홈바 처리 */
}
#okQueueFloatBtn {
padding-bottom: 0 !important; /* safe-area는 bottom calc에서 처리 — padding 이중 적용 방지 */
}
/* ok-float-pay-inner safe-area: #okFloatPayBar padding-bottom(calc --fp)에 포함됨 */
/* ok-done-bar는 margin-bottom으로 탭바 여백 처리 → safe-area padding 불필요 */
/* ── FEAT-14: 터치 피드백 (종이 선택/해제) ── */
.ok-paper {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
/* ★ [BUG-FIX HOVER-FLICKER] 중복 transition 제거 — 위 .ok-paper 정의로 통합 */
}
.ok-paper.tap-feedback {
transform: scale(0.95) translateY(2px) !important;
transition-duration: .07s !important;
}
/* ★ [PERF-MOBILE] 모바일: tap-feedback transform 제거 → opacity만 사용 */
@media (max-width: 768px) {
.ok-paper.tap-feedback {
transform: none !important;
opacity: 0.65 !important;
transition-duration: .07s !important;
}
}
/* ── FEAT-15: 티어모달 가로 모드 대응 ── */
@media (orientation: landscape) and (max-height: 500px) {
#okMultiTearModal {
flex-direction: row !important;
}
.ok-mth-wrap {
width: 220px; flex-shrink: 0;
}
#okMultiGrid {
flex: 1;
}
}
/* ── FEAT-16: PC 2컬럼 레이아웃 ── */
@media (min-width: 1024px) {
.ok-detail-pc-layout {
display: grid !important;
grid-template-columns: 340px 1fr;
gap: 24px; align-items: start;
}
.ok-detail-pc-left { position: sticky; top: 80px; }
.ok-detail-pc-right { min-width: 0; }
}
/* ── FEAT-17: 내 뽑기 히스토리 패널 ── */
#okHistoryPanel {
position: fixed; inset: 0; z-index: 9980;
background: rgba(5,7,20,.97);
display: flex; flex-direction: column;
overflow: hidden;
}
#okHistoryPanel.hidden { display: none !important; }
.ok-history-header {
display: flex; align-items: center; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid rgba(99,102,241,.2);
background: rgba(15,12,50,.8);
}
.ok-history-header h3 { margin: 0; color: #e0e7ff; font-size: 18px; font-weight: 800; flex: 1; }
.ok-history-list {
flex: 1; overflow-y: auto; padding: 12px 16px;
-webkit-overflow-scrolling: touch;
}
.ok-history-item {
display: flex; align-items: center; gap: 12px;
background: rgba(30,27,75,.6); border: 1px solid rgba(99,102,241,.15);
border-radius: 12px; padding: 10px 14px; margin-bottom: 8px;
}
.ok-history-item img {
width: 44px; height: 44px; object-fit: cover;
border-radius: 8px; flex-shrink: 0;
}
.ok-history-item-info { flex: 1; min-width: 0; }
.ok-history-item-title { font-size: 13px; color: #e0e7ff; font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-history-item-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.ok-history-item-rank {
font-size: 12px; font-weight: 800; padding: 3px 8px;
border-radius: 6px; flex-shrink: 0;
}
.ok-history-item-rank.rank-1 { background: rgba(251,191,36,.2); color: #fbbf24; }
.ok-history-item-rank.rank-other { background: rgba(99,102,241,.2); color: #a5b4fc; }
.ok-history-stats {
display: flex; gap: 10px; padding: 12px 16px;
border-top: 1px solid rgba(99,102,241,.15);
flex-wrap: wrap;
}
.ok-history-stat-box {
flex: 1; min-width: 80px; background: rgba(30,27,75,.6);
border: 1px solid rgba(99,102,241,.2); border-radius: 10px;
padding: 8px 10px; text-align: center;
}
.ok-history-stat-box .val { font-size: 20px; font-weight: 900; color: #a5b4fc; }
.ok-history-stat-box .lbl { font-size: 10px; color: #64748b; margin-top: 2px; }
/* ── FEAT-18: 스켈레톤 UI ── */
.ok-skeleton {
background: linear-gradient(90deg,
rgba(30,27,75,.8) 25%,
rgba(60,55,120,.8) 50%,
rgba(30,27,75,.8) 75%);
background-size: 200% 100%;
animation: okSkeletonShimmer 1.4s ease infinite;
border-radius: 8px;
}
@keyframes okSkeletonShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ok-set-card-skeleton {
height: 200px; border-radius: 16px; margin-bottom: 0;
}
/* ── FEAT-19: 접근성 포커스 링 ── */
button:focus-visible, [role="button"]:focus-visible {
outline: 2px solid #6366f1 !important;
outline-offset: 2px !important;
}
/* ── History 버튼 (목록 우상단) ── */
.ok-history-fab {
position: absolute; top: 0; right: 0;
background: rgba(30,27,75,.85); border: 1.5px solid rgba(99,102,241,.35);
color: #a5b4fc; border-radius: 10px; padding: 6px 10px;
font-size: 12px; font-weight: 700; cursor: pointer;
transition: background .2s;
}
.ok-history-fab:hover { background: rgba(99,102,241,.25); }
/* ── 헤더 오른쪽 액션 그룹 (정렬 + 기록) ── */
.ok-header-actions {
display: flex; align-items: center; gap: 6px; flex-shrink: 0;
margin-left: auto;
}
/* ── PC: 구매내역 버튼 (헤더 오른쪽) ── */
.ok-history-btn {
display: inline-flex; align-items: center;
padding: 5px 16px;
background: #f59e0b;
border: none; border-radius: 999px;
color: #431407; font-size: 12px; font-weight: 900;
cursor: pointer; font-family: inherit;
transition: background .15s, transform .15s, box-shadow .15s;
white-space: nowrap; letter-spacing: .2px;
box-shadow: 0 2px 8px rgba(245,158,11,.4);
}
.ok-history-btn:hover {
background: #e08b00;
box-shadow: 0 4px 14px rgba(245,158,11,.6);
transform: translateY(-1px);
}
/* 모바일: 헤더 버튼 숨기고 필터행 버튼으로 대체 */
@media (max-width:600px) {
.ok-history-btn-header { display: none !important; }
}
/* ── 배송 CTA 프롬프트 ── */
.ok-ship-cta {
display: flex; align-items: center; gap: 10px;
background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(16,185,129,.08));
border: 1.5px solid rgba(16,185,129,.4); border-radius: 14px;
padding: 12px 16px; margin-top: 14px; cursor: pointer;
transition: background .2s;
}
.ok-ship-cta:hover { background: rgba(16,185,129,.2); }
.ok-ship-cta-text { flex: 1; }
.ok-ship-cta-text strong { color: #10b981; font-size: 14px; display: block; }
.ok-ship-cta-text span { font-size: 11px; color: #64748b; }
/* ══════════════════════════════════════════════
🎁 온라인쿠지 이용방법 가이드 모달
══════════════════════════════════════════════ */
/* ── 깜빡임 방지: display:none 대신 visibility+opacity로 숨김 ── */
#okGuideModal {
position: fixed; inset: 0; z-index: 99999;
background: rgba(0,0,0,.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex; /* 항상 flex — 레이아웃 계산 유지 */
align-items: flex-end;
justify-content: center;
/* 닫힌 상태: 불투명도 0 + 포인터 없음 (paint 없이 display:none 효과) */
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity .25s ease, visibility 0s .25s; /* 닫힐 때: opacity 먼저, visibility 나중 */
will-change: opacity;
}
#okGuideModal.ok-guide-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: opacity .25s ease, visibility 0s 0s; /* 열릴 때: 즉시 visible */
}
/* 시트 — 항상 DOM에 있고 transform으로만 올라옴 */
.ok-guide-sheet {
position: relative;
width: 100%; max-width: 520px;
max-height: 92vh;
background: linear-gradient(160deg, #0d1224 0%, #181440 45%, #231760 100%);
border-radius: 28px 28px 0 0;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 -8px 48px rgba(99,102,241,.4), 0 -1px 0 rgba(139,92,246,.6);
/* 닫힌 상태: 아래 숨겨져 있음 */
transform: translateY(100%);
transition: transform .38s cubic-bezier(.32,.72,0,1);
will-change: transform;
}
#okGuideModal.ok-guide-open .ok-guide-sheet {
transform: translateY(0);
}
/* 닫기 애니메이션은 JS에서 ok-guide-closing 클래스 → 트랜지션으로 처리 */
.ok-guide-sheet.ok-guide-closing {
transform: translateY(100%) !important;
}
/* 상단 드래그 핸들 */
.ok-guide-handle {
width: 36px; height: 4px;
background: rgba(255,255,255,.18);
border-radius: 99px;
margin: 14px auto 0;
flex-shrink: 0;
}
/* 닫기 버튼 */
.ok-guide-close {
position: absolute; top: 14px; right: 18px;
width: 32px; height: 32px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.13);
border-radius: 50%;
color: #94a3b8; font-size: 13px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .2s, color .2s, transform .15s;
z-index: 2;
}
.ok-guide-close:hover { background: rgba(255,255,255,.16); color: #fff; transform: scale(1.1); }
/* ── 헤더: 타이틀 + 진행 인디케이터 ── */
.ok-guide-header {
display: flex; flex-direction: column; align-items: center;
padding: 10px 20px 0;
flex-shrink: 0;
gap: 10px;
}
.ok-guide-header-title {
font-size: 11px; font-weight: 800; letter-spacing: .15em;
color: #6366f1; text-transform: uppercase;
}
/* 진행 인디케이터 */
.ok-guide-dots {
display: flex; gap: 6px;
justify-content: center;
flex-shrink: 0;
}
.ok-guide-dot {
width: 6px; height: 6px;
background: rgba(255,255,255,.15);
border-radius: 99px;
transition: all .35s cubic-bezier(.34,1.56,.64,1);
cursor: pointer;
}
.ok-guide-dot.active {
width: 24px;
background: linear-gradient(90deg, #6366f1, #a78bfa);
box-shadow: 0 0 8px rgba(139,92,246,.6);
}
/* 슬라이드 트랙 */
.ok-guide-track {
flex: 1;
overflow: hidden;
position: relative;
}
.ok-guide-slides {
display: flex;
width: 700%; /* 7 slides */
height: 100%;
transition: transform .38s cubic-bezier(.32,.72,0,1);
will-change: transform;
}
.ok-guide-slide {
width: calc(100% / 7);
flex-shrink: 0;
padding: 6px 24px 16px;
overflow-y: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ok-guide-slide::-webkit-scrollbar { display: none; }
/* 이모지 아이콘 */
.ok-guide-emoji {
font-size: 52px;
line-height: 1;
margin-bottom: 10px;
filter: drop-shadow(0 0 16px rgba(139,92,246,.65));
animation: okGuideEmojiPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes okGuideEmojiPop {
from { transform: scale(.35) rotate(-12deg); opacity:0; }
to { transform: scale(1) rotate(0deg); opacity:1; }
}
.ok-guide-slide-title {
font-size: 19px; font-weight: 900; color: #fff;
letter-spacing: -.5px; line-height: 1.3;
margin-bottom: 7px;
}
.ok-guide-slide-sub {
font-size: 13px; color: #94a3b8; line-height: 1.7;
margin-bottom: 12px;
max-width: 360px;
}
.ok-guide-slide-sub strong { color: #a5b4fc; }
.ok-guide-slide-sub em { color: #fbbf24; font-style: normal; font-weight: 700; }
/* ── 스텝 카드 ── */
.ok-guide-cards {
width: 100%;
display: flex; flex-direction: column; gap: 7px;
text-align: left;
}
.ok-guide-card {
background: rgba(99,102,241,.09);
border: 1px solid rgba(99,102,241,.22);
border-radius: 12px;
padding: 10px 13px;
display: flex; align-items: flex-start; gap: 10px;
animation: okGuideCardIn .38s ease both;
}
.ok-guide-card.ok-guide-card--warn {
background: rgba(251,113,133,.07);
border-color: rgba(251,113,133,.28);
}
.ok-guide-card.ok-guide-card--tip {
background: rgba(16,185,129,.07);
border-color: rgba(16,185,129,.28);
}
@keyframes okGuideCardIn {
from { transform: translateY(8px); opacity:0; }
to { transform: translateY(0); opacity:1; }
}
.ok-guide-card:nth-child(1) { animation-delay: .04s; }
.ok-guide-card:nth-child(2) { animation-delay: .1s; }
.ok-guide-card:nth-child(3) { animation-delay: .16s; }
.ok-guide-card:nth-child(4) { animation-delay: .22s; }
.ok-guide-card:nth-child(5) { animation-delay: .28s; }
.ok-guide-card-icon {
font-size: 17px; line-height: 1.2; flex-shrink: 0;
}
.ok-guide-card-text {
font-size: 12.5px; color: #cbd5e1; line-height: 1.6;
}
.ok-guide-card-text strong { color: #a5b4fc; }
.ok-guide-card-text em { color: #fbbf24; font-style:normal; font-weight:700; }
.ok-guide-card-text .ok-guide-tag {
display: inline-block;
background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.35);
color: #fca5a5; font-size: 10.5px; font-weight: 800;
border-radius: 6px; padding: 1px 6px; margin-left: 4px;
}
.ok-guide-card-text .ok-guide-tag--green {
background: rgba(16,185,129,.18); border-color: rgba(16,185,129,.35);
color: #6ee7b7;
}
/* 네비게이션 버튼 */
.ok-guide-nav {
display: flex; gap: 8px; align-items: center;
padding: 10px 18px;
padding-bottom: 18px; /* navBarView가 홈바 처리 */
flex-shrink: 0;
border-top: 1px solid rgba(255,255,255,.06);
}
.ok-guide-prev {
padding: 11px 16px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
color: #64748b; font-size: 13px; font-weight: 600;
cursor: pointer; transition: all .2s;
white-space: nowrap;
}
.ok-guide-prev:hover { background: rgba(255,255,255,.1); color: #94a3b8; }
.ok-guide-prev:disabled { opacity:.3; cursor:default; }
.ok-guide-next {
flex: 1;
padding: 12px;
background: linear-gradient(90deg, #4f46e5, #7c3aed);
border: none; border-radius: 12px;
color: #fff; font-size: 14px; font-weight: 800;
cursor: pointer;
box-shadow: 0 4px 16px rgba(99,102,241,.4);
transition: transform .15s, box-shadow .15s, background .2s;
letter-spacing: -.2px;
}
.ok-guide-next:hover {
transform: translateY(-1px);
box-shadow: 0 6px 22px rgba(99,102,241,.6);
}
.ok-guide-next:active { transform: translateY(0); }
.ok-guide-next.ok-guide-finish {
background: linear-gradient(90deg, #059669, #10b981);
box-shadow: 0 4px 16px rgba(16,185,129,.4);
}
.ok-guide-next.ok-guide-finish:hover {
box-shadow: 0 6px 22px rgba(16,185,129,.6);
}
/* 이용방법 버튼 (쿠지 목록 헤더) */
.ok-guide-how-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 13px;
background: linear-gradient(90deg, #4f46e5, #7c3aed);
border: none;
border-radius: 8px;
color: #fff; font-size: 12px; font-weight: 800;
cursor: pointer; transition: all .2s;
white-space: nowrap;
box-shadow: 0 2px 10px rgba(99,102,241,.45);
letter-spacing: -.1px;
}
.ok-guide-how-btn:hover {
background: linear-gradient(90deg, #4338ca, #6d28d9);
box-shadow: 0 3px 16px rgba(99,102,241,.65);
transform: translateY(-1px);
}
/* 히어로 배너 이용방법 버튼 — 위 B안 블록에서 정의됨 (ok-hero-guide-btn, ok-hero-app-btn) */
.ok-hero-app-btn:hover { background: rgba(22,163,74,.38); }
/* 스텝 번호 뱃지 */
.ok-guide-step-badge {
font-size: 11px; font-weight: 800; color: #6366f1;
background: rgba(99,102,241,.15);
border: 1px solid rgba(99,102,241,.3);
border-radius: 99px; padding: 2px 9px;
margin-bottom: 10px; letter-spacing: .5px;
}
/* 슬라이드 전환 애니메이션 (새 슬라이드 활성화 시 이모지 재생) */
.ok-guide-slide.ok-slide-active .ok-guide-emoji {
animation: okGuideEmojiPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.ok-guide-slide.ok-slide-active .ok-guide-card {
animation: okGuideCardIn .4s ease both;
}
/* ══════════════════════════════════════════════════════
완판 갤러리 모달 (ok-sold-gallery)
────────────────────────────────────────────────────
완판된 쿠지 세트의 상품 이미지와 판매 현황을 보여주는
독립 모달 — 대기열/구매 UI 완전 분리
══════════════════════════════════════════════════════ */
#okSoldGallery {
position: fixed; inset: 0; z-index: 9200;
background: rgba(0,0,0,.82);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 16px 12px;
overflow: hidden; /* 외부 스크롤 완전 차단 */
opacity: 0; pointer-events: none;
transition: opacity .22s ease;
}
#okSoldGallery.show {
opacity: 1; pointer-events: auto;
}
/* 내부 패널 — 정중앙 + 최대 높이 90vh + 자체 스크롤 */
.oksg-inner {
background: #ffffff;
border: 1px solid rgba(0,0,0,.1);
border-radius: 20px;
width: 100%; max-width: 680px;
max-height: 90vh;
display: flex; flex-direction: column; /* 헤더 고정 + 그리드 스크롤 */
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08);
animation: oksgSlideIn .28s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes oksgSlideIn {
from { transform: translateY(28px) scale(.97); opacity: 0; }
to { transform: none; opacity: 1; }
}
/* 헤더 */
.oksg-header {
position: relative;
padding: 22px 52px 18px 20px;
background: linear-gradient(135deg,#fffbeb 0%,#fef9f0 100%);
border-bottom: 1px solid rgba(251,191,36,.3);
flex-shrink: 0;
}
.oksg-header-thumb {
width: 56px; height: 56px; border-radius: 12px;
object-fit: cover; float: left; margin-right: 14px;
border: 2px solid rgba(251,191,36,.35);
box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.oksg-header-thumb-placeholder {
width: 56px; height: 56px; border-radius: 12px;
background: rgba(251,191,36,.08); float: left; margin-right: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 26px; border: 2px solid rgba(251,191,36,.2);
}
.oksg-title {
font-size: 17px; font-weight: 800; color: #1e293b;
line-height: 1.3; margin-bottom: 5px;
}
.oksg-sold-banner {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(251,191,36,.2); border: 1px solid rgba(234,179,8,.5);
color: #92400e; border-radius: 20px;
font-size: 12px; font-weight: 700; padding: 2px 10px;
}
.oksg-stats-row {
margin-top: 8px; clear: both;
display: flex; gap: 10px; flex-wrap: wrap;
font-size: 12px; color: #64748b;
}
.oksg-stats-row span { display: flex; align-items: center; gap: 4px; }
.oksg-close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(0,0,0,.07); border: none; cursor: pointer;
color: #64748b; font-size: 18px; line-height: 32px; text-align: center;
transition: background .15s, color .15s;
}
.oksg-close:hover { background: rgba(0,0,0,.13); color: #1e293b; }
/* 헤더 고정 */
.oksg-header {
flex-shrink: 0;
}
/* 스크롤 컨테이너 — flex:1 + overflow:auto 담당 */
.oksg-body {
flex: 1;
min-height: 0; /* flex 컨텍스트에서 overflow 활성화 필수 */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* 상품 그리드 — 자연스러운 높이로 펼쳐짐 (찌그러짐 없음) */
.oksg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px;
padding: 18px 16px 24px;
}
.oksg-prize-card {
background: #f8fafc;
border: 1px solid rgba(0,0,0,.08);
border-radius: 14px; overflow: hidden;
display: flex; flex-direction: column;
cursor: pointer;
/* ★ [BUG-FIX MOB-HOVER v2] transition/transform 완전 제거
@media(hover:hover) 조건이 일부 모바일 브라우저에서 true로 평가되어
롱프레스 시 :hover 상태가 유지 → 카드 확대 발동.
transform 자체를 사용하지 않으므로 transition도 불필요. */
}
/* hover/active/focus 시 transform 완전 차단 — 모바일 롱프레스 확대 방지 */
.oksg-prize-card:hover,
.oksg-prize-card:active,
.oksg-prize-card:focus { transform: none !important; }
.oksg-prize-card:hover .oksg-img-wrap img,
.oksg-prize-card:active .oksg-img-wrap img { transform: none !important; }
/* 이미지 영역 + 뱃지 */
.oksg-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; /* 1:1 정방형 강제 */
background: #f8fafc;
overflow: hidden;
}
.oksg-img-wrap img {
width: 100%; height: 100%;
object-fit: cover; /* 비율 유지하며 크롭 */
display: block;
/* transition 제거 — transform을 사용하지 않으므로 불필요 */
}
.oksg-img-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 36px;
}
/* 판매수 뱃지 — 이미지 오른쪽 위 */
.oksg-sold-badge {
position: absolute; top: 6px; right: 6px;
background: rgba(0,0,0,.65);
border: 1px solid rgba(255,255,255,.25);
color: #fff; font-size: 11px; font-weight: 700;
border-radius: 20px; padding: 2px 7px;
line-height: 1.5;
backdrop-filter: blur(4px);
}
.oksg-sold-badge.all-sold {
background: rgba(239,68,68,.85);
border-color: rgba(255,255,255,.2);
color: #fff;
}
/* 등수 뱃지 — 이미지 왼쪽 위 */
.oksg-rank-badge {
position: absolute; top: 6px; left: 6px;
font-size: 10px; font-weight: 800;
border-radius: 6px; padding: 2px 6px; line-height: 1.5;
backdrop-filter: blur(4px);
}
.oksg-rank-badge.rank-a { background:linear-gradient(135deg,#ff3b3b,#cc0000); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,59,59,.6); } /* 빨강 */
.oksg-rank-badge.rank-b { background:linear-gradient(135deg,#ff6d00,#e65100); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,109,0,.6); } /* 주황 */
.oksg-rank-badge.rank-c { background:linear-gradient(135deg,#ffcc00,#e6a800); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,204,0,.6); } /* 노랑 */
.oksg-rank-badge.rank-d { background:linear-gradient(135deg,#aeea00,#6d9200); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(174,234,0,.6); } /* 연두 */
.oksg-rank-badge.rank-e { background:linear-gradient(135deg,#00c853,#007a33); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,200,83,.6); } /* 초록 */
.oksg-rank-badge.rank-f { background:linear-gradient(135deg,#00bfa5,#007a6e); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,191,165,.6); } /* 민트 */
.oksg-rank-badge.rank-g { background:linear-gradient(135deg,#00b0ff,#0076b6); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,176,255,.6); } /* 하늘 */
.oksg-rank-badge.rank-h { background:linear-gradient(135deg,#2979ff,#0d47a1); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(41,121,255,.6); } /* 파랑 */
.oksg-rank-badge.rank-i { background:linear-gradient(135deg,#304ffe,#0026ca); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(48,79,254,.6); } /* 남색 */
.oksg-rank-badge.rank-j { background:linear-gradient(135deg,#aa00ff,#6200ea); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(170,0,255,.6); } /* 보라 */
.oksg-rank-badge.rank-k { background:linear-gradient(135deg,#d500f9,#9400b8); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(213,0,249,.6); } /* 자주 */
.oksg-rank-badge.rank-l { background:linear-gradient(135deg,#f50057,#b0003a); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(245,0,87,.6); } /* 핫핑크 */
.oksg-rank-badge.rank-m { background:linear-gradient(135deg,#e91e63,#a8003a); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(233,30,99,.6); } /* 자홍 */
.oksg-rank-badge.rank-n { background:linear-gradient(135deg,#ff6e40,#c43e00); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,110,64,.6); } /* 살구 */
.oksg-rank-badge.rank-o { background:linear-gradient(135deg,#ffd740,#c9a000); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,215,64,.6); } /* 황금 */
.oksg-rank-badge.rank-p { background:linear-gradient(135deg,#00e5ff,#009db5); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,229,255,.6); } /* 청록 */
.oksg-rank-badge.rank-default { background: rgba(30,30,50,.85); color:#a5b4fc; border:1px solid rgba(99,102,241,.35); }
/* 소진 오버레이 — 사용 안 함 (스타일만 유지) */
.oksg-depleted-overlay { display: none; }
/* 카드 하단 정보 */
.oksg-prize-info {
padding: 8px 10px 10px;
flex: 1; display: flex; flex-direction: column; gap: 4px;
background: #fff;
}
.oksg-prize-name {
font-size: 12px; font-weight: 700; color: #1e293b;
line-height: 1.3;
overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* 게이지 바 */
.oksg-gauge-wrap { margin-top: 4px; }
.oksg-gauge-bg {
height: 5px; border-radius: 99px;
background: #e2e8f0; overflow: hidden;
}
.oksg-gauge-fill {
height: 100%; border-radius: 99px;
background: linear-gradient(90deg,#6366f1,#a78bfa);
transition: width .4s ease;
}
.oksg-gauge-fill.full { background: linear-gradient(90deg,#ef4444,#f87171); }
.oksg-gauge-label {
display: flex; justify-content: space-between; align-items: center;
font-size: 10px; color: #64748b; margin-top: 3px;
}
.oksg-gauge-label .sold-cnt { color: #6366f1; font-weight: 600; }
.oksg-gauge-label .remain-cnt { color: #64748b; }
.oksg-gauge-label .all-gone { color: #ef4444; font-weight: 700; }
/* 로딩 스켈레톤 */
.oksg-skeleton-card {
border-radius: 14px; overflow: hidden;
background: #f1f5f9;
border: 1px solid rgba(0,0,0,.06);
}
.oksg-skeleton-img {
width: 100%; aspect-ratio: 1/1;
background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
background-size: 200% 100%;
animation: oksgShimmer 1.4s infinite;
}
.oksg-skeleton-body { padding: 8px 10px 10px; background: #fff; }
.oksg-skeleton-line {
height: 10px; border-radius: 6px; margin-bottom: 6px;
background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
background-size: 200% 100%;
animation: oksgShimmer 1.4s infinite;
}
.oksg-skeleton-line.short { width: 55%; }
@keyframes oksgShimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* 빈 상태 */
.oksg-empty {
padding: 40px 20px; text-align: center;
color: #64748b; font-size: 14px;
}
/* 모바일 */
@media (max-width: 480px) {
#okSoldGallery { padding: 10px 8px; }
.oksg-inner { border-radius: 16px; max-height: 90vh; }
.oksg-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 9px; padding: 14px 12px 20px; }
.oksg-header { padding: 16px 48px 14px 14px; }
.oksg-title { font-size: 15px; }
.oksg-body { -webkit-overflow-scrolling: touch; }
}
/* ─────────────────────────────────────── */
/* ═══════════════════════════════════
배송지/개인정보 전용 스타일
═══════════════════════════════════ */
.pf-wrap { max-width:620px; margin:0 auto; padding:8px 0 20px; }
/* 섹션 헤더 배너 */
.pf-banner {
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
border: 1.5px solid rgba(99,102,241,.4);
border-radius: 20px;
padding: 20px 22px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 14px;
position: relative;
overflow: hidden;
}
.pf-banner::before {
content: '';
position: absolute;
top: -30px; right: -30px;
width: 120px; height: 120px;
background: radial-gradient(circle, rgba(139,92,246,.25) 0%, transparent 70%);
}
.pf-banner-icon {
width: 48px; height: 48px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
box-shadow: 0 6px 20px rgba(99,102,241,.4);
flex-shrink: 0;
}
.pf-banner-title { font-size: 16px; font-weight: 900; color: #f1f5f9; letter-spacing: -.02em; }
.pf-banner-sub { font-size: 12px; color: #818cf8; font-weight: 600; margin-top: 3px; }
/* 카드 공통 */
.pf-card {
background: #fff;
border: 1.5px solid rgba(99,102,241,.15);
border-radius: 18px;
overflow: hidden;
margin-bottom: 14px;
box-shadow: 0 2px 12px rgba(99,102,241,.08);
}
.pf-card-header {
background: linear-gradient(135deg, #eef2ff, #f5f3ff);
border-bottom: 1.5px solid rgba(99,102,241,.12);
padding: 14px 18px;
display: flex;
align-items: center;
gap: 10px;
}
.pf-card-header-icon {
width: 32px; height: 32px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.pf-card-header-title { font-size: 13px; font-weight: 800; color: #1e293b; letter-spacing: -.01em; }
.pf-card-header-sub { font-size: 11px; color: #64748b; font-weight: 500; margin-top: 1px; }
.pf-card-body { padding: 18px; }
/* 필드 공통 */
.pf-field { margin-bottom: 14px; }
.pf-field:last-child { margin-bottom: 0; }
.pf-label {
display: flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 800; color: #4338ca;
text-transform: uppercase; letter-spacing: .05em;
margin-bottom: 7px;
}
.pf-label-badge {
font-size: 9px; font-weight: 700;
background: #ede9fe; color: #7c3aed;
padding: 2px 6px; border-radius: 4px;
text-transform: none; letter-spacing: 0;
}
.pf-label-req { color: #ef4444; font-size: 13px; line-height: 1; }
/* 입력창 */
.pf-input {
width: 100%; box-sizing: border-box;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 12px 14px;
color: #111827;
font-size: 14px; font-weight: 600;
font-family: inherit;
outline: none;
transition: border-color .18s, background .18s, box-shadow .18s;
}
.pf-input::placeholder { color: #9ca3af; font-weight: 400; }
.pf-input:focus {
border-color: #6366f1;
background: #fff;
box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.pf-input:read-only {
background: #f1f5f9;
border-color: #e2e8f0;
color: #374151;
cursor: default;
}
.pf-textarea {
width: 100%; box-sizing: border-box;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 12px 14px;
color: #111827;
font-size: 14px; font-weight: 600;
font-family: inherit;
outline: none;
resize: none;
transition: border-color .18s, background .18s, box-shadow .18s;
}
.pf-textarea::placeholder { color: #9ca3af; font-weight: 400; }
.pf-textarea:focus {
border-color: #6366f1;
background: #fff;
box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
/* 주소 row */
.pf-addr-row { display: flex; gap: 8px; margin-bottom: 8px; }
.pf-postcode {
width: 110px; flex-shrink: 0;
background: #f1f5f9;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 12px 14px;
color: #374151; font-size: 13px; font-weight: 700;
font-family: inherit; outline: none; box-sizing: border-box;
}
.pf-addr-search-btn {
flex: 1;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border: none; border-radius: 12px;
color: #fff; font-size: 13px; font-weight: 800;
cursor: pointer; font-family: inherit;
padding: 12px 14px;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 3px 12px rgba(79,70,229,.35);
}
.pf-addr-search-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(79,70,229,.45); }
/* 저장 버튼 */
.pf-save-btn {
width: 100%; margin-top: 6px;
padding: 15px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border: none; border-radius: 14px;
color: #fff; font-size: 15px; font-weight: 900;
cursor: pointer; font-family: inherit;
letter-spacing: -.01em;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 4px 18px rgba(99,102,241,.38);
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pf-save-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,.5); }
.pf-save-btn:active { transform: scale(.98); }
/* 이메일 인증 카드 내부 */
.pf-email-verified-box {
display: flex; align-items: center; gap: 12px;
background: linear-gradient(135deg, #ecfdf5, #d1fae5);
border: 1.5px solid #6ee7b7;
border-radius: 12px;
padding: 14px 16px;
}
.pf-email-unverified-box {
background: #fffbeb;
border: 1.5px solid #fbbf24;
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 14px;
font-size: 12.5px; color: #92400e; font-weight: 700;
display: flex; align-items: flex-start; gap: 8px;
}
.pf-email-input-row { display: flex; gap: 8px; margin-bottom: 8px; }
.pf-email-input {
flex: 1;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 10px;
padding: 11px 14px;
color: #111827;
font-size: 14px; font-weight: 600;
font-family: inherit; outline: none;
transition: border-color .18s, box-shadow .18s;
box-sizing: border-box;
}
.pf-email-input::placeholder { color: #9ca3af; font-weight: 400; }
.pf-email-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); background: #fff; }
.pf-email-send-btn {
flex-shrink: 0; padding: 0 16px; height: 46px; min-height: 46px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border: none; border-radius: 10px;
color: #fff; font-size: 13px; font-weight: 800;
cursor: pointer; font-family: inherit;
white-space: nowrap;
transition: opacity .15s, transform .15s;
}
.pf-email-send-btn:hover { opacity: .9; transform: translateY(-1px); }
.pf-code-input {
flex: 1;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 10px;
padding: 12px 14px;
color: #111827;
font-size: 20px; font-weight: 900; letter-spacing: 8px;
font-family: inherit; outline: none;
transition: border-color .18s, box-shadow .18s;
text-align: center; box-sizing: border-box;
}
.pf-code-input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.12); background: #fff; }
.pf-code-verify-btn {
flex-shrink: 0; padding: 0 16px; height: 46px; min-height: 46px;
background: linear-gradient(135deg, #10b981, #059669);
border: none; border-radius: 10px;
color: #fff; font-size: 13px; font-weight: 800;
cursor: pointer; font-family: inherit;
white-space: nowrap;
}
/* 구분선 */
.pf-divider {
height: 1px;
background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
margin: 4px 0 16px;
}
/* 저장 메시지 */
.pf-msg {
text-align: center; margin-top: 12px;
font-size: 13px; font-weight: 700;
min-height: 20px; color: #64748b;
}
/* ── 닉네임 변경 카드 ── */
.sh-nick-current {
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 12px 16px;
font-size: 15px;
color: #1e293b;
min-height: 44px;
display: flex;
align-items: center;
}
.sh-nick-cooldown {
margin-top: 7px;
background: #fffbeb;
border: 1.5px solid #fbbf24;
border-radius: 10px;
padding: 9px 14px;
font-size: 12px;
font-weight: 700;
color: #92400e;
display: flex;
align-items: center;
gap: 6px;
}
.sh-nick-input-row {
display: flex;
gap: 8px;
}
.sh-nick-input {
flex: 1;
min-width: 0;
}
.sh-nick-check-btn {
flex-shrink: 0;
padding: 0 16px;
height: 48px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border: none;
border-radius: 12px;
color: #fff;
font-size: 13px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: opacity .15s, transform .15s;
box-shadow: 0 3px 10px rgba(99,102,241,.35);
}
.sh-nick-check-btn:hover { opacity: .88; transform: translateY(-1px); }
.sh-nick-check-btn:active { transform: scale(.97); }
.sh-nick-check-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.sh-nick-check-result {
margin-top: 7px;
font-size: 12.5px;
font-weight: 700;
min-height: 18px;
color: #64748b;
}
.sh-nick-check-result.ok { color: #10b981; }
.sh-nick-check-result.err { color: #f87171; }
/* 모바일 최적화 */
@media (max-width: 500px) {
.pf-addr-row { flex-direction: column; }
.pf-postcode { width: 100%; }
/* 이메일 인증 버튼 모바일: 세로 배치 */
.pf-email-input-row {
flex-direction: column;
gap: 8px;
}
.pf-email-send-btn {
width: 100%;
padding: 13px 16px;
font-size: 14px;
}
.pf-code-verify-btn {
width: 100%;
padding: 13px 16px;
font-size: 14px;
}
.pf-code-input {
font-size: 24px;
letter-spacing: 10px;
}
}
/* ── 설정 카드 내부 스타일 ── */
.pf-stg-section {
background: var(--surface-2, #f8fafc);
border: 1px solid var(--border, #e2e8f0);
border-radius: 14px;
overflow: hidden;
}
.pf-stg-section-title {
font-size: 11px; font-weight: 800; color: #94a3b8;
letter-spacing: .08em; text-transform: uppercase;
padding: 10px 16px 6px;
border-bottom: 1px solid var(--border, #e2e8f0);
background: var(--surface, #fff);
}
.pf-stg-sub-label {
font-size: 10.5px; font-weight: 700; color: #94a3b8;
letter-spacing: .06em; text-transform: uppercase;
padding: 7px 16px 5px;
border-bottom: 1px solid var(--border, #e2e8f0);
background: var(--surface, #fff);
}
.pf-stg-row {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; padding: 13px 16px;
border-bottom: 1px solid var(--border, #e2e8f0);
transition: opacity .2s;
}
.pf-stg-row:last-child { border-bottom: none; }
.pf-stg-row-master { background: rgba(239,68,68,.04); }
.pf-stg-row-sub.pf-stg-disabled { opacity: .35; pointer-events: none; }
.pf-stg-row-info { flex: 1; min-width: 0; }
.pf-stg-label { font-size: 14px; font-weight: 700; color: var(--text-1, #0f172a); line-height: 1.3; }
.pf-stg-desc { font-size: 11.5px; color: #64748b; margin-top: 2px; line-height: 1.4; }
/* 토글 스위치 */
.pf-stg-toggle {
position: relative; flex-shrink: 0;
width: 50px; height: 28px;
background: #cbd5e1; border: none; border-radius: 14px;
cursor: pointer; padding: 0;
transition: background .22s;
-webkit-tap-highlight-color: transparent;
}
.pf-stg-toggle.on { background: #5046e5; }
.pf-stg-toggle-danger.on { background: #ef4444; }
.pf-stg-knob {
position: absolute; top: 3px; left: 3px;
width: 22px; height: 22px;
background: #fff; border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,.18);
transition: transform .22s cubic-bezier(.34,1.56,.64,1);
pointer-events: none;
}
.pf-stg-toggle.on .pf-stg-knob { transform: translateX(22px); }
/* ─────────────────────────────────────── */
/* ════ 다중뜯기 모달 헤더 + 배경 통합 v3 ════ */
/* ── 헤더 wrap (배경 없음 — 모달 body에서만 관리) ── */
.ok-mth-wrap {
width: 100%; max-width: 960px; flex-shrink: 0;
padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 0;
/* 배경 제거: 모달 body 단일 배경으로 통일 */
}
.ok-mth-inner {
position: relative;
background: rgba(255,255,255,.04);
border: 1px solid rgba(167,139,250,.2);
border-radius: 20px;
padding: 14px 16px 14px 16px;
display: flex; flex-direction: column; gap: 10px;
overflow: hidden;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* 배경 미묘한 shimmer */
.ok-mth-inner::before {
content: '';
position: absolute; top: -30px; left: -20px;
width: 120px; height: 120px;
background: radial-gradient(circle, rgba(99,102,241,.2) 0%, transparent 70%);
pointer-events: none;
}
.ok-mth-inner::after {
content: '';
position: absolute; bottom: -20px; right: -10px;
width: 80px; height: 80px;
background: radial-gradient(circle, rgba(139,92,246,.15) 0%, transparent 70%);
pointer-events: none;
}
/* 1행 */
.ok-mth-top {
display: flex; align-items: center; gap: 10px;
}
.ok-mth-icon {
width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
box-shadow: 0 4px 14px rgba(99,102,241,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.ok-mth-text { min-width: 0; flex: 1; }
.ok-mth-title {
font-size: 15px; font-weight: 900; color: #f1f5f9;
letter-spacing: -.02em; line-height: 1.2;
}
.ok-mth-sub {
font-size: 11px; color: rgba(148,163,184,.7); margin-top: 2px;
}
/* 2행 */
.ok-mth-bottom {
display: flex; align-items: center; gap: 8px;
}
/* ── 진행 배지 ── */
@keyframes okBadgePop {
0% { transform: scale(1); }
40% { transform: scale(1.18); }
100% { transform: scale(1); }
}
.ok-mth-badge {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(99,102,241,.15);
border: 1px solid rgba(99,102,241,.35);
border-radius: 999px;
padding: 7px 14px;
white-space: nowrap; flex-shrink: 0;
transition: background .25s, border-color .25s, box-shadow .25s;
}
.ok-mth-badge.ok-badge-done {
background: rgba(16,185,129,.18);
border-color: rgba(16,185,129,.5);
box-shadow: 0 0 12px rgba(16,185,129,.25);
}
.ok-mth-badge-num {
font-size: 14px; font-weight: 900; color: #a78bfa;
letter-spacing: -.02em;
transition: color .25s;
}
.ok-mth-badge.ok-badge-done .ok-mth-badge-num { color: #34d399; }
.ok-mth-badge-label {
font-size: 10px; font-weight: 700; color: rgba(148,163,184,.6);
letter-spacing: .04em;
}
/* ── 일괄오픈 버튼 ── */
.ok-mth-bulk-btn {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
flex: 1;
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
color: #fff; border: none; border-radius: 12px;
padding: 10px 14px;
font-size: 13px; font-weight: 900; font-family: inherit;
cursor: pointer; white-space: nowrap;
box-shadow: 0 4px 18px rgba(239,68,68,.42), inset 0 1px 0 rgba(255,255,255,.2);
transition: transform .12s, filter .12s, box-shadow .12s;
}
.ok-mth-bulk-btn::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, transparent 55%);
pointer-events: none;
}
.ok-mth-bulk-btn:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(239,68,68,.6); }
.ok-mth-bulk-btn:active { transform: translateY(0); filter: brightness(.95); }
.ok-mth-bulk-btn:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
/* ── 헤더-그리드 구분선 ── */
.ok-mth-divider {
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(167,139,250,.15), transparent);
margin-top: 10px;
}
/* ── 결과 버튼 입장 애니메이션 ── */
@keyframes okResultBtnPop {
0% { opacity:0; transform:scale(.7) translateY(10px); }
70% { transform:scale(1.06) translateY(-2px); }
100% { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes okResultBtnPulse {
0%,100% { box-shadow: 0 6px 28px rgba(99,102,241,.55), 0 0 0 1px rgba(139,92,246,.3); }
50% { box-shadow: 0 10px 40px rgba(99,102,241,.8), 0 0 0 3px rgba(167,139,250,.45), 0 0 60px rgba(99,102,241,.2); }
}
/* ─────────────────────────────────────── */
/* ══════════════════════════════════════
키오스크 결제 모달 스타일 v2 — 프리미엄 UI
══════════════════════════════════════ */
/* ── 애니메이션 ── */
@keyframes portoneModalIn {
from { opacity:0; transform:translateY(40px) scale(.95); }
to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes kioskBtnPop {
0% { transform:scale(1); box-shadow:0 8px 28px rgba(99,102,241,.4); }
30% { transform:scale(.96); box-shadow:0 4px 14px rgba(99,102,241,.3); }
70% { transform:scale(1.03); box-shadow:0 14px 40px rgba(99,102,241,.55); }
100% { transform:scale(1); box-shadow:0 8px 28px rgba(99,102,241,.4); }
}
@keyframes kioskBtnRipple {
0% { transform: scale(0); opacity:.5; }
100% { transform: scale(4); opacity:0; }
}
@keyframes pkgPop {
0% { transform: scale(1); }
40% { transform: scale(.94); }
75% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes checkIn {
0% { opacity:0; transform:scale(.5) rotate(-20deg); }
60% { transform:scale(1.2) rotate(5deg); }
100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes summarySlideIn {
from { opacity:0; transform:translateY(8px); }
to { opacity:1; transform:translateY(0); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.kiosk-overlay {
display: none;
position: fixed; inset: 0; z-index: 99999;
background: rgba(10,8,30,.62);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
align-items: center; justify-content: center;
padding: 16px;
font-family: inherit;
}
.kiosk-overlay.open { display: flex; }
.kiosk-card {
background: linear-gradient(160deg, #0d0f1e 0%, #12152a 100%);
border-radius: 36px;
width: 100%; max-width: 460px;
max-height: 92vh;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow:
0 40px 100px rgba(0,0,0,.7),
0 0 0 1.5px rgba(99,102,241,.35),
0 0 40px rgba(99,102,241,.15);
animation: portoneModalIn .35s cubic-bezier(.22,.61,.36,1);
}
/* ── 헤더 ── */
.kiosk-header {
background: linear-gradient(160deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
padding: 30px 24px 24px;
text-align: center;
position: relative;
flex-shrink: 0;
overflow: hidden;
}
.kiosk-header::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 80% 60% at 20% -20%, rgba(139,92,246,.35) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 110%, rgba(59,130,246,.25) 0%, transparent 55%);
pointer-events: none;
}
.kiosk-header > * { position: relative; z-index: 1; }
.kiosk-close-btn {
position: absolute; top: 16px; right: 16px; z-index: 2;
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.8); width: 34px; height: 34px;
border-radius: 50%; font-size: 15px;
cursor: pointer; display: flex;
align-items: center; justify-content: center;
font-weight: 700; transition: all .15s;
line-height: 1; backdrop-filter: blur(4px);
}
.kiosk-close-btn:hover {
background: rgba(255,255,255,.22);
color: #fff;
transform: scale(1.1) rotate(90deg);
}
.kiosk-header-icon {
font-size: 44px; margin-bottom: 8px;
filter: drop-shadow(0 4px 12px rgba(139,92,246,.5));
display: none; /* 아이콘 숨김 */
}
.kiosk-header-title {
font-size: 24px; font-weight: 900;
color: #fff; letter-spacing: -.5px;
margin-bottom: 4px;
text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.kiosk-header-sub {
font-size: 12px; color: rgba(255,255,255,.55); font-weight: 600;
margin-bottom: 18px;
letter-spacing: .02em;
}
.kiosk-current-pt-badge {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.1);
border: 1.5px solid rgba(255,255,255,.2);
border-radius: 999px;
padding: 9px 22px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.kiosk-current-pt-label {
font-size: 10px; color: rgba(255,255,255,.65); font-weight: 800;
text-transform: uppercase; letter-spacing: .08em;
}
.kiosk-current-pt-val {
font-size: 20px; font-weight: 900; color: #fff;
text-shadow: 0 1px 6px rgba(139,92,246,.6);
}
/* ── 본문 ── */
.kiosk-body {
padding: 22px 22px 0;
overflow-y: auto;
flex: 1;
}
.kiosk-section-label {
font-size: 11px; font-weight: 800; color: #7c6fcd;
letter-spacing: .08em; text-transform: uppercase;
margin-bottom: 12px;
display: flex; align-items: center; gap: 6px;
}
.kiosk-section-label::before {
content: ''; display: inline-block;
width: 3px; height: 12px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 999px;
}
/* ── 패키지 그리드 ── */
.kiosk-pkg-grid,
.portone-pkg-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
/* ── 패키지 버튼 ── */
.portone-pkg-btn {
background: rgba(255,255,255,.05);
border: 1.5px solid rgba(99,102,241,.3);
border-radius: 20px;
padding: 14px 6px 12px;
cursor: pointer;
transition: all .22s cubic-bezier(.22,.61,.36,1);
text-align: center;
font-family: inherit;
position: relative;
overflow: hidden;
user-select: none;
-webkit-tap-highlight-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 72px;
}
.portone-pkg-btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.08));
opacity: 0;
transition: opacity .22s;
border-radius: inherit;
}
.portone-pkg-btn:hover {
border-color: #a5b4fc;
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(99,102,241,.35);
background: rgba(99,102,241,.12);
}
.portone-pkg-btn:hover::after { opacity: 1; }
.portone-pkg-btn:active { animation: pkgPop .25s cubic-bezier(.22,.61,.36,1); }
.portone-pkg-btn.selected {
border-color: transparent;
background: linear-gradient(145deg, #4f46e5 0%, #7c3aed 100%);
transform: translateY(-3px);
box-shadow:
0 12px 32px rgba(99,102,241,.45),
inset 0 1px 0 rgba(255,255,255,.2);
}
.portone-pkg-btn.selected::after { opacity: 0; }
/* 선택 체크 아이콘 */
.portone-pkg-btn .pkg-check {
position: absolute; top: 8px; right: 8px;
width: 18px; height: 18px;
background: rgba(255,255,255,.25);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px; color: #fff;
opacity: 0; transition: opacity .15s;
font-weight: 900;
}
.portone-pkg-btn.selected .pkg-check {
opacity: 1;
animation: checkIn .25s cubic-bezier(.22,.61,.36,1);
}
.portone-pkg-pts {
font-size: 15px; font-weight: 900;
color: #e2e8f0;
display: block;
transition: color .18s;
line-height: 1.2;
white-space: nowrap;
}
.portone-pkg-won {
font-size: 11px; color: #64748b;
display: block;
transition: color .18s;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.portone-pkg-btn.selected .portone-pkg-pts { color: #fff; }
.portone-pkg-btn.selected .portone-pkg-won { color: rgba(255,255,255,.65); }
/* 직접 입력 항목 */
.kiosk-custom-item { flex: 1; }
/* ── 구분선 ── */
.kiosk-divider {
display: flex; align-items: center; gap: 10px;
margin: 4px 0 16px; color: #475569; font-size: 11px; font-weight: 700;
letter-spacing: .04em;
}
.kiosk-divider::before, .kiosk-divider::after {
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(99,102,241,.3));
}
.kiosk-divider::after {
background: linear-gradient(90deg, rgba(99,102,241,.3), transparent);
}
/* ── 직접 입력 ── */
.kiosk-custom-row {
display: flex; align-items: flex-end; gap: 8px;
margin-bottom: 8px;
}
.kiosk-input-group { flex: 1; }
.kiosk-input-arrow {
font-size: 18px; color: #9ca3af; font-weight: 700;
padding-bottom: 10px; flex-shrink: 0;
}
.kiosk-input-label {
display: block; font-size: 11px; color: #7c6fcd;
font-weight: 700; margin-bottom: 5px;
}
.kiosk-input {
width: 100%; background: rgba(255,255,255,.06);
border: 1.5px solid rgba(99,102,241,.3); border-radius: 14px;
padding: 12px 14px; color: #e2e8f0;
font-size: 15px; font-weight: 700;
outline: none; box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
font-family: inherit; -moz-appearance: textfield;
}
.kiosk-input:focus {
border-color: #7c3aed;
box-shadow: 0 0 0 3px rgba(99,102,241,.2), 0 0 12px rgba(99,102,241,.2);
background: rgba(99,102,241,.08);
}
.kiosk-input::-webkit-inner-spin-button,
.kiosk-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.kiosk-input-note {
font-size: 11px; color: #d1d5db;
margin-bottom: 14px;
}
/* ── 요약 박스 ── */
.kiosk-summary,
.kiosk-summary-box {
background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.1));
border: 1.5px solid rgba(139,92,246,.4); border-radius: 18px;
padding: 14px 18px; margin: 8px 0 4px;
text-align: center;
animation: summarySlideIn .25s ease;
}
.kiosk-summary-check {
font-size: 11px; color: #a78bfa;
font-weight: 800; margin-bottom: 4px;
text-transform: uppercase; letter-spacing: .06em;
}
.kiosk-summary-text,
#portoneSummaryText {
font-size: 17px; font-weight: 900; color: #e2e8f0;
}
/* ── 푸터 ── */
.kiosk-footer {
padding: 16px 22px 22px;
background: rgba(255,255,255,.03);
border-top: 1px solid rgba(99,102,241,.2);
flex-shrink: 0;
}
/* ── 결제 버튼 (프리미엄 shimmer + ripple) ── */
.kiosk-pay-btn {
width: 100%;
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #4f46e5 100%);
background-size: 200% auto;
color: #fff; border: none;
padding: 18px 20px;
border-radius: 22px;
font-size: 17px; font-weight: 900;
cursor: pointer;
box-shadow:
0 8px 32px rgba(99,102,241,.42),
inset 0 1px 0 rgba(255,255,255,.25);
transition: transform .2s cubic-bezier(.22,.61,.36,1),
box-shadow .2s cubic-bezier(.22,.61,.36,1),
background-position .6s ease;
display: flex; align-items: center; justify-content: center;
gap: 10px; letter-spacing: -.2px;
font-family: inherit;
position: relative; overflow: hidden;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* shimmer 효과 */
.kiosk-pay-btn::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(
110deg,
transparent 25%,
rgba(255,255,255,.22) 45%,
rgba(255,255,255,.28) 50%,
rgba(255,255,255,.22) 55%,
transparent 75%
);
background-size: 200% 100%;
background-position: 200% center;
transition: background-position .0s;
border-radius: inherit;
pointer-events: none;
}
.kiosk-pay-btn:not(:disabled):hover::before {
background-position: -200% center;
transition: background-position .7s ease;
}
/* ripple 효과 */
.kiosk-pay-btn .ripple {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,.4);
transform: scale(0);
animation: kioskBtnRipple .55s linear;
pointer-events: none;
}
.kiosk-pay-btn:not(:disabled):hover {
transform: translateY(-3px);
box-shadow:
0 16px 44px rgba(99,102,241,.52),
inset 0 1px 0 rgba(255,255,255,.3);
background-position: right center;
}
.kiosk-pay-btn:not(:disabled):active {
transform: translateY(1px);
animation: kioskBtnPop .3s cubic-bezier(.22,.61,.36,1);
box-shadow:
0 4px 16px rgba(99,102,241,.35),
inset 0 1px 0 rgba(255,255,255,.2);
}
.kiosk-pay-btn:disabled {
opacity: .55; cursor: not-allowed; transform: none;
box-shadow: 0 4px 12px rgba(99,102,241,.2);
}
.kiosk-pay-icon { font-size: 20px; line-height: 1; }
.kiosk-msg {
text-align: center; font-size: 13px;
margin-top: 10px; min-height: 18px;
color: #ef4444; font-weight: 700; line-height: 1.6;
white-space: pre-line;
word-break: keep-all;
padding: 0 4px;
}
.kiosk-security {
text-align: center; margin-top: 10px;
font-size: 11px; color: #9ca3af;
display: flex; align-items: center; justify-content: center; gap: 5px;
}
/* ─────────────────────────────────────── */
/* ── 설정 바텀시트 ─────────────────────────── */
.settings-section {
background: var(--surface-2, #f8fafc);
border: 1px solid var(--border, #e2e8f0);
border-radius: 16px;
padding: 4px 0;
margin-bottom: 12px;
}
.settings-section-title {
font-size: 11px; font-weight: 800; color: #94a3b8;
letter-spacing: .08em; text-transform: uppercase;
padding: 10px 16px 6px;
}
.settings-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 12px 16px;
border-bottom: 1px solid var(--border, #e2e8f0);
transition: opacity .2s;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-master {
background: rgba(239,68,68,.04);
border-radius: 12px 12px 0 0;
}
.settings-sub-divider {
font-size: 10.5px; font-weight: 700; color: #94a3b8;
letter-spacing: .06em; text-transform: uppercase;
padding: 7px 16px 5px;
border-bottom: 1px solid var(--border, #e2e8f0);
background: var(--surface, #fff);
}
.settings-row-sub.stg-disabled {
opacity: .38; pointer-events: none;
}
.settings-row-info { flex: 1; min-width: 0; }
.settings-row-label {
font-size: 14px; font-weight: 700; color: var(--text-1, #0f172a);
line-height: 1.3; display: flex; align-items: center; gap: 6px;
}
.settings-row-desc { font-size: 11.5px; color: #64748b; margin-top: 2px; line-height: 1.4; }
.stg-ico { font-size: 15px; line-height: 1; }
/* ── 토글 스위치 ─────────────────────────── */
.settings-toggle {
position: relative; flex-shrink: 0;
width: 50px; height: 28px;
background: #cbd5e1;
border: none; border-radius: 14px;
cursor: pointer; padding: 0;
transition: background .22s;
-webkit-tap-highlight-color: transparent;
}
.settings-toggle.on { background: #5046e5; }
.settings-toggle-danger.on { background: #ef4444; }
.settings-toggle-knob {
position: absolute; top: 3px; left: 3px;
width: 22px; height: 22px;
background: #fff; border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,.18);
transition: transform .22s cubic-bezier(.34,1.56,.64,1);
pointer-events: none;
}
.settings-toggle.on .settings-toggle-knob { transform: translateX(22px); }
/* ─────────────────────────────────────── */
.more-sheet-btn {
display:flex; align-items:center; gap:12px;
width:100%; padding:13px 16px;
background:var(--surface-2,#f8fafc); border:1px solid var(--border,#e2e8f0);
border-radius:14px; color:var(--text-1,#0f172a); font-size:14px; font-weight:700;
cursor:pointer; font-family:inherit;
-webkit-tap-highlight-color:transparent;
transition:background .15s, border-color .15s, box-shadow .15s;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.more-sheet-btn:hover {
background:rgba(80,70,229,.06);
border-color:rgba(80,70,229,.18);
box-shadow: 0 2px 8px rgba(80,70,229,.1);
color:var(--brand,#5046e5);
}
.more-sheet-btn:active { background:rgba(80,70,229,.10); opacity:.9; }
.more-sheet-btn span:first-child { font-size:20px; line-height:1; }
/* ── 프로필 미완성 차단 모달 ───────────────────────────── */
#profileIncompleteModal {
display:none; position:fixed; inset:0; z-index:99800;
background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
align-items:flex-start; justify-content:center;
padding:16px;
/* ★ [BUG-FIX T9] iOS 키보드 팝업 시 모달 박스가 키보드에 가려지는 문제 수정
align-items:flex-start + overflow-y:auto → 키보드 올라와도 위에서부터 배치되어 스크롤 가능 */
overflow-y:auto;
-webkit-overflow-scrolling:touch;
/* Android: statusBarView가 상태바 공간 처리 → env()=0, 고정값 사용 */
padding-top:16px;
}
#profileIncompleteModal.show { display:flex !important; }
.pim-box {
background:#1e1e2e; border-radius:20px; padding:28px 22px 22px;
max-width:400px; width:100%;
border:1.5px solid rgba(251,191,36,.4);
box-shadow:0 12px 48px rgba(0,0,0,.7);
color:#e2e2f0; font-size:14px; animation:pimIn .28s cubic-bezier(.22,.61,.36,1);
/* ★ [BUG-FIX T9b] 키보드 팝업 시 내용 잘림 방지 — 박스 내부도 스크롤 가능하게 */
max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
margin-top:auto; margin-bottom:auto;
}
@keyframes pimIn { from{opacity:0;transform:scale(.92) translateY(16px)} to{opacity:1;transform:none} }
.pim-icon { font-size:40px; text-align:center; margin-bottom:12px; }
.pim-title {
font-size:18px; font-weight:900; color:#fbbf24;
text-align:center; margin-bottom:6px;
}
.pim-sub {
font-size:13px; color:#94a3b8; text-align:center; margin-bottom:20px; line-height:1.6;
}
.pim-fields { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.pim-field label {
display:block; font-size:11px; font-weight:700; color:#a5b4fc;
margin-bottom:4px; letter-spacing:.04em;
}
.pim-field input, .pim-field textarea {
width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(99,102,241,.35);
border-radius:10px; padding:10px 12px; color:#e2e2f0; font-size:14px;
outline:none; box-sizing:border-box; font-family:inherit; resize:none;
transition:border-color .15s;
}
.pim-field input:focus, .pim-field textarea:focus {
border-color:#6366f1; background:rgba(99,102,241,.12);
}
.pim-btns { display:flex; gap:10px; }
.pim-cancel-btn {
flex:1; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
background:transparent; color:#9ca3af; font-size:14px; font-weight:700; cursor:pointer;
}
.pim-save-btn {
flex:2; padding:12px; border-radius:10px; border:none;
background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff;
font-size:14px; font-weight:800; cursor:pointer; transition:opacity .15s;
}
.pim-save-btn:disabled { opacity:.55; cursor:not-allowed; }
.pim-missing-hint {
font-size:12px; color:#fca5a5; margin-bottom:14px;
background:rgba(239,68,68,.12); border-radius:8px; padding:10px 12px;
border:1px solid rgba(239,68,68,.25); line-height:1.6;
}
/* ─────────────────────────────────────── */
/* ── 방송쿠지 히어로 배너 ── */
#bangkujiSection { padding-top: 0 !important; padding-bottom: 60px; }
/* ── 방송쿠지 섹션: 모바일 상단 가림 방지 + 하단 safe-area ──
① mobilePointBar(sticky, ~50px)가 배너를 덮지 않도록
bangkujiSection 자체에 padding-top 적용
② --mpb-h는 로그인 후 JS가 갱신 → fallback을 50px로 설정해
로그인 전에도 안전하게 여백 확보
③ 하단: bottomNavBar(56px) + env(safe-area-inset-bottom) + 여유 20px */
@media (max-width: 560px) {
#bangkujiSection {
/* 상단: 포인트바 높이(fallback 50px) 만큼 띄우기 */
padding-top: 0 !important;
/* 하단: 하단 탭바 + safe-area + 여유 여백 → 마지막 카드 완전 노출 */
padding-bottom: calc(var(--bottom-nav, 56px) + 20px) !important; /* navBarView가 홈바 처리 */
/* 앵커 스크롤 위치 보정 */
scroll-margin-top: calc(var(--hdr-total) + var(--mpb-h, 50px));
}
.bkj-hero {
overflow: hidden;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 그리드 하단도 탭바 위로 충분히 밀기 */
.bkj-grid {
padding-bottom: calc(var(--bottom-nav, 56px) + 24px) !important; /* navBarView가 홈바 처리 */
}
}
.bkj-hero {
background: linear-gradient(145deg,
#0f172a 0%, #1e1b4b 35%, #2d1b69 65%, #1a1040 100%
);
position: relative; overflow: hidden;
padding: 28px 24px 28px;
/* ── 풀블리드: 섹션이 .wrap 바깥에 위치하므로 width:100%로 충분 ── */
width: 100%;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
.bkj-hero::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 90% 70% at 15% 40%, rgba(99,102,241,.32) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 85% 20%, rgba(139,92,246,.25) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 50% 90%, rgba(79,70,229,.2) 0%, transparent 60%);
}
.bkj-hero::after {
content: ''; position: absolute; top: -80px; right: -60px;
width: 360px; height: 360px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.06); pointer-events: none;
}
.bkj-hero-inner {
max-width: 1200px; margin: 0 auto;
position: relative; z-index: 1;
}
/* badge → label (온라인쿠지 동일 클래스명 공유) */
.bkj-hero-label {
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.09);
backdrop-filter: blur(8px);
color: rgba(255,255,255,.82);
font-size: 10.5px; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase;
padding: 5px 14px; border-radius: 20px;
margin-bottom: 16px;
}
.bkj-hero-title {
font-size: 38px; font-weight: 900;
color: #fff; margin: 0 0 10px;
line-height: 1.1; letter-spacing: -.7px;
}
.bkj-hero-title em {
font-style: normal;
background: linear-gradient(90deg, #a5b4fc, #c4b5fd);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.bkj-hero-sub {
font-size: 15px; color: rgba(255,255,255,.62);
margin: 0 0 24px; line-height: 1.6; max-width: 520px;
}
.bkj-hero-trust {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0;
}
.bkj-hero-trust-item {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
backdrop-filter: blur(6px);
color: rgba(255,255,255,.88);
font-size: 12px; font-weight: 700;
padding: 6px 13px; border-radius: 8px;
}
/* ── 목록 헤더 ── */
.bkj-list-header {
display: flex; flex-direction: row; align-items: center;
justify-content: space-between;
padding: 14px 24px 12px; gap: 12px;
border-bottom: 1.5px solid var(--border);
margin-bottom: 4px;
}
.bkj-list-title {
font-size: 18px; font-weight: 900; color: var(--text-1);
display: flex; align-items: center; gap: 8px;
letter-spacing: -.3px; flex-shrink: 0;
}
.bkj-list-title-icon { font-size: 18px; line-height: 1; }
.bkj-list-title-text { color: var(--brand); }
.bkj-list-count {
font-size: 12px; font-weight: 700; color: var(--brand);
background: none;
border: 1.5px solid var(--brand);
border-radius: 99px; padding: 2px 10px;
letter-spacing: .2px;
}
.bkj-filter-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bkj-filter-btn {
padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
border: 1.5px solid var(--border); background: none;
color: var(--text-3); cursor: pointer; transition: all .2s;
font-family: inherit; letter-spacing: .01em;
}
.bkj-filter-btn:hover { border-color: var(--brand); color: var(--brand); }
.bkj-filter-btn.active {
background: var(--brand); border-color: var(--brand);
color: #fff; font-weight: 700;
box-shadow: 0 2px 8px rgba(80,70,229,.30);
}
.bkj-filter-btn[data-filter="진행중"].active {
background: #059669; border-color: #059669;
box-shadow: 0 2px 8px rgba(5,150,105,.30);
}
.bkj-filter-btn[data-filter="대기중"].active {
background: #ca8a04; border-color: #ca8a04;
box-shadow: 0 2px 8px rgba(202,138,4,.30);
}
.bkj-filter-btn[data-filter="종료"].active {
background: #dc2626; border-color: #dc2626;
box-shadow: 0 2px 8px rgba(220,38,38,.30);
}
.bkj-filter-btn[data-filter="완판"].active {
background: #b45309; border-color: #b45309;
box-shadow: 0 2px 8px rgba(180,83,9,.30);
}
.bkj-refresh-btn {
width: 30px; height: 30px; border-radius: 8px; margin-left: 2px;
background: none; border: 1.5px solid var(--border);
color: var(--text-3); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .2s; font-family: inherit; flex-shrink: 0;
}
.bkj-refresh-btn:hover { border-color: var(--brand); color: var(--brand); transform: rotate(45deg); }
.bkj-refresh-btn.spinning { animation: bkjSpin .7s linear infinite; }
@keyframes bkjSpin { to { transform: rotate(360deg); } }
/* ── 쿠지 그리드 ── */
.bkj-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px; padding: 0 24px 32px;
}
.bkj-loading {
grid-column: 1/-1; text-align: center; padding: 60px 0;
color: #64748b; font-size: 14px;
}
.bkj-loading-spinner {
width: 36px; height: 36px; border-radius: 50%;
border: 3px solid rgba(99,102,241,.2); border-top-color: #6366f1;
animation: bkjSpin .8s linear infinite; margin: 0 auto 14px;
}
.bkj-empty {
grid-column: 1/-1; text-align: center; padding: 60px 0;
color: #475569; font-size: 15px; font-weight: 600;
}
/* ── 쿠지 카드 ── */
.bkj-card {
background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
overflow: hidden; cursor: pointer;
transition: transform .18s, border-color .18s, box-shadow .18s;
position: relative;
}
.bkj-card:hover {
transform: translateY(-3px);
border-color: rgba(99,102,241,.45);
box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.2);
}
.bkj-card-img-wrap {
position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;
background: #0f172a;
}
.bkj-card-img-wrap img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .3s;
}
.bkj-card:hover .bkj-card-img-wrap img { transform: scale(1.04); }
.bkj-card-img-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 48px; color: rgba(255,255,255,.15);
background: linear-gradient(135deg, #1e293b, #0f172a);
}
.bkj-card-status-badge {
position: absolute; top: 10px; right: 10px;
font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px;
letter-spacing: .4px; backdrop-filter: blur(8px);
}
.bkj-card-status-badge.진행중 { background: rgba(5,150,105,.85); color: #d1fae5; border: 1px solid rgba(16,185,129,.4); }
.bkj-card-status-badge.대기중 { background: rgba(161,98,7,.85); color: #fef3c7; border: 1px solid rgba(234,179,8,.4); }
.bkj-card-status-badge.종료 { background: rgba(127,29,29,.85); color: #fecaca; border: 1px solid rgba(239,68,68,.4); }
.bkj-card-status-badge.완판 { background: rgba(180,83,9,.85); color: #fef3c7; border: 1px solid rgba(245,158,11,.4); }
.bkj-card-body { padding: 14px 16px 16px; }
.bkj-card-title {
font-size: 15px; font-weight: 800; color: #f1f5f9;
margin-bottom: 10px; line-height: 1.35;
overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bkj-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bkj-badge {
font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px;
}
.bkj-badge-total { background: rgba(255,255,255,.08); color: #94a3b8; border: 1px solid rgba(255,255,255,.1); }
.bkj-badge-used { background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.25); }
.bkj-badge-remain { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.25); }
/* 진행 바 */
.bkj-card-gauge-wrap { margin-bottom: 6px; }
.bkj-card-gauge-label {
display: flex; justify-content: space-between; align-items: center;
font-size: 11px; color: #64748b; margin-bottom: 5px; font-weight: 600;
}
.bkj-card-gauge-label span:last-child { color: #a5b4fc; font-weight: 800; }
.bkj-card-gauge {
width: 100%; height: 8px; border-radius: 99px;
background: rgba(255,255,255,.07); overflow: hidden;
}
.bkj-card-gauge-fill {
height: 100%; border-radius: 99px;
background: linear-gradient(90deg, #4f46e5, #7c3aed, #a21caf);
transition: width .4s ease;
position: relative; overflow: hidden;
}
.bkj-card-gauge-fill.done { background: linear-gradient(90deg, #b45309, #d97706, #f59e0b); }
.bkj-card-gauge-fill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,.2) 60%, transparent 80%);
animation: bkjShimmer 2s infinite;
}
@keyframes bkjShimmer { from { transform: translateX(-100%); } to { transform: translateX(200%); } }
.bkj-card-gauge-fill.done::after { display: none; }
.bkj-card-footer {
display: flex; align-items: center; justify-content: space-between;
margin-top: 10px;
}
.bkj-card-price {
font-size: 13px; font-weight: 800; color: #fbbf24;
letter-spacing: -0.3px;
text-shadow: 0 0 8px rgba(251,191,36,.35);
}
.bkj-card-cta {
font-size: 11px; font-weight: 700; color: #64748b;
display: flex; align-items: center; gap: 4px;
}
.bkj-card:hover .bkj-card-cta { color: #a5b4fc; }
/* ★ [MOBILE-TOUCH] bkj-card 터치 후 hover 고착 방지 */
@media (hover: none) {
.bkj-card:hover {
transform: none;
border-color: rgba(255,255,255,.08);
box-shadow: none;
}
.bkj-card:hover .bkj-card-img-wrap img { transform: none; }
.bkj-card:hover .bkj-card-cta { color: inherit; }
}
/* ── 상세 패널 배경막 ── */
.bkj-detail-backdrop {
position: fixed; inset: 0; z-index: 99500;
background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: opacity .25s;
}
.bkj-detail-backdrop.hidden { display: none; }
/* ══ 방송쿠지 상세 패널 ══ */
.bkj-detail-panel {
position: fixed; inset: 0; z-index: 99600;
background: #080f1e;
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .32s cubic-bezier(.4,0,.2,1);
overflow: hidden;
}
.bkj-detail-panel.open { transform: translateX(0); }
.bkj-detail-panel.hidden { display: none; }
/* 패널 열릴 때 탭바·하단 네비 숨기기
★ display:none 대신 visibility:hidden — 레이아웃 유지하면서 숨김
★ 패널 자체(z-index 99600)는 탭바(z-index 600) 위에 있으므로
패널 내부 헤더(뒤로가기 버튼)는 항상 보임 */
body.bkj-panel-open #lkTabbar,
body.bkj-panel-open #bottomNavBar {
visibility: hidden !important;
pointer-events: none !important;
}
/* 패널 헤더는 항상 visible (탭바 숨김에 영향받지 않도록) */
body.bkj-panel-open .bkj-detail-panel {
visibility: visible !important;
}
body.bkj-panel-open .bkj-detail-head {
visibility: visible !important;
z-index: 99700 !important;
}
/* ── 헤더: 항상 상단 고정 ── */
.bkj-detail-head {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
/* Android: statusBarView가 상태바 공간 처리 → 고정값 사용 */
padding-top: 14px;
border-bottom: 1px solid rgba(99,102,241,.2);
background: rgba(8,15,30,.98);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
flex-shrink: 0; z-index: 2;
box-shadow: 0 2px 20px rgba(0,0,0,.5);
}
/* 뒤로가기 버튼 — 항상 표시 */
.bkj-detail-back {
display: flex !important; align-items: center; gap: 6px;
padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 800;
background: rgba(99,102,241,.15); border: 1.5px solid rgba(99,102,241,.4);
color: #c7d2fe; cursor: pointer; white-space: nowrap; flex-shrink: 0;
transition: all .15s; line-height: 1; min-width: 64px;
}
.bkj-detail-back:hover { background: rgba(99,102,241,.3); border-color: rgba(99,102,241,.7); color: #e0e7ff; transform: translateX(-2px); }
.bkj-back-arrow { font-size: 16px; line-height: 1; }
.bkj-back-label { font-size: 13px; font-weight: 800; }
.bkj-detail-head-info { flex: 1; min-width: 0; }
.bkj-detail-title {
font-size: 15px; font-weight: 800; color: #f1f5f9;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
letter-spacing: -.2px;
}
/* 닫기 버튼 — 항상 표시 */
.bkj-detail-close {
width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
background: rgba(239,68,68,.15); border: 1.5px solid rgba(239,68,68,.4);
color: #fca5a5; cursor: pointer; font-size: 18px; font-weight: 900;
display: flex !important; align-items: center; justify-content: center; transition: all .15s;
}
.bkj-detail-close:hover { background: rgba(239,68,68,.3); border-color: rgba(239,68,68,.7); color: #fff; }
/* ── 바디: 스크롤 영역 ── */
.bkj-detail-body {
flex: 1; overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 16px;
/* 하단: 플로팅 뒤로가기(64px) + 모바일탭(56px) + safe-area + 여백 */
padding-bottom: calc(90px + var(--mobile-safe-bottom, 24px));
}
/* ── 플로팅 뒤로가기 버튼 (우하단) ── */
.bkj-float-back {
display: none;
position: fixed;
/* 모바일 기본: 하단 탭바 + safe-area + 16px (오른쪽과 동일한 여백) */
bottom: calc(var(--bottom-nav, 56px) + 16px); /* navBarView가 홈바 처리 */
right: 16px;
z-index: 99800;
align-items: center; gap: 6px;
padding: 13px 20px;
background: linear-gradient(135deg, rgba(99,102,241,.92), rgba(79,70,229,.92));
border: 1.5px solid rgba(165,180,252,.5);
border-radius: 50px;
color: #e0e7ff;
font-size: 14px; font-weight: 800;
cursor: pointer;
box-shadow: 0 4px 20px rgba(99,102,241,.5), 0 0 0 1px rgba(99,102,241,.15), 0 0 30px rgba(99,102,241,.2);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: transform .15s, box-shadow .15s;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.bkj-float-back:active { transform: scale(.93); }
.bkj-float-back-arrow { font-size: 16px; line-height: 1; }
.bkj-float-back-label { font-size: 13px; font-weight: 800; letter-spacing: .2px; }
/* 패널 열릴 때만 표시 */
body.bkj-panel-open .bkj-float-back { display: flex !important; }
/* PC(769px+): 기존에 숨겼던 거 → 표시로 변경, 크기 2배, 여백 15px */
@media (min-width: 769px) {
.bkj-float-back {
display: none; /* panel-open 클래스 있을 때만 flex로 덮어씌워짐 */
bottom: 15px !important;
right: 25px !important;
padding: 18px 29px !important;
font-size: 15px !important;
border-radius: 60px !important;
gap: 8px !important;
}
.bkj-float-back-arrow { font-size: 19px !important; }
.bkj-float-back-label { font-size: 15px !important; }
}
/* 모바일(≤768px): 헤더 뒤로가기 숨김 → 플로팅으로 대체 */
@media (max-width: 768px) {
.bkj-detail-back { display: none !important; }
}
/* ── 라이트박스 (이미지 확대) ── */
.bkj-lightbox {
position: fixed; inset: 0; z-index: 99900;
background: rgba(0,0,0,.88);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
display: flex; align-items: center; justify-content: center;
cursor: zoom-out;
}
.bkj-lightbox.hidden { display: none; }
.bkj-lb-img {
max-width: 92vw; max-height: 88vh;
border-radius: 16px;
box-shadow: 0 8px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
object-fit: contain;
cursor: default;
user-select: none;
}
.bkj-lb-close {
position: absolute; top: 16px; right: 16px;
width: 42px; height: 42px; border-radius: 50%;
background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25);
color: #fff; font-size: 18px; font-weight: 900; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s; z-index: 1;
}
.bkj-lb-close:hover { background: rgba(239,68,68,.55); }
/* 클릭 가능한 이미지 래퍼 커서 */
.bkj-set-img-wrap.zoomable { cursor: zoom-in; }
.bkj-set-img-wrap.zoomable img { transition: opacity .15s, transform .15s; }
.bkj-set-img-wrap.zoomable:hover img { opacity: .88; transform: scale(1.05); }
/* ══ 전체 현황 카드 ══ */
.bkj-stat-card {
background: linear-gradient(145deg, #111e3a 0%, #080f1e 100%);
border: 1px solid rgba(99,102,241,.25); border-radius: 18px;
padding: 18px; margin-bottom: 14px;
box-shadow: 0 4px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.bkj-stat-hero { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.bkj-stat-img {
width: 96px; height: 96px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
border: 2px solid rgba(99,102,241,.3);
}
.bkj-stat-img-ph {
width: 96px; height: 96px; border-radius: 12px; flex-shrink: 0;
background: rgba(99,102,241,.08); border: 2px solid rgba(99,102,241,.2);
display: flex; align-items: center; justify-content: center; font-size: 38px;
}
.bkj-stat-info { flex: 1; min-width: 0; }
.bkj-stat-title { font-size: 17px; font-weight: 900; color: #f1f5f9; margin-bottom: 8px; line-height: 1.3; }
.bkj-stat-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
.bkj-stat-nums {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px;
}
.bkj-stat-num {
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
border-radius: 12px; padding: 10px 8px; text-align: center;
}
.bkj-stat-num-label { font-size: 11px; color: #94a3b8; font-weight: 700; margin-bottom: 4px; letter-spacing: .3px; text-transform: uppercase; }
.bkj-stat-num-val { font-size: 22px; font-weight: 900; color: #f1f5f9; }
.bkj-stat-num-val.purple { color: #a5b4fc; }
.bkj-stat-num-val.green { color: #6ee7b7; }
.bkj-stat-gauge-wrap { margin-bottom: 4px; }
.bkj-stat-gauge-label {
display: flex; justify-content: space-between; font-size: 12px; font-weight: 700;
color: #94a3b8; margin-bottom: 6px;
}
.bkj-stat-gauge-label span:last-child { color: #a5b4fc; font-size: 13px; }
.bkj-stat-gauge {
width: 100%; height: 10px; border-radius: 99px;
background: rgba(255,255,255,.08); overflow: hidden;
}
.bkj-stat-gauge-fill {
height: 100%; border-radius: 99px;
background: linear-gradient(90deg, #4f46e5, #7c3aed, #a21caf);
transition: width .5s ease;
}
.bkj-stat-gauge-fill.done { background: linear-gradient(90deg, #b45309, #d97706, #f59e0b); }
.bkj-stat-gauge-sub { font-size: 11px; color: #94a3b8; margin-top: 6px; font-weight: 600; }
/* ══ 세트별 상품 현황 ══ */
.bkj-sets-section {
margin-bottom: 14px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
padding: 16px;
}
.bkj-sets-title {
font-size: 13px; font-weight: 900; color: #cbd5e1;
display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
text-transform: uppercase; letter-spacing: .7px;
}
.bkj-sets-title::before {
content: ''; display: block; width: 3px; height: 14px;
background: linear-gradient(180deg, #6366f1, #a21caf);
border-radius: 2px; flex-shrink: 0;
}
/* ── 상품 그리드: PC 3열~4열 자동, 모바일 2열 고정 ── */
.bkj-sets-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
@media (max-width: 600px) {
.bkj-sets-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* 개별 상품 카드 */
.bkj-set-item {
background: rgba(10,15,35,.95);
border: 1.5px solid rgba(255,255,255,.1);
border-radius: 20px;
padding: 16px 14px 14px;
text-align: center; position: relative; overflow: hidden;
transition: border-color .2s, transform .15s, box-shadow .2s;
cursor: default;
display: flex; flex-direction: column; align-items: center; gap: 0;
}
.bkj-set-item:hover {
border-color: rgba(99,102,241,.65);
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(99,102,241,.25);
}
/* 품절(prize 소진) */
.bkj-set-item.soldout-item {
border-color: rgba(245,158,11,.45);
background: rgba(8,12,28,.95); opacity: .85;
}
/* 굿즈 */
.bkj-set-item.goods-item {
border-style: dashed; border-color: rgba(52,211,153,.45);
background: rgba(5,20,28,.95);
}
/* 중간라스트원 */
.bkj-set-item.midlast-item {
border-color: rgba(168,85,247,.5);
background: rgba(15,5,35,.95);
}
/* 라스트원 — 골드 */
.bkj-set-item.lastone-item {
border-color: rgba(251,191,36,.7);
background: rgba(20,14,5,.98);
box-shadow: 0 0 20px rgba(251,191,36,.2);
}
/* 이미지 — 크게 */
.bkj-set-img-wrap {
width: 120px; height: 120px;
border-radius: 16px; overflow: hidden;
margin: 0 auto 10px;
border: 2px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.06);
flex-shrink: 0;
box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.bkj-set-img { width: 100%; height: 100%; object-fit: cover; }
.bkj-set-img-ph { font-size: 44px; line-height: 1; }
/* 뱃지 행 (A상 + 1~2 가로 나란히) */
.bkj-set-badge-row {
display: flex; align-items: center; justify-content: center;
gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
}
/* 굿즈 서브 뱃지 — 민트 소형 */
.bkj-set-goods-sub-badge {
font-size: 11px; font-weight: 900;
padding: 3px 8px; border-radius: 20px;
color: #6ee7b7;
background: rgba(52,211,153,.15);
border: 1px solid rgba(52,211,153,.4);
box-shadow: 0 0 6px rgba(52,211,153,.2);
letter-spacing: .3px;
}
/* 상/종류 뱃지 공통 */
.bkj-set-letter-badge {
font-size: 14px; font-weight: 900;
padding: 4px 12px; border-radius: 20px;
letter-spacing: .5px; line-height: 1.3;
white-space: nowrap;
text-shadow: 0 0 8px currentColor;
}
/* prize 기본(인디고) */
.bkj-set-item:not(.soldout-item):not(.goods-item):not(.midlast-item):not(.lastone-item) .bkj-set-letter-badge {
color: #c7d2fe;
background: rgba(99,102,241,.2);
border: 1.5px solid rgba(99,102,241,.5);
box-shadow: 0 0 10px rgba(99,102,241,.3);
}
/* 품절(amber) */
.bkj-set-item.soldout-item .bkj-set-letter-badge {
color: #fde68a;
background: rgba(245,158,11,.18);
border: 1.5px solid rgba(245,158,11,.5);
box-shadow: 0 0 10px rgba(245,158,11,.3);
}
/* 굿즈(민트) */
.bkj-set-item.goods-item .bkj-set-letter-badge {
color: #6ee7b7;
background: rgba(52,211,153,.18);
border: 1.5px solid rgba(52,211,153,.5);
box-shadow: 0 0 10px rgba(52,211,153,.3);
}
/* 중간라스트원(퍼플) */
.bkj-set-item.midlast-item .bkj-set-letter-badge {
color: #e9d5ff;
background: rgba(168,85,247,.18);
border: 1.5px solid rgba(168,85,247,.5);
box-shadow: 0 0 12px rgba(168,85,247,.4);
}
/* 중간라스트원 품절 — soldout-item이 함께 붙을 때 앰버로 덮어씀 */
.bkj-set-item.soldout-item.midlast-item .bkj-set-letter-badge {
color: #fde68a;
background: rgba(245,158,11,.18);
border: 1.5px solid rgba(245,158,11,.5);
box-shadow: 0 0 10px rgba(245,158,11,.3);
}
.bkj-set-item.soldout-item.midlast-item {
border-color: rgba(245,158,11,.35);
background: rgba(10,15,35,.95);
opacity: .85;
}
/* 라스트원(골드) */
.bkj-set-item.lastone-item .bkj-set-letter-badge {
color: #fef08a;
background: rgba(234,179,8,.2);
border: 1.5px solid rgba(234,179,8,.65);
box-shadow: 0 0 14px rgba(251,191,36,.5);
text-shadow: 0 0 10px rgba(251,191,36,.8);
}
/* 번호 범위 뱃지 */
.bkj-set-range {
font-size: 12px; font-weight: 800;
padding: 4px 10px; border-radius: 20px;
letter-spacing: .3px; line-height: 1.3;
color: #a5b4fc;
background: rgba(99,102,241,.15);
border: 1.5px solid rgba(99,102,241,.35);
box-shadow: 0 0 8px rgba(99,102,241,.2);
text-shadow: 0 0 6px rgba(165,180,252,.5);
white-space: nowrap;
}
.bkj-set-item.soldout-item .bkj-set-range {
color: #fde68a; background: rgba(245,158,11,.12);
border-color: rgba(245,158,11,.35); box-shadow: 0 0 8px rgba(245,158,11,.2);
}
/* 구분선 */
.bkj-set-divider {
width: 100%; height: 1px;
background: rgba(255,255,255,.07);
margin-bottom: 10px;
}
/* 수량 한 줄 표시 */
.bkj-set-remain-oneline {
font-size: 14px; font-weight: 800;
letter-spacing: .3px; line-height: 1.6;
white-space: nowrap;
display: flex; align-items: baseline; justify-content: center; gap: 2px; flex-wrap: wrap;
}
.bkj-set-remain-current {
font-size: 22px; font-weight: 900; line-height: 1;
}
.bkj-set-remain-oneline.normal .bkj-set-remain-current { color: #6ee7b7; text-shadow: 0 0 12px rgba(110,231,183,.6); }
.bkj-set-remain-oneline.zero .bkj-set-remain-current { color: #f87171; text-shadow: 0 0 12px rgba(248,113,113,.6); }
.bkj-set-remain-oneline.low .bkj-set-remain-current { color: #fbbf24; text-shadow: 0 0 12px rgba(251,191,36,.6); }
.bkj-set-remain-oneline.special .bkj-set-remain-current { color: #c4b5fd; text-shadow: 0 0 12px rgba(196,181,253,.6); }
.bkj-set-remain-sep {
font-size: 13px; color: rgba(255,255,255,.3); font-weight: 600; margin: 0 3px;
}
.bkj-set-remain-total {
font-size: 13px; color: rgba(255,255,255,.5); font-weight: 700;
}
/* 라스트원 — 마지막 장을 뽑은 분! */
.bkj-set-remain-lastone-txt {
font-size: 13px; font-weight: 800; color: #fef08a;
text-shadow: 0 0 10px rgba(251,191,36,.7);
letter-spacing: .3px; line-height: 1.5;
white-space: normal; text-align: center;
}
/* 게이지 */
.bkj-set-gauge {
width: 100%; height: 5px; border-radius: 99px;
background: rgba(255,255,255,.07); overflow: hidden; margin-top: 10px;
}
.bkj-set-gauge-fill {
height: 100%; border-radius: 99px;
background: linear-gradient(90deg, #4f46e5, #818cf8);
box-shadow: 0 0 6px rgba(99,102,241,.5);
transition: width .5s cubic-bezier(.4,0,.2,1);
}
.bkj-set-gauge-fill.done { background: linear-gradient(90deg, #b45309, #f59e0b); box-shadow: 0 0 6px rgba(245,158,11,.4); }
.bkj-set-gauge-fill.low { background: linear-gradient(90deg, #b45309, #fbbf24); box-shadow: 0 0 6px rgba(251,191,36,.4); }
/* 품절 뱃지 (prize 소진) */
.bkj-set-soldout-badge {
position: absolute; top: 8px; right: 8px;
background: linear-gradient(135deg, #7f1d1d, #dc2626);
color: #fff; font-size: 10px; font-weight: 900;
padding: 3px 8px; border-radius: 6px; letter-spacing: .5px;
box-shadow: 0 0 10px rgba(220,38,38,.5);
}
.bkj-sets-loading {
text-align: center; padding: 32px 0; color: #94a3b8; font-size: 14px; font-weight: 600;
}
/* ══ 결과 모아보기 ══ */
.bkj-result-section {
margin-top: 0;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
padding: 16px;
}
.bkj-result-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.bkj-result-title {
font-size: 13px; font-weight: 900; color: #cbd5e1;
display: flex; align-items: center; gap: 8px;
text-transform: uppercase; letter-spacing: .7px;
}
.bkj-result-title::before {
content: ''; display: block; width: 3px; height: 14px;
background: linear-gradient(180deg, #6366f1, #a21caf);
border-radius: 2px; flex-shrink: 0;
}
.bkj-result-subtitle {
font-size: 12px; color: #94a3b8; font-weight: 700;
background: rgba(255,255,255,.06); border-radius: 6px;
padding: 2px 9px; border: 1px solid rgba(255,255,255,.1);
}
.bkj-result-search {
padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 700;
background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12);
color: #f1f5f9; outline: none; width: 160px;
transition: border-color .15s, background .15s;
}
.bkj-result-search:focus {
border-color: rgba(99,102,241,.6);
background: rgba(99,102,241,.1);
}
.bkj-result-search::placeholder { color: #64748b; }
/* 결과 없음 */
.bkj-no-result {
text-align: center; padding: 36px 0; color: #94a3b8;
font-size: 14px; font-weight: 700;
}
/* 닉네임 카드 목록 */
.bkj-nick-list { display: flex; flex-direction: column; gap: 8px; }
/* 상위상/하위상 구분 헤더 */
.bkj-rank-section-title {
font-size: 11px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase;
padding: 6px 10px; border-radius: 8px; margin: 10px 0 6px;
display: flex; align-items: center; gap: 6px;
}
.bkj-rank-section-title.top-rank {
color: #fbbf24; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.2);
}
.bkj-rank-section-title.goods-rank {
color: #6ee7b7; background: rgba(110,231,183,.06); border: 1px solid rgba(110,231,183,.15);
}
.bkj-nick-card {
background: rgba(15,23,42,.75); border: 1px solid rgba(255,255,255,.08);
border-radius: 14px; padding: 12px 14px; overflow: hidden;
transition: border-color .15s, background .15s, transform .12s;
cursor: pointer;
}
.bkj-nick-card:hover {
border-color: rgba(99,102,241,.35);
background: rgba(99,102,241,.07);
transform: translateX(3px);
}
.bkj-nick-card:active { transform: translateX(1px); }
.bkj-nick-card-head {
display: flex; align-items: center; gap: 10px;
}
.bkj-nick-avatar {
width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 900; color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.bkj-nick-info { flex: 1; min-width: 0; }
.bkj-nick-name { font-size: 15px; font-weight: 900; color: #f1f5f9; }
.bkj-nick-count-row {
display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap;
}
.bkj-nick-count {
font-size: 12px; font-weight: 800; color: #a5b4fc;
background: rgba(99,102,241,.15); border-radius: 5px;
padding: 2px 8px; border: 1px solid rgba(99,102,241,.25);
}
/* 획득 상품 알파벳 요약 칩 (Ax1, Bx2 등) */
.bkj-nick-prize-chips {
display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px;
}
.bkj-prize-chip {
font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px;
display: inline-flex; align-items: center; gap: 1px;
}
.bkj-prize-chip.prize { color: #c7d2fe; background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3); }
.bkj-prize-chip.goods { color: #6ee7b7; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25); }
.bkj-prize-chip.midlast{ color: #d8b4fe; background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.25); }
.bkj-nick-toggle {
font-size: 11px; color: #94a3b8; flex-shrink: 0;
background: rgba(255,255,255,.05); border-radius: 6px;
padding: 4px 8px; border: 1px solid rgba(255,255,255,.1);
font-weight: 700;
}
.bkj-nick-nums-wrap {
display: none; margin-top: 10px; flex-wrap: wrap; gap: 5px;
padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07);
}
.bkj-nick-nums-wrap.open { display: flex; }
.bkj-num-chip {
background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.25);
color: #a5b4fc; font-size: 11px; font-weight: 700;
padding: 3px 9px; border-radius: 8px;
}
/* 반응형 */
@media (max-width: 768px) {
.bkj-hero { padding: 28px 16px 24px; }
.bkj-hero-title { font-size: 26px; }
.bkj-hero-sub { font-size: 13px; margin-bottom: 16px; }
.bkj-hero-trust-item { font-size: 11px; padding: 5px 10px; }
.bkj-hero::after { display: none; }
/* 방송쿠지 모바일: 2행 레이아웃
1행: 소제목(왼쪽 정렬)
2행: 필터버튼(왼쪽 정렬) */
.bkj-list-header {
flex-direction: column !important;
align-items: flex-start !important;
padding: 11px 14px 10px; gap: 8px;
}
.bkj-filter-row {
width: 100%;
justify-content: flex-start;
}
.bkj-filter-btn { padding: 4px 11px; font-size: 11px; }
.bkj-refresh-btn { width: 26px; height: 26px; }
.bkj-grid { grid-template-columns: repeat(2, 1fr); padding: 0 10px 24px; gap: 8px; }
/* 모바일: 온라인쿠지와 동일하게 2열 고정 */
.bkj-stat-nums { grid-template-columns: repeat(3,1fr); }
.bkj-result-search { width: 130px; }
.bkj-detail-back { padding: 9px 13px; font-size: 13px; }
}
@media (max-width: 600px) {
/* 카드 크기 모바일 최적화 */
.bkj-set-img-wrap { width: 68px; height: 68px; }
.bkj-set-letter { font-size: 24px; }
.bkj-set-remain-val { font-size: 26px; }
.bkj-set-name { font-size: 11px; }
.bkj-set-range { font-size: 11px; }
/* 2열 그리드 — 카드 내부 여백·폰트 축소 */
.bkj-card-body { padding: 10px 10px 12px; }
.bkj-card-title { font-size: 12px; margin-bottom: 7px; }
.bkj-badge { font-size: 10px; padding: 2px 7px; }
.bkj-card-badges { gap: 4px; margin-bottom: 8px; }
.bkj-card-gauge-label { font-size: 10px; }
.bkj-card-status-badge { font-size: 10px; padding: 3px 7px; top: 6px; right: 6px; }
}
@media (max-width: 480px) {
.bkj-stat-hero { flex-direction: column; }
.bkj-stat-img, .bkj-stat-img-ph { width: 100%; height: 160px; border-radius: 12px; }
.bkj-detail-head { padding: 12px 12px; padding-top: 12px; } /* Android: statusBarView가 상태바 처리 */
.bkj-detail-back { padding: 8px 12px; min-width: 54px; }
.bkj-back-label { font-size: 12px; }
.bkj-detail-close { width: 38px; height: 38px; font-size: 16px; }
.bkj-set-item { padding: 14px 10px 12px; border-radius: 14px; }
.bkj-set-img-wrap { width: 60px; height: 60px; }
.bkj-set-letter { font-size: 22px; }
.bkj-set-remain-val { font-size: 24px; }
}
/* ─────────────────────────────────────── */
/* ── okOrderModal: 밝은 쇼핑몰 주문서 스타일 ── */
#okOrderModal {
display: none;
position: fixed;
inset: 0;
z-index: 10052;
background: rgba(15,20,40,.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
align-items: flex-end;
justify-content: center;
padding: 0;
padding-bottom: 5px; /* navBarView가 홈바 처리 */
}
@media (min-width: 540px) {
#okOrderModal { align-items: center; padding: 16px; }
}
.ok-order-sheet {
width: 100%;
max-width: 480px;
background: #f1f5f9;
border-radius: 28px 28px 0 0;
overflow: hidden;
box-shadow: 0 -10px 56px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.08);
display: flex;
flex-direction: column;
max-height: 92dvh;
overflow-y: auto;
/* 모바일: 홈바 영역은 버튼 margin-bottom으로만 처리 (중복 방지) */
padding-bottom: 0;
}
@media (min-width: 540px) {
.ok-order-sheet {
border-radius: 24px;
max-height: 88vh;
}
}
/* 헤더 */
.ok-order-hdr {
background: #fff;
border-bottom: 2px solid #e2e8f0;
padding: 20px 20px 16px;
position: sticky;
top: 0;
z-index: 2;
}
.ok-order-hdr-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.ok-order-title {
font-size: 19px;
font-weight: 900;
color: #0f172a;
letter-spacing: -.5px;
}
.ok-order-close-btn {
width: 34px; height: 34px;
border-radius: 50%;
background: #e2e8f0;
border: none;
color: #334155;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
flex-shrink: 0;
}
.ok-order-close-btn:hover { background: #cbd5e1; color: #0f172a; }
.ok-order-subtitle {
font-size: 12.5px;
color: #64748b;
font-weight: 600;
}
/* 본문 섹션 */
.ok-order-body { padding: 16px 20px 0; }
.ok-order-section {
background: #fff;
border-radius: 16px;
border: 1.5px solid #cbd5e1;
overflow: hidden;
margin-bottom: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.ok-order-section-title {
font-size: 11px;
font-weight: 800;
color: #64748b;
letter-spacing: .8px;
text-transform: uppercase;
padding: 12px 16px 8px;
border-bottom: 1.5px solid #e2e8f0;
}
.ok-order-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
gap: 8px;
}
.ok-order-row:last-child { border-bottom: none; }
.ok-order-row-label {
font-size: 14px;
color: #334155;
font-weight: 600;
flex: 1;
}
.ok-order-row-val {
font-size: 14px;
color: #0f172a;
font-weight: 800;
text-align: right;
white-space: nowrap;
}
.ok-order-row-val.minus { color: #6d28d9; }
.ok-order-divider {
height: 1px;
background: #e2e8f0;
margin: 0 16px;
}
/* 합계 행 */
.ok-order-total-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px;
gap: 8px;
}
.ok-order-total-label {
font-size: 15px;
font-weight: 900;
color: #0f172a;
}
.ok-order-total-val {
font-size: 22px;
font-weight: 900;
color: #4338ca;
letter-spacing: -.6px;
text-shadow: 0 1px 2px rgba(67,56,202,.15);
}
/* 환불 경고 박스 */
.ok-order-refund-warn {
margin: 0 20px 12px;
padding: 12px 14px;
background: #fff7ed;
border: 1.5px solid #fb923c;
border-radius: 12px;
font-size: 12.5px;
color: #9a3412;
font-weight: 700;
line-height: 1.65;
}
/* 구매 버튼 */
.ok-order-buy-btn {
margin: 0 20px 16px;
width: calc(100% - 40px);
padding: 17px 0;
border-radius: 16px;
border: none;
background: linear-gradient(135deg, #4338ca 0%, #6d28d9 55%, #7c3aed 100%);
color: #fff;
font-size: 16.5px;
font-weight: 900;
cursor: pointer;
letter-spacing: .02em;
box-shadow: 0 5px 24px rgba(79,70,229,.45), 0 1px 4px rgba(0,0,0,.15);
transition: all .18s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.ok-order-buy-btn:hover:not(:disabled) {
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow: 0 10px 32px rgba(79,70,229,.55), 0 1px 4px rgba(0,0,0,.15);
}
.ok-order-buy-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.ok-order-buy-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
/* 포인트 0원 케이스 — 전액 포인트 결제 강조 */
.ok-order-total-val.free { color: #16a34a; }
/* ─────────────────────────────────────── */
#okPointShopModal::-webkit-scrollbar{width:0;}
#okPointShopModal{scrollbar-width:none;}
.okps-card-wrap{transition:transform .15s,box-shadow .15s;}
.okps-card-wrap:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(124,58,237,.25);}
.okps-buy-btn{transition:all .15s;}
.okps-buy-btn:hover{opacity:.88;transform:scale(1.03);}
.okps-qty-btn{transition:background .15s;}
.okps-qty-btn:hover{background:rgba(255,255,255,.12)!important;}
@keyframes okpsPulse{0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,.4);}50%{box-shadow:0 0 0 8px rgba(168,85,247,0);}}
/* ─────────────────────────────────────── */
/* ── 오버레이 ── */
#welcomePopupOverlay{
position:fixed;inset:0;z-index:99999;
background:rgba(0,0,0,.65);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
display:flex;align-items:center;justify-content:center;
padding:16px;animation:wpFadeIn .25s ease;
/* Android 홈바 영역을 오버레이가 덮지 않도록 bottom padding 추가 */
padding-bottom:16px; /* navBarView가 홈바 처리 */
}
@keyframes wpFadeIn{from{opacity:0}to{opacity:1}}
@keyframes wpSlideUp{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
/* ── 팝업 본체 ── */
#welcomePopup{
background:#ffffff;
border-radius:22px;
box-shadow:0 32px 80px rgba(0,0,0,.28),0 8px 32px rgba(0,0,0,.14);
width:100%;max-width:420px;
padding:26px 22px 20px;
position:relative;
animation:wpSlideUp .32s cubic-bezier(.22,1,.36,1);
overflow:hidden;
}
/* 상단 컬러 바 */
#welcomePopup::before{
content:'';position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,#6366f1 0%,#a855f7 50%,#ec4899 100%);
}
/* ── 닫기 버튼 ── */
#welcomePopupClose{
position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
background:#f1f5f9;border:none;
color:#64748b;font-size:14px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .15s;z-index:2;
}
#welcomePopupClose:hover{background:#fee2e2;color:#ef4444;transform:scale(1.1)}
/* ── 헤더 ── */
.wp-header{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.wp-logo{
width:50px;height:50px;border-radius:14px;flex-shrink:0;
background:linear-gradient(135deg,#6366f1,#a855f7);
display:flex;align-items:center;justify-content:center;font-size:23px;
box-shadow:0 4px 16px rgba(99,102,241,.4);
}
.wp-header-text{}
.wp-title{font-size:15px;font-weight:800;color:#0f172a;line-height:1.35;letter-spacing:-.02em}
.wp-sub{font-size:11.5px;color:#64748b;margin-top:3px;font-weight:500}
/* ── 카카오 배너 ── */
.wp-kakao-banner{
display:flex;align-items:center;gap:11px;
background:linear-gradient(135deg,#ffe812,#ffd000);
border-radius:14px;padding:12px 14px;text-decoration:none;margin-bottom:18px;
transition:transform .15s,box-shadow .15s;
box-shadow:0 3px 14px rgba(255,200,0,.4);
}
.wp-kakao-banner:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(255,200,0,.55)}
.wp-kakao-icon{
width:40px;height:40px;border-radius:10px;flex-shrink:0;
background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;
}
.wp-kakao-text{flex:1;min-width:0}
.wp-kakao-title{font-size:13px;font-weight:800;color:#1a1a1a;letter-spacing:-.01em}
.wp-kakao-desc{font-size:11px;color:rgba(0,0,0,.5);margin-top:2px;font-weight:500}
.wp-kakao-arrow{font-size:22px;color:rgba(0,0,0,.35);font-weight:900;flex-shrink:0;line-height:1}
/* ── 섹션 레이블 ── */
.wp-section-label{
font-size:11px;font-weight:700;color:#64748b;
letter-spacing:.06em;text-transform:uppercase;
margin-bottom:8px;
}
/* ── 컨텐츠 카드 ── */
.wp-content-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.wp-content-item{
display:flex;align-items:center;gap:12px;
padding:12px 14px;
background:#f8fafc;
border:1.5px solid #e2e8f0;
border-radius:13px;text-decoration:none;
transition:all .15s;
}
.wp-content-item:hover{
background:#eef2ff;border-color:#a5b4fc;
transform:translateX(3px);
box-shadow:0 2px 12px rgba(99,102,241,.15);
}
.wp-content-icon{
width:40px;height:40px;border-radius:11px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:20px;
box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.wp-content-info{flex:1;min-width:0}
.wp-content-name{font-size:14px;font-weight:800;color:#0f172a;letter-spacing:-.01em}
.wp-content-desc{font-size:11.5px;color:#64748b;margin-top:2px;font-weight:500}
.wp-content-arrow{font-size:20px;color:#94a3b8;flex-shrink:0;font-weight:700;line-height:1}
/* ── 포인트 버튼 ── */
.wp-point-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.wp-point-btn{
display:flex;flex-direction:column;align-items:center;gap:8px;
padding:14px 6px 12px;
background:#f8fafc;
border:1.5px solid #e2e8f0;
border-radius:13px;cursor:pointer;
transition:all .15s;font-family:inherit;
}
.wp-point-btn:hover{
background:#eef2ff;border-color:#a5b4fc;
transform:translateY(-3px);
box-shadow:0 6px 18px rgba(99,102,241,.2);
}
.wp-point-btn:active{transform:translateY(0);box-shadow:none}
.wp-point-icon{
width:42px;height:42px;border-radius:12px;
display:flex;align-items:center;justify-content:center;font-size:20px;
box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.wp-point-name{font-size:12px;font-weight:800;color:#1e293b;text-align:center;letter-spacing:-.01em}
/* ── 하단 버튼 ── */
.wp-footer{display:flex;gap:8px;align-items:center}
.wp-no-show{
flex:1;padding:11px 8px;
background:#f1f5f9;border:1.5px solid #e2e8f0;border-radius:11px;
color:#64748b;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;
font-family:inherit;
}
.wp-no-show:hover{background:#e2e8f0;color:#475569;border-color:#cbd5e1}
.wp-close-btn{
flex:1.4;padding:12px 8px;
background:linear-gradient(135deg,#6366f1,#818cf8);
border:none;border-radius:11px;color:#fff;
font-size:13.5px;font-weight:800;letter-spacing:-.01em;
cursor:pointer;transition:all .15s;font-family:inherit;
box-shadow:0 4px 16px rgba(99,102,241,.45);
}
.wp-close-btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(99,102,241,.55)}
.wp-close-btn:active{transform:none;box-shadow:0 2px 8px rgba(99,102,241,.3)}
/* ── 반응형 ── */
@media(max-width:480px){
#welcomePopup{padding:22px 16px 18px}
.wp-title{font-size:14px}
.wp-content-icon{width:36px;height:36px;font-size:18px}
.wp-content-name{font-size:13px}
.wp-point-icon{width:38px;height:38px;font-size:18px}
.wp-point-name{font-size:11.5px}
.wp-kakao-title{font-size:12.5px}
.wp-logo{width:44px;height:44px;font-size:21px}
}
/* ══════════════════════════════════════════════════════════
⚡ 미리충전 플로팅 버튼 (#okPreChargeFloatBtn)
══════════════════════════════════════════════════════════ */
#okPreChargeFloatBtn {
display: none;
position: fixed;
right: 18px;
z-index: 9390; /* scrollTopBtn(9400) 바로 아래 */
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0;
background: linear-gradient(135deg, #7c3aed, #4f46e5);
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.55), 0 0 0 2px rgba(167,139,250,.25);
transition: transform .2s ease, box-shadow .2s ease, bottom .2s ease;
animation: okpcfloat 3s ease-in-out infinite;
}
#okPreChargeFloatBtn.show { display: flex !important; align-items: center; justify-content: center; }
#okPreChargeFloatBtn:hover {
transform: translateY(-4px) scale(1.07);
box-shadow: 0 8px 28px rgba(124, 58, 237, .75), 0 0 0 3px rgba(167,139,250,.35);
}
#okPreChargeFloatBtn:active { transform: scale(.93); }
.okpfc-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
pointer-events: none;
}
.okpfc-icon {
font-size: 20px;
line-height: 1;
filter: drop-shadow(0 0 6px rgba(251,191,36,.8));
}
.okpfc-label {
font-size: 9px;
font-weight: 700;
color: #fff;
letter-spacing: -.2px;
white-space: nowrap;
}
@keyframes okpcfloat {
0%, 100% { transform: translateY(0); filter: drop-shadow(0 6px 14px rgba(124,58,237,.5)); }
50% { transform: translateY(-5px); filter: drop-shadow(0 10px 22px rgba(124,58,237,.75)); }
}
#okPreChargeFloatBtn.show:hover { animation: none; }
/* ══════════════════════════════════════════════════════════
⚡ 미리충전 모달 (#okPreChargeModal)
══════════════════════════════════════════════════════════ */
.okpcm-backdrop {
position: fixed;
inset: 0;
z-index: 10500;
background: rgba(0,0,0,.65);
backdrop-filter: blur(4px);
display: flex;
align-items: flex-end;
justify-content: center;
animation: okpcmFadeIn .2s ease;
}
@keyframes okpcmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.okpcm-sheet {
width: 100%;
max-width: 480px;
background: linear-gradient(170deg, #0f0c29 0%, #1a1040 40%, #0d0d1a 100%);
border-radius: 28px 28px 0 0;
padding: 24px 20px 36px;
box-shadow: 0 -8px 40px rgba(124,58,237,.3), 0 -2px 0 rgba(167,139,250,.2);
animation: okpcmSlideUp .3s cubic-bezier(.22,.61,.36,1);
position: relative;
overflow: hidden;
}
.okpcm-sheet::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 40px; height: 4px;
background: rgba(167,139,250,.4);
border-radius: 2px;
margin-top: 8px;
}
@keyframes okpcmSlideUp {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* 헤더 */
.okpcm-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
margin-top: 8px;
}
.okpcm-header-left { display: flex; align-items: center; gap: 12px; }
.okpcm-header-icon {
font-size: 28px;
filter: drop-shadow(0 0 10px rgba(251,191,36,.9));
animation: okpcfloat 2s ease-in-out infinite;
}
.okpcm-title {
font-size: 18px;
font-weight: 800;
color: #fff;
letter-spacing: -.3px;
}
.okpcm-subtitle {
font-size: 12px;
color: rgba(167,139,250,.8);
margin-top: 2px;
}
.okpcm-close {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
color: #aaa;
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.okpcm-close:hover { background: rgba(239,68,68,.2); color: #f87171; }
/* 잔액 표시 */
.okpcm-balance-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(167,139,250,.15);
border-radius: 14px;
padding: 14px 20px;
margin-bottom: 12px;
}
.okpcm-balance-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.okpcm-balance-label { font-size: 11px; color: rgba(255,255,255,.45); }
.okpcm-balance-val {
font-size: 16px;
font-weight: 700;
color: rgba(255,255,255,.75);
transition: color .3s;
}
.okpcm-balance-after { color: #a78bfa; }
.okpcm-balance-arrow { font-size: 20px; color: rgba(167,139,250,.5); }
/* 잔여 장수 */
.okpcm-stock-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(255,255,255,.5);
background: rgba(255,255,255,.04);
border-radius: 8px;
padding: 8px 14px;
margin-bottom: 18px;
}
.okpcm-stock-icon { font-size: 14px; }
/* 장수 선택 컨트롤 */
.okpcm-qty-section { margin-bottom: 14px; }
.okpcm-qty-label {
font-size: 11px;
font-weight: 600;
color: rgba(167,139,250,.7);
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 10px;
}
.okpcm-qty-ctrl {
display: flex;
align-items: center;
gap: 12px;
}
.okpcm-qty-btn {
width: 58px; height: 58px;
border-radius: 50%;
border: 2px solid rgba(167,139,250,.35);
background: rgba(124,58,237,.15);
color: #c4b5fd;
font-size: 26px;
font-weight: 300;
cursor: pointer;
transition: all .15s;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.okpcm-qty-btn:hover { background: rgba(124,58,237,.35); border-color: rgba(167,139,250,.6); transform: scale(1.08); }
.okpcm-qty-btn:active { transform: scale(.92); }
.okpcm-qty-display {
flex: 1;
min-height: 72px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(79,70,229,.15));
border: 2px solid rgba(167,139,250,.3);
border-radius: 18px;
cursor: pointer;
transition: border-color .15s, background .15s;
position: relative;
overflow: hidden;
}
.okpcm-qty-display::after {
content: '✏️';
position: absolute;
top: 5px; right: 8px;
font-size: 10px;
opacity: .4;
}
.okpcm-qty-display:hover { border-color: rgba(167,139,250,.6); background: rgba(124,58,237,.28); }
.okpcm-qty-num {
font-size: 42px;
font-weight: 900;
color: #fff;
line-height: 1;
letter-spacing: -1px;
text-shadow: 0 0 20px rgba(167,139,250,.6);
transition: all .15s;
}
.okpcm-qty-unit {
font-size: 18px;
font-weight: 600;
color: rgba(167,139,250,.7);
align-self: flex-end;
padding-bottom: 8px;
}
.okpcm-direct-input {
display: none;
width: 100%;
margin-top: 10px;
padding: 12px 16px;
background: rgba(255,255,255,.07);
border: 2px solid rgba(167,139,250,.5);
border-radius: 12px;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
outline: none;
transition: border-color .15s;
}
.okpcm-direct-input:focus { border-color: #a78bfa; }
.okpcm-direct-input.active { display: block; }
/* 빠른 선택 버튼 */
.okpcm-quick-row {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.okpcm-quick-btn {
flex: 1;
padding: 10px 4px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
color: rgba(255,255,255,.7);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
}
.okpcm-quick-btn:hover, .okpcm-quick-btn.selected {
background: rgba(124,58,237,.35);
border-color: rgba(167,139,250,.5);
color: #c4b5fd;
transform: translateY(-1px);
}
.okpcm-quick-btn:active { transform: scale(.95); }
.okpcm-quick-all {
background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(245,158,11,.1));
border-color: rgba(251,191,36,.3);
color: #fbbf24;
}
.okpcm-quick-all:hover, .okpcm-quick-all.selected {
background: linear-gradient(135deg, rgba(251,191,36,.3), rgba(245,158,11,.2));
border-color: rgba(251,191,36,.6);
color: #fde68a;
}
/* 금액 표시 */
.okpcm-price-section {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 12px;
}
.okpcm-price-formula {
font-size: 12px;
color: rgba(255,255,255,.4);
margin-bottom: 6px;
}
.okpcm-price-total-wrap {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: opacity .15s;
}
.okpcm-price-total-wrap:hover { opacity: .8; }
.okpcm-price-total {
font-size: 26px;
font-weight: 900;
color: #fff;
letter-spacing: -.5px;
transition: color .2s;
}
.okpcm-price-edit-hint { font-size: 13px; color: rgba(167,139,250,.5); }
.okpcm-amount-input-wrap { margin-top: 10px; }
.okpcm-amount-input {
width: 100%;
padding: 10px 14px;
background: rgba(255,255,255,.07);
border: 2px solid rgba(167,139,250,.5);
border-radius: 10px;
color: #fff;
font-size: 16px;
font-weight: 700;
outline: none;
transition: border-color .15s;
box-sizing: border-box;
}
.okpcm-amount-input:focus { border-color: #a78bfa; }
.okpcm-amount-hint {
font-size: 11px;
color: rgba(251,191,36,.7);
margin-top: 5px;
min-height: 16px;
}
/* 추천 뱃지 */
.okpcm-recommend {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #fbbf24;
background: rgba(251,191,36,.1);
border: 1px solid rgba(251,191,36,.25);
border-radius: 8px;
padding: 7px 12px;
margin-bottom: 12px;
}
.okpcm-recommend-icon { font-size: 14px; }
/* 결제 버튼 */
.okpcm-pay-btn {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #7c3aed, #4f46e5);
border: none;
border-radius: 16px;
color: #fff;
font-size: 17px;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 20px rgba(124,58,237,.5);
transition: all .15s;
letter-spacing: -.2px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.okpcm-pay-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
pointer-events: none;
}
.okpcm-pay-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(124,58,237,.65); }
.okpcm-pay-btn:active:not(:disabled) { transform: scale(.97); }
.okpcm-pay-btn:disabled { opacity: .5; cursor: not-allowed; }
.okpcm-pay-btn.loading { opacity: .75; }
.okpcm-pay-icon { font-size: 20px; }
/* 안내 */
.okpcm-notice {
text-align: center;
font-size: 11px;
color: rgba(255,255,255,.75);
font-weight: 500;
}
/* 숫자 카운트업 애니메이션 */
@keyframes okpcmNumPop {
0% { transform: scale(1); }
40% { transform: scale(1.18); }
70% { transform: scale(.95); }
100% { transform: scale(1); }
}
.okpcm-qty-num.pop { animation: okpcmNumPop .25s ease; }
/* 충전 완료 스파클 */
@keyframes okpcmSparkle {
0% { opacity: 1; transform: scale(1) translateY(0); }
100% { opacity: 0; transform: scale(1.8) translateY(-40px); }
}
.okpcm-sparkle {
position: absolute;
pointer-events: none;
font-size: 20px;
animation: okpcmSparkle .8s ease forwards;
}
/* 모바일 반응형 */
@media (max-width: 480px) {
.okpcm-sheet { padding: 20px 16px 32px; }
.okpcm-qty-num { font-size: 36px; }
.okpcm-qty-btn { width: 52px; height: 52px; font-size: 24px; }
.okpcm-price-total { font-size: 22px; }
.okpcm-pay-btn { font-size: 16px; padding: 16px; }
}
/* 밸런스 값 갱신 애니메이션 */
@keyframes okpcmBalancePulse {
0%, 100% { color: #a78bfa; }
50% { color: #c4b5fd; text-shadow: 0 0 12px rgba(167,139,250,.7); }
}
.okpcm-balance-after.updating { animation: okpcmBalancePulse .5s ease; }
/* ★ [USER-REALTIME] 포인트 실시간 갱신 flash 애니메이션 */
@keyframes ptFlash {
0% { background: rgba(167,139,250,0.35); }
100% { background: transparent; }
}
.pt-flash { animation: ptFlash 0.7s ease-out; border-radius: 6px; }
/* ══════════════════════════════════════════
🎁 다중뜯기 모달 배경 투명 방지 (iOS/Android GPU 레이어 fix)
══════════════════════════════════════════ */
#okMultiTearModal {
will-change: transform;
isolation: isolate;
}
#okMultiTearModal::before {
content: '';
position: absolute;
inset: 0;
background: rgb(5, 7, 20);
z-index: -1;
pointer-events: none;
}
/* ══════════════════════════════════════════
🎮 결과 모달 — 아케이드 게임 UI (밝고 자연스럽게)
══════════════════════════════════════════ */
/* ── 모달 배경 & 레이아웃 ── */
#okMultiResultModal {
background:
radial-gradient(ellipse at 15% 10%, rgba(120,60,220,.18) 0%, transparent 50%),
radial-gradient(ellipse at 85% 85%, rgba(16,185,129,.12) 0%, transparent 50%),
#0d0f1e !important;
/* 핵심: flex column + 전체 높이 확보 */
height: 100%;
width: 100%;
max-width: 100vw;
}
/* ══ 탭 pulse 애니메이션 ══ */
@keyframes okTabGoldPulse {
0%,100% { box-shadow: 0 0 0 1.5px rgba(251,191,36,.7), 0 0 12px rgba(251,191,36,.35); }
50% { box-shadow: 0 0 0 1.5px rgba(251,191,36,1), 0 0 22px rgba(251,191,36,.6); }
}
@keyframes okTabCyanPulse {
0%,100% { box-shadow: 0 0 0 1.5px rgba(34,211,238,.7), 0 0 12px rgba(34,211,238,.3); }
50% { box-shadow: 0 0 0 1.5px rgba(34,211,238,1), 0 0 20px rgba(34,211,238,.55); }
}
@keyframes okRHeaderBounce {
0%,100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-4px) scale(1.07); }
}
/* ── 타이틀 헤더 ── */
.ok-result-header {
width: 100%;
max-width: 640px;
padding: 18px 20px 0;
box-sizing: border-box;
flex-shrink: 0;
text-align: center;
/* align-items:stretch 환경에서 중앙 배치 */
align-self: center;
}
.ok-result-header-icon {
font-size: 34px;
margin-bottom: 4px;
filter: drop-shadow(0 0 14px rgba(251,191,36,.7));
animation: okRHeaderBounce 2s ease-in-out infinite;
display: inline-block;
}
.ok-result-header-title {
font-size: 26px;
font-weight: 900;
letter-spacing: -.02em;
background: linear-gradient(135deg, #fff 0%, #fbbf24 45%, #f9a8d4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin-bottom: 3px;
}
.ok-result-header-sub {
font-size: 12px;
color: rgba(203,213,225,.65);
font-weight: 600;
letter-spacing: .02em;
margin-bottom: 12px;
}
/* ── 탭 바 ── */
.ok-result-tabs {
display: flex;
width: 100%;
max-width: 640px;
/* align-items:stretch 환경에서 중앙 배치 */
align-self: center;
flex-shrink: 0;
padding: 8px 14px;
box-sizing: border-box;
gap: 8px;
background: transparent;
border-bottom: none;
}
.ok-result-tab {
flex: 1;
padding: 11px 6px;
font-size: 13px;
font-weight: 900;
/* 비활성 탭도 밝게 — 금/시안 희미하게 */
color: rgba(255,255,255,.75);
text-align: center;
cursor: pointer;
border: 1.5px solid rgba(255,255,255,.2);
background: rgba(255,255,255,.08);
border-radius: 12px;
font-family: inherit;
transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
position: relative;
letter-spacing: .01em;
overflow: hidden;
}
/* shimmer sweep */
.ok-result-tab::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .4s;
pointer-events: none;
}
.ok-result-tab:hover { color: #fff; filter: brightness(1.1); }
.ok-result-tab:hover::before { transform: translateX(100%); }
/* scanline 제거 (탭에서) */
.ok-result-tab::after { display: none; }
/* 탭0 비활성 — 골드 힌트 */
#okResultTab0:not(.active) {
border-color: rgba(251,191,36,.3);
background: rgba(251,191,36,.06);
color: rgba(254,243,199,.7);
}
/* 탭1 비활성 — 시안 힌트 */
#okResultTab1:not(.active) {
border-color: rgba(34,211,238,.3);
background: rgba(34,211,238,.06);
color: rgba(207,250,254,.7);
}
/* 탭0 활성: 골드 */
#okResultTab0.active {
color: #fef3c7;
background: linear-gradient(135deg, rgba(251,191,36,.28) 0%, rgba(245,158,11,.18) 100%);
border-color: rgba(251,191,36,.85);
animation: okTabGoldPulse 2.2s ease-in-out infinite;
text-shadow: 0 0 10px rgba(251,191,36,.5);
}
/* 탭1 활성: 시안 */
#okResultTab1.active {
color: #cffafe;
background: linear-gradient(135deg, rgba(34,211,238,.25) 0%, rgba(6,182,212,.16) 100%);
border-color: rgba(34,211,238,.8);
animation: okTabCyanPulse 2.2s ease-in-out infinite;
text-shadow: 0 0 10px rgba(34,211,238,.5);
}
/* ── 스크롤 컨테이너 (핵심: flex:1 + overflow-y:auto = 남은 높이 채움) ── */
.ok-result-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
display: flex;
flex-direction: column;
/* stretch 환경: scroll 내부 child를 중앙 정렬 */
align-items: center;
scrollbar-width: thin;
scrollbar-color: #c9a84c transparent;
padding-bottom: 24px;
box-sizing: border-box;
}
.ok-result-scroll::-webkit-scrollbar { width: 4px; }
.ok-result-scroll::-webkit-scrollbar-track { background: transparent; }
.ok-result-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,#f0c94a,#c9a84c);
border-radius: 4px;
}
/* ── 탭 패널 ── */
.ok-result-tab-panel {
display: none;
width: 100%;
max-width: 640px;
/* ok-result-scroll 안에서 중앙 고정 */
margin-left: auto;
margin-right: auto;
align-self: center;
padding: 14px 14px 20px;
box-sizing: border-box;
}
.ok-result-tab-panel.active { display: block; }
/* ── CTA 버튼 (당첨 탭 하단 → 배송지 이동) ── */
.ok-result-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px;
border: 1.5px solid rgba(34,211,238,.6);
border-radius: 14px;
background: linear-gradient(135deg, rgba(6,182,212,.28) 0%, rgba(8,145,178,.2) 100%);
color: #cffafe;
font-size: 15px;
font-weight: 900;
font-family: inherit;
cursor: pointer;
box-shadow: 0 0 20px rgba(34,211,238,.28), 0 4px 14px rgba(0,0,0,.4);
transition: filter .15s, transform .12s, box-shadow .15s;
letter-spacing: .03em;
margin-top: 10px;
position: relative;
overflow: hidden;
text-transform: uppercase;
}
.ok-result-cta-btn::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .5s;
pointer-events: none;
}
.ok-result-cta-btn:hover {
filter: brightness(1.18);
transform: translateY(-2px);
box-shadow: 0 0 32px rgba(34,211,238,.55), 0 8px 22px rgba(0,0,0,.45);
}
.ok-result-cta-btn:hover::before { transform: translateX(100%); }
.ok-result-cta-btn:active { transform: translateY(0); filter: brightness(.95); }
/* ── 하단 고정 CTA 바 (당첨 상품 탭 전용) ── */
.ok-result-cta-bar {
/* flex child로서 스크롤 영역 아래 자연스럽게 배치 — 절대위치 사용하지 않음 */
position: relative;
flex-shrink: 0;
width: 100%;
/* 모달이 align-items:center여서 width:100%가 무시되지 않도록 stretch 강제 */
align-self: stretch;
z-index: 30;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(to top,
rgba(13,15,30,1) 0%,
rgba(13,15,30,.97) 70%,
transparent 100%);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
pointer-events: none;
}
.ok-result-cta-bar .ok-result-cta-btn {
pointer-events: all;
margin-top: 0;
width: 100%;
max-width: 612px;
}
/* ── 하단 고정 배송 요청 바 ── */
.ok-result-bottom-bar {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 30;
padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(to top,
rgba(13,15,30,1) 0%,
rgba(13,15,30,.95) 70%,
transparent 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
pointer-events: none;
}
.ok-result-bottom-submit-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 17px;
border: 1.5px solid rgba(52,211,153,.7);
border-radius: 16px;
background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
color: #a7f3d0;
font-size: 16px;
font-weight: 900;
font-family: inherit;
cursor: pointer;
box-shadow:
0 0 24px rgba(52,211,153,.45),
0 4px 16px rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.12);
transition: filter .15s, transform .12s, box-shadow .15s;
letter-spacing: .04em;
text-transform: uppercase;
position: relative;
overflow: hidden;
pointer-events: all;
}
.ok-result-bottom-submit-btn::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .5s;
pointer-events: none;
}
.ok-result-bottom-submit-btn:hover {
filter: brightness(1.18);
transform: translateY(-2px);
box-shadow: 0 0 36px rgba(52,211,153,.65), 0 8px 24px rgba(0,0,0,.5);
}
.ok-result-bottom-submit-btn:hover::before { transform: translateX(100%); }
.ok-result-bottom-submit-btn:active { transform: translateY(0); filter: brightness(.95); }
/* ══ 당첨 상품 카드 그리드 래퍼 (스크롤바만, grid는 ok-multi-result-grid가 담당) ══ */
.ok-multi-result-list {
width: 100%;
scrollbar-width: thin;
scrollbar-color: #c9a84c transparent;
}
.ok-multi-result-list::-webkit-scrollbar { width: 5px; }
.ok-multi-result-list::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 4px; }
.ok-multi-result-list::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,#f0c94a,#c9a84c); border-radius: 4px;
}
.ok-multi-result-list::-webkit-scrollbar-thumb:hover { background: #f0c94a; }
/* 결과 카드 */
.ok-result-group-card {
border-radius: 16px;
overflow: hidden;
display: flex; flex-direction: column;
position: relative;
transition: transform .2s ease, box-shadow .2s ease;
}
.ok-result-group-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
/* scanline overlay */
.ok-result-group-card::after {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
0deg, transparent, transparent 3px,
rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px
);
pointer-events: none; z-index: 5; border-radius: inherit;
}
.ok-result-group-img-wrap {
width: 100%; aspect-ratio: 1 / 1;
position: relative; overflow: hidden;
border-radius: 14px 14px 0 0;
cursor: zoom-in; flex-shrink: 0;
}
.ok-result-group-img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .3s ease;
}
.ok-result-group-img-wrap:hover .ok-result-group-img { transform: scale(1.07); }
.ok-result-group-img-zoom {
position: absolute; inset: 0;
background: rgba(0,0,0,.42);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .18s; font-size: 26px; z-index: 6;
}
.ok-result-group-img-wrap:hover .ok-result-group-img-zoom { opacity: 1; }
.ok-result-group-imgbox {
width: 100%; height: 110px;
border-radius: 14px 14px 0 0;
display: flex; align-items: center; justify-content: center;
font-size: 44px; flex-shrink: 0; position: relative;
}
.ok-result-group-rank-badge {
position: absolute; top: 6px; left: 6px; z-index: 7;
padding: 3px 7px; border-radius: 6px;
font-size: 9.5px; font-weight: 900; letter-spacing: .06em;
text-transform: uppercase;
font-family: inherit;
backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* 현황판 ok-prize-rank-badge와 동일한 16색 팔레트 */
.ok-result-group-rank-badge.rank-a { background:linear-gradient(135deg,#ff3b3b,#cc0000); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,59,59,.6); }
.ok-result-group-rank-badge.rank-b { background:linear-gradient(135deg,#ff6d00,#e65100); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,109,0,.6); }
.ok-result-group-rank-badge.rank-c { background:linear-gradient(135deg,#ffcc00,#e6a800); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,204,0,.6); }
.ok-result-group-rank-badge.rank-d { background:linear-gradient(135deg,#aeea00,#6d9200); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(174,234,0,.6); }
.ok-result-group-rank-badge.rank-e { background:linear-gradient(135deg,#00c853,#007a33); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,200,83,.6); }
.ok-result-group-rank-badge.rank-f { background:linear-gradient(135deg,#00bfa5,#007a6e); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,191,165,.6); }
.ok-result-group-rank-badge.rank-g { background:linear-gradient(135deg,#00b0ff,#0076b6); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,176,255,.6); }
.ok-result-group-rank-badge.rank-h { background:linear-gradient(135deg,#2979ff,#0d47a1); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(41,121,255,.6); }
.ok-result-group-rank-badge.rank-i { background:linear-gradient(135deg,#304ffe,#0026ca); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(48,79,254,.6); }
.ok-result-group-rank-badge.rank-j { background:linear-gradient(135deg,#aa00ff,#6200ea); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(170,0,255,.6); }
.ok-result-group-rank-badge.rank-k { background:linear-gradient(135deg,#d500f9,#9400b8); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(213,0,249,.6); }
.ok-result-group-rank-badge.rank-l { background:linear-gradient(135deg,#f50057,#b0003a); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(245,0,87,.6); }
.ok-result-group-rank-badge.rank-m { background:linear-gradient(135deg,#e91e63,#a8003a); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(233,30,99,.6); }
.ok-result-group-rank-badge.rank-n { background:linear-gradient(135deg,#ff6e40,#c43e00); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,110,64,.6); }
.ok-result-group-rank-badge.rank-o { background:linear-gradient(135deg,#ffd740,#c9a000); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(255,215,64,.6); }
.ok-result-group-rank-badge.rank-p { background:linear-gradient(135deg,#00e5ff,#009db5); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 10px rgba(0,229,255,.6); }
.ok-result-group-rank-badge.rank-last { background:linear-gradient(135deg,#fbbf24,#d97706); color:#1a0a00; border:1px solid rgba(255,255,255,.35); box-shadow:0 2px 12px rgba(251,191,36,.7); }
.ok-result-group-rank-badge.rank-default { background:rgba(30,30,50,.85); color:#a5b4fc; border:1px solid rgba(99,102,241,.35); }
.ok-result-group-cnt-badge {
position: absolute; top: 8px; right: 8px; z-index: 7;
padding: 3px 9px; border-radius: 6px;
font-size: 10px; font-weight: 900;
background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
color: #fbbf24; border: 1px solid rgba(251,191,36,.35); letter-spacing: .03em;
}
.ok-result-group-content {
padding: 10px 12px 12px;
display: flex; flex-direction: column; gap: 5px;
position: relative; z-index: 2; background: rgba(0,0,0,.25);
}
.ok-result-group-content::before {
content: ''; display: block; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
margin-bottom: 3px;
}
.ok-result-group-name {
font-size: 12px; font-weight: 800; color: #f1f5f9;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
letter-spacing: -.01em; line-height: 1.3;
}
.ok-result-group-nums-label {
font-size: 9px; font-weight: 700; color: rgba(255,255,255,.3);
text-transform: uppercase; letter-spacing: .1em;
}
.ok-result-group-nums-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.ok-result-num-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
padding: 3px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 900;
font-family: inherit;
background: rgba(0,0,0,.5);
border: 1px solid rgba(255,255,255,.22);
color: rgba(255,255,255,.95);
line-height: 1.4;
font-variant-numeric: tabular-nums;
letter-spacing: .03em;
}
/* ══════════════════════════════════════════
📦 배송지 폼 — 밝고 아케이드하게
══════════════════════════════════════════ */
/* 섹션 헤더 (배송지 선택 타이틀) — 강조 */
.ok-deliv-section-header {
display: flex; align-items: flex-start; gap: 14px;
padding: 16px 18px 14px;
margin-bottom: 14px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(251,191,36,.1) 0%, rgba(245,158,11,.06) 100%);
border: 1.5px solid rgba(251,191,36,.3);
box-shadow: 0 0 18px rgba(251,191,36,.1), inset 0 1px 0 rgba(255,255,255,.06);
}
.ok-deliv-section-icon {
font-size: 26px; margin-top: 1px; flex-shrink: 0;
filter: drop-shadow(0 0 8px rgba(251,191,36,.6));
}
.ok-deliv-section-title {
font-size: 17px; font-weight: 900;
background: linear-gradient(135deg, #fff 0%, #fbbf24 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -.02em; margin-bottom: 5px;
text-shadow: none;
}
.ok-deliv-section-desc {
font-size: 12.5px; font-weight: 700;
color: rgba(226,232,240,.85);
margin-bottom: 4px;
}
.ok-deliv-section-note {
font-size: 10.5px;
color: rgba(148,163,184,.7);
line-height: 1.6; margin-top: 2px;
}
/* 저장된 배송지 패널 */
.ok-deliv-saved-panel {
border-radius: 14px; overflow: hidden;
border: 1.5px solid rgba(52,211,153,.35);
background: rgba(6,78,59,.35);
box-shadow: 0 4px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(52,211,153,.08);
margin-bottom: 12px;
}
.ok-deliv-saved-header {
padding: 10px 14px;
font-size: 11px; font-weight: 900;
color: rgba(167,243,208,.85);
background: linear-gradient(135deg, rgba(6,78,59,.8) 0%, rgba(6,95,70,.6) 100%);
border-bottom: 1px solid rgba(52,211,153,.2);
letter-spacing: .06em; text-transform: uppercase;
}
.ok-deliv-saved-body { padding: 12px 14px; }
.ok-deliv-saved-info {
font-size: 13px; font-weight: 700; color: #e2e8f0;
line-height: 1.6; margin-bottom: 12px;
}
.ok-deliv-saved-btn {
width: 100%; padding: 13px;
border: 1.5px solid rgba(52,211,153,.6);
border-radius: 12px;
background: linear-gradient(135deg, #065f46 0%, #047857 100%);
color: #a7f3d0; font-size: 14px; font-weight: 900;
font-family: inherit; cursor: pointer;
box-shadow: 0 0 16px rgba(52,211,153,.3), 0 3px 10px rgba(0,0,0,.4);
transition: filter .15s, transform .12s;
letter-spacing: .03em;
}
.ok-deliv-saved-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.ok-deliv-saved-btn:active { transform: translateY(0); filter: brightness(.95); }
/* 새 배송지 입력 패널 */
.ok-deliv-panel {
background: rgba(15,18,40,.92);
border: 1.5px solid rgba(167,139,250,.3);
border-radius: 16px;
overflow: hidden;
box-shadow:
0 4px 20px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.07),
0 0 0 1px rgba(139,92,246,.08);
margin-bottom: 12px;
}
.ok-deliv-panel-header {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px;
background: linear-gradient(135deg, rgba(124,58,237,.22) 0%, rgba(99,102,241,.14) 100%);
border-bottom: 1px solid rgba(167,139,250,.22);
}
.ok-deliv-panel-icon {
width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
background: linear-gradient(135deg, #7c3aed, #a78bfa);
display: flex; align-items: center; justify-content: center;
font-size: 15px;
box-shadow: 0 3px 12px rgba(139,92,246,.55);
}
.ok-deliv-panel-title {
font-size: 13px; font-weight: 900; color: #e2e8f0; letter-spacing: .01em;
}
.ok-deliv-panel-desc {
font-size: 10px; color: rgba(196,181,253,.65); font-weight: 600; margin-top: 2px;
}
.ok-deliv-panel-body {
padding: 14px 16px;
display: flex; flex-direction: column; gap: 11px;
}
/* 라벨 */
.ok-deliv-label {
font-size: 10px; font-weight: 800;
color: rgba(196,181,253,.9);
text-transform: uppercase; letter-spacing: .09em; margin-bottom: 5px;
}
.ok-deliv-label span { color: #f87171; }
/* 인풋 — 밝게 + 금색 포커스 */
.ok-deliv-input {
width: 100%; box-sizing: border-box;
background: rgba(255,255,255,.09);
border: 1.5px solid rgba(203,213,225,.25);
border-radius: 10px;
padding: 11px 13px;
color: #f1f5f9;
font-size: 14px; font-weight: 600;
font-family: inherit; outline: none;
transition: border-color .18s, box-shadow .18s, background .18s;
caret-color: #fbbf24;
}
.ok-deliv-input::placeholder { color: rgba(148,163,184,.45); }
.ok-deliv-input:focus {
border-color: rgba(251,191,36,.75);
box-shadow: 0 0 0 3px rgba(251,191,36,.13), 0 0 14px rgba(251,191,36,.2);
background: rgba(255,255,255,.12);
}
.ok-deliv-input:read-only {
background: rgba(255,255,255,.04);
color: rgba(148,163,184,.6); cursor: default;
}
/* 주소 검색 버튼 */
.ok-deliv-search-btn {
flex: 1; padding: 11px 13px;
border: 1.5px solid rgba(167,139,250,.5);
border-radius: 10px;
background: linear-gradient(135deg, rgba(124,58,237,.3) 0%, rgba(99,102,241,.22) 100%);
color: #ddd6fe; font-size: 13px; font-weight: 800;
font-family: inherit; cursor: pointer;
box-shadow: 0 0 12px rgba(139,92,246,.25);
transition: filter .15s, transform .12s;
letter-spacing: .02em; white-space: nowrap;
}
.ok-deliv-search-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.ok-deliv-search-btn:active { transform: translateY(0); filter: brightness(.9); }
/* 배송 요청 버튼 (폼 내부) */
.ok-deliv-submit-btn {
width: 100%; padding: 14px;
border: 1.5px solid rgba(52,211,153,.6);
border-radius: 12px;
background: linear-gradient(135deg, #065f46 0%, #047857 100%);
color: #a7f3d0; font-size: 15px; font-weight: 900;
font-family: inherit; cursor: pointer;
box-shadow: 0 0 18px rgba(52,211,153,.35), 0 4px 14px rgba(0,0,0,.45);
transition: filter .15s, transform .12s;
letter-spacing: .03em; text-transform: uppercase;
}
.ok-deliv-submit-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.ok-deliv-submit-btn:active { transform: translateY(0); filter: brightness(.95); }
/* 경고 바 — 중앙 정렬 */
.ok-deliv-warn {
border-radius: 12px;
padding: 13px 18px;
background: rgba(127,29,29,.4);
border: 1.5px solid rgba(248,113,113,.45);
box-shadow: 0 2px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(248,113,113,.08);
margin-bottom: 12px;
text-align: center;
}
.ok-deliv-warn-title {
font-size: 13.5px; font-weight: 900; color: #fca5a5;
letter-spacing: .01em; margin-bottom: 4px;
}
.ok-deliv-warn-sub {
font-size: 11.5px; color: rgba(252,165,165,.75); font-weight: 600;
}
/* ── PC(640px+) 결과 카드 뱃지 1.5배 ── */
@media (min-width: 640px) {
.ok-result-group-rank-badge {
font-size: 14px;
padding: 5px 11px;
border-radius: 8px;
top: 9px; left: 9px;
}
.ok-result-group-cnt-badge {
font-size: 14px;
padding: 5px 13px;
border-radius: 8px;
top: 9px; right: 9px;
}
.ok-result-num-pill {
font-size: 15px;
padding: 4px 11px;
min-width: 36px;
border-radius: 8px;
border-width: 1.5px;
}
}