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;
--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);
}
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;
display: flex; flex-direction: column;
overflow-x: hidden;
}
@media (max-width: 560px) {
body {
padding-bottom: 0 !important;
}
}
img { max-width:100%; height:auto; }
a { text-decoration:none; }
.wrap{ position:relative; z-index:1; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 20px 24px; flex:1; }
.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;
}
.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; }
50% { opacity:.55; }
}
.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;
}
.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);
}
@media (max-width: 768px) {
.lk-hdr-points { display: none !important; }
.lk-hdr-logo-tagline { display: none; }
}
@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; }
.lk-hdr-user-badge { padding: 3px 10px 3px 3px; gap: 5px; }
.lk-hdr-nick { max-width: 56px; font-size: 11.5px; }
.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; }
#lkHdrGuideBtn { display: none; }
.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; } }
@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;
color:#fff;
font-weight:900; font-size:26px;
display:flex; align-items:center; justify-content:center;
pointer-events:none;
isolation:isolate;
}
.sold-out-overlay::before{
content:''; position:absolute; inset:0; z-index:-1;
background:rgba(220,38,38,.72);
animation:fadePulse 2.2s infinite ease-in-out;
}
@keyframes fadePulse{ 0%,100%{ opacity:.53 } 50%{ opacity:1 } }
.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;
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%{filter:brightness(1)} 50%{filter:brightness(1.06)} }
@keyframes khShimmer { 0%{transform:translateX(0)} 100%{transform:translateX(600%)} }
@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;
will-change: transform;
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);
box-shadow: 0 0 23px rgba(251,191,36,.65), 0 0 50px rgba(245,158,11,.28), 0 4px 20px rgba(0,0,0,.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); }
.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; }
.kh-items-grid {
display: grid;
grid-template-columns: 1fr 1fr;
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); }
.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;
}
.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; }
@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;
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;
}
.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;
}
.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);
height: 60vh; max-height: 60vh;
display: flex; flex-direction: column;
box-sizing: border-box;
overflow: hidden;
}
#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);
}
#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); }
#kujiReturnModal .krm-grade-list { display: flex; flex-direction: column; gap: 12px; width: 100%; box-sizing: border-box; }
#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; }
@media (max-width: 699px) {
#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;
}
#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);
}
#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;
}
#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; }
#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; }
}
@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%;
}
.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;
}
.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%; }
.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; }
#historySection, #couponListSection,
#pointPullSection, #profileSection{ padding-left:0 !important; padding-right:0 !important; }
.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-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; }
.auction-left, .auction-right, #aucBidHistoryBox{
margin-left:0 !important; margin-right:0 !important;
width:100% !important; box-sizing:border-box !important;
}
.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{
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; }
.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-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; }
.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; }
#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; }
}
@media (max-width:400px){
.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;
}
.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; }
.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; }
}
.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;
}
.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); }
#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;
}
.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);
}
.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;
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;
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;
}
@media (max-width: 640px) {
#evHistoryModal {
align-items: flex-end;
padding: 0;
}
.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;
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; }
.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; }
.evh-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 8px 12px;
padding-bottom: 20px;
}
.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; }
.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; }
.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);
}
.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));
}
.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; }
.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; }
}
@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; }
.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 { 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; }
}
.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-banner.ok-anim-paused,
.ok-hero-banner.ok-anim-paused * {
animation-play-state: paused !important;
}
#okPrizeList.ok-anim-paused,
#okPrizeList.ok-anim-paused * {
animation-play-state: paused !important;
}
.hidden, .hidden * {
animation-play-state: paused !important;
}
.ok-ptc, .ok-orb { display: none !important; }
.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%);
}
.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);
}
.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); }
}
.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(76,29,149,.45);
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;
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: 145% center, 0% center;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.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: #fcd34d;
background: rgba(245,158,11,.12);
border-color: rgba(245,158,11,.35);
box-shadow: 0 0 12px rgba(245,158,11,.15);
}
.ok-sb-live-dot {
display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: #f5b311;
animation: ok-feed-pulse 1.4s ease-in-out infinite;
}
.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);
}
.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);
}
@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); }
}
@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; }
.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;
}
.ok-txt-fade {
animation: _ok-txt-fade .3s ease both;
}
.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; }
.ok-hkc-img-layer {
position: absolute; inset: 0;
width: 100%; height: 100%;
overflow: hidden;
opacity: 0;
transition: opacity .32s ease;
}
.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-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; }
.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;
}
.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;
}
.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);
}
.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);
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);
}
.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;
}
.ok-kuji-num-indicator {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(0,0,0,.92);
border: 1.5px solid rgba(255,255,255,.38);
border-radius: 20px; padding: 5px 13px;
font-size: 13px; font-weight: 900;
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);
}
.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); }
.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-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;
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);
}
.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); }
.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,.78);
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;
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));
}
.ok-hero-kuji-overlay { display: none; }
.ok-hero-kuji-body { display: none; }
.ok-hero-kuji-dot { display: none; }
.ok-hero-ticker-wrap {
width: 100%;
border-top: 1px solid rgba(255,255,255,.06);
background: linear-gradient(180deg,
rgba(8,4,28,.94) 0%,
rgba(4,2,18,.97) 100%);
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%);
opacity: .8;
}
.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);
}
.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 2px 6px rgba(0,0,0,.4);
flex-shrink: 0;
}
.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; }
.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;
}
.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%);
}
#okHeroFeedList.ok-ticker-track {
position: relative;
width: 100%; height: 100%;
overflow: visible;
}
.ok-hero-feed-item {
position: absolute;
top: 0; transform: translateX(0) translateY(0);
width: auto;
min-width: 140px;
max-width: 220px;
height: 56px;
box-sizing: border-box;
display: flex; align-items: stretch;
background: rgba(255,255,255,.055);
border: 1px solid rgba(251,191,36,.45);
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
cursor: default;
box-shadow: 0 2px 14px rgba(245,158,11,.25), inset 0 0 0 1px rgba(251,191,36,.1);
will-change: transform;
visibility: hidden;
}
.ok-hero-feed-item:hover {
border-color: rgba(251,191,36,.7);
box-shadow: 0 4px 18px rgba(245,158,11,.35), inset 0 0 0 1px rgba(251,191,36,.15);
}
.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;
}
.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,.12);
border: 1px solid rgba(255,255,255,.16);
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); }
}
@media (max-width: 1200px) {
.ok-hero-kuji-slider { display: none; }
.ok-hero-inner { gap: 0; }
}
@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; }
.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-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-notice-marquee-wrap {
display: none;
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);
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;
}
.ok-notice-track-outer {
height: 38px;
overflow: hidden;
}
.ok-notice-track {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
}
.ok-notice-chip {
position: absolute;
top: 0;
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; }
}
.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 {
display: contents;
}
.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;
}
.ok-filter-row { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.ok-history-btn-filter { display: none !important; }
.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-badge { display: none; }
.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; }
@media(max-width:768px){
.ok-hero-trust-item{ font-size:11px; padding:5px 10px; }
.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;
}
.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{ 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; }
.ok-card-img-queue .ok-badge-label { display: none; }
.ok-card-img-queue.ok-yv-badge-text { font-size:10px !important; padding:4.5px 9px !important; gap:3px !important; letter-spacing:.03em !important; }
.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; }
.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;
contain: layout style;
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; }
.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);
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;
}
}
.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;
aspect-ratio: 4/3;
}
.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;
}
.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;
}
.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);
}
.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-card-img-queue.ok-yv-queue-badge {
background: linear-gradient(135deg, #6d28d9, #7c3aed);
color: #fff;
font-weight: 900;
border: 1.5px solid rgba(196,181,253,.6);
box-shadow: 0 2px 14px rgba(109,40,217,.6), 0 1px 4px rgba(0,0,0,.4);
text-shadow: 0 1px 2px rgba(0,0,0,.3);
font-size: 13px; padding: 6px 13px;
animation: yvQueuePulse 2.4s ease-in-out infinite;
}
@keyframes yvQueuePulse {
0%,100%{ filter: brightness(1); }
50% { filter: brightness(1.28); }
}
.ok-card-lastone-badge.ok-yv-recruit-badge {
background: linear-gradient(135deg, rgba(109,40,217,.92) 0%, rgba(124,58,237,.92) 100%);
color: #e9d5ff;
border: 1.5px solid rgba(196,181,253,.7);
box-shadow: 0 0 0 1px rgba(167,139,250,.3), 0 2px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
text-shadow: 0 1px 3px rgba(0,0,0,.4);
animation: yvRecruitPulse 2s ease-in-out infinite;
}
@keyframes yvRecruitPulse {
0%,100%{ filter: brightness(1); }
50% { filter: brightness(1.25); }
}
.ok-card-lastone-badge.ok-yv-recruit-badge.ok-yv-badge-full {
background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
color: #fff;
border: 1.5px solid rgba(254,202,202,.75);
box-shadow: 0 0 0 1px rgba(248,113,113,.4), 0 2px 12px rgba(185,28,28,.7), inset 0 1px 0 rgba(255,255,255,.15);
text-shadow: 0 1px 3px rgba(0,0,0,.45);
animation: yvFullPulse 1.6s ease-in-out infinite;
}
.ok-card-img-queue.ok-yv-queue-badge.ok-yv-badge-full {
background: linear-gradient(135deg, #b91c1c, #ef4444);
color: #fff;
border: 1.5px solid rgba(254,202,202,.7);
box-shadow: 0 2px 14px rgba(220,38,38,.65), 0 1px 4px rgba(0,0,0,.4);
animation: yvFullPulse 1.6s ease-in-out infinite;
}
@keyframes yvFullPulse {
0%,100%{ filter: brightness(1); }
50% { filter: brightness(1.35); }
}
.ok-card-lastone-badge.ok-yv-badge-ready {
background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
color: #fff;
border: 1.5px solid rgba(253,230,138,.75);
box-shadow: 0 0 0 1px rgba(251,191,36,.35), 0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15);
text-shadow: 0 1px 3px rgba(0,0,0,.45);
font-weight: 900;
}
.ok-card-lastone-badge.ok-yv-badge-progress,
.ok-card-img-queue.ok-yv-queue-badge.ok-yv-badge-progress {
background: linear-gradient(135deg, #5b21b6 0%, #8b5cf6 100%);
color: #fff;
border: 1.5px solid rgba(221,214,254,.7);
box-shadow: 0 0 0 1px rgba(167,139,250,.35), 0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
text-shadow: 0 1px 3px rgba(0,0,0,.45);
font-weight: 900;
animation: none;
}
.ok-card-lastone-badge.ok-yv-badge-ended {
background: linear-gradient(135deg, #047857 0%, #10b981 100%);
color: #fff;
border: 1.5px solid rgba(167,243,208,.75);
box-shadow: 0 0 0 1px rgba(52,211,153,.35), 0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15);
text-shadow: 0 1px 3px rgba(0,0,0,.45);
font-weight: 900;
}
.ok-card-img-queue.ok-yv-queue-badge.ok-yv-badge-replay {
background: linear-gradient(135deg, #047857 0%, #10b981 100%);
color: #fff;
border: 1.5px solid rgba(167,243,208,.75);
box-shadow: 0 0 0 1px rgba(52,211,153,.35), 0 2px 12px rgba(4,120,87,.55), 0 1px 4px rgba(0,0,0,.4);
text-shadow: 0 1px 3px rgba(0,0,0,.45);
font-weight: 900;
animation: none;
}
.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);
}
.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;
}
.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;
}
.ok-set-card-gauge-bar { display: none; }
.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);
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;
}
.ok-qs-sidebar { display: none; }
@media (min-width: 1024px) {
#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 {
grid-column: 2;
margin: 0;
}
.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);
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);
}
.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;
}
.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; }
.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;
}
.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; }
.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; }
}
.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);
}
@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 { display: none; }
@keyframes okHeroLineShift {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
.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;
}
@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;
filter: brightness(1.0);
z-index: 1;
}
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);
}
.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; }
.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);
}
.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; }
.ok-queue-prize-live {
display: grid; grid-template-columns: repeat(auto-fill, minmax(105px,1fr)); gap: 10px;
}
.ok-queue-prize-mini {
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);
isolation: isolate;
}
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);
}
.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; }
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;
}
.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;
}
@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; }
.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;
}
#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; }
.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;
}
.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); }
.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; }
.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);
}
.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-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);
}
.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);
}
.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); }
.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; }
#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; }
#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); }
}
#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); }
.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; }
@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; }
}
.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);
}
.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;
}
.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;
}
@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: layout style;
}
@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: layout style;
pointer-events: none;
user-select: none;
}
.ok-board-paper-num {
position: absolute;
top: 4px; left: 4px;
min-width: 20px; height: 19px;
padding: 0 5px;
border-radius: 10px;
background: rgba(0,0,0,0.35);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px;
font-weight: 800; color: #ffffff;
line-height: 1;
letter-spacing: -0.3px;
box-sizing: border-box;
}
@media (max-width: 600px) {
.ok-board-paper-num {
min-width: 26px; height: 23px;
padding: 0 7px;
border-radius: 12px;
font-size: 15px;
top: 5px; left: 5px;
}
}
.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 {
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: 20px;
font-weight: 900; color: #ffffff;
letter-spacing: 0;
text-shadow: none;
}
@media (max-width: 900px) {
.ok-board-paper.ok-board-sold .ok-board-paper-num { font-size: 23px; }
}
@media (max-width: 600px) {
.ok-board-paper.ok-board-sold .ok-board-paper-num { font-size: clamp(22px, 7vw, 28px); }
}
.ok-board-paper.ok-board-sold::before { display: none; }
.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;
}
.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;
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;
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: linear-gradient(135deg, #10b981, #059669); border: none;
color: #fff; font-size: 12.5px; font-weight: 800; padding: 7px 14px;
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 4px 14px rgba(16,185,129,.45), 0 0 0 2px rgba(52,211,153,.22);
letter-spacing: .04em;
}
.ok-back-btn:hover { box-shadow: 0 6px 20px rgba(16,185,129,.6), 0 0 0 3px rgba(52,211,153,.32); }
.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;
}
.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; }
.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; }
.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;
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;
}
.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;
}
.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;
}
@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;
}
#okActionFloatBar {
display: none;
position: fixed;
left: 50%; transform: translateX(-50%);
z-index: 480;
width: 100%; max-width: 760px;
pointer-events: none;
}
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; }
@media (max-width: 750px) {
body:has(#okDetailView:not(.hidden)) #okActionFloatBar:not(.hidden) {
position: fixed;
top: 0;
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 { 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); }
.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;
}
.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;
}
.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;
}
.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;
}
.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;
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 {
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;
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;
}
.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;
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); }
@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),
0 0 40px 8px rgba(245,158,11,.15),
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;
}
.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; }
.ok-paper.selected::after {
content: '선택';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-25deg) scale(1);
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: 7px 18px 6px;
background: rgba(120,53,15,.40);
border: 3.5px solid #fbbf24;
border-radius: 7px;
box-shadow:
inset 0 0 0 2px rgba(253,230,138,.5),
0 0 18px rgba(251,191,36,.65),
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;
}
.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;
}
@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;
}
.ok-paper.selected::before { display: none !important; }
.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 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; }
}
#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;
}
}
@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);
}
.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);
}
.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; }
.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;
}
.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;
}
.ok-multi-result-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@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 {
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 {
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-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);
isolation: isolate;
display: block; padding: 0;
}
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;
}
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); }
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;
}
.ok-prize-item::before { content: none; }
.ok-prize-item::after { content: none; }
#pdImgWrap { cursor: pointer; }
.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);
}
.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-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-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-remain { display: none; }
.ok-prize-remain.sold-out { display: none; }
.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-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% { filter: brightness(1); }
50% { filter: brightness(1.16); }
}
.ok-lastone-item:not(.depleted) {
box-shadow: 0 0 0 1px rgba(251,191,36,.3), 0 0 23px rgba(251,191,36,.48), 0 6px 22px rgba(0,0,0,.78);
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,.96);
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-modal.closing {
display: flex;
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.9);
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;
}
.ok-img-expand-inner {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
max-width: min(96vw, 988px) !important;
animation: okImgExpandIn .22s cubic-bezier(.34,1.56,.64,1) both;
position: relative !important;
}
.ok-img-expand-content {
display: flex; flex-direction: column; align-items: center; gap: 0;
flex: 1; min-width: 0;
}
.ok-img-expand-img-wrap {
width: min(60vw, 600px);
aspect-ratio: 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;
}
.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;
}
.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; }
.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% { filter: brightness(1); }
50% { filter: brightness(1.16); }
}
.ok-lastone-item {
box-shadow: 0 0 0 1px rgba(251,191,36,.22), 0 0 26px rgba(251,191,36,.33), 0 6px 24px rgba(0,0,0,.72);
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;
}
.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-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: 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;
}
@media (min-width: 601px) {
.ok-paper-grid {
padding: 10px 18px 20px 18px;
gap: 12px;
}
}
@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; } }
@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);
transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease, outline .1s ease;
user-select: none;
isolation: isolate;
}
.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);
overflow: visible;
border-radius: 9px;
}
.ok-paper-back-layer {
position: absolute; inset: 0;
border-radius: 8px;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.ok-paper-back-layer img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 8px;
display: block;
pointer-events: none;
}
.ok-paper-front-layer {
position: absolute; inset: 0;
border-radius: 8px;
overflow: hidden;
z-index: 1;
pointer-events: none;
}
.ok-paper-front-layer img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 8px;
display: block;
pointer-events: none;
}
.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); }
@media (max-width: 768px) {
.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; }
.ok-paper {
box-shadow: none !important;
transition: none !important;
isolation: auto !important;
will-change: auto !important;
}
.ok-paper.has-skin { box-shadow: none !important; }
.ok-paper:active:not(.revealed) {
opacity: 0.75 !important;
transform: none !important;
}
.ok-paper.selected {
transform: none !important;
will-change: auto !important;
}
.ok-paper.tap-feedback {
opacity: 0.7 !important;
transform: none !important;
}
.ok-paper-action-bar { animation: none !important; }
}
.ok-paper:hover:not(.revealed):not(.selected) {
will-change: transform;
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;
}
@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;
}
}
.ok-paper.selected { will-change: auto; }
.ok-paper.revealed {
pointer-events: none;
cursor: default;
}
.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; }
.ok-paper-canvas {
width: 100% !important;
height: 100% !important;
display: block;
border-radius: 8px;
pointer-events: none;
}
.ok-paper.selected .ok-paper-canvas {
outline: 2px solid rgba(16,185,129,.6);
outline-offset: 0px;
}
@media (max-width: 768px) {
.ok-paper.selected .ok-paper-canvas { outline: none !important; }
}
.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));
}
.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 {
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;
}
}
.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;
}
.ok-paper-back-inner {
position: absolute;
inset: 6% 7%;
background: #0A0A0A;
border-radius: 4px;
overflow: hidden;
z-index: 1;
}
.ok-paper-back-stripe-top {
display: block !important;
position: absolute; top: 0; left: 0; right: 0;
height: 22%;
background: #1a47cc;
}
.ok-paper-back-stripe-mid {
display: block !important;
position: absolute; top: 22%; left: 0; right: 0;
height: 6%;
background: #FFFFFF;
}
.ok-paper-back-stripe-bot {
display: block !important;
position: absolute; bottom: 0; left: 0; right: 0;
height: 22%;
background: #6ca0ea;
}
.ok-paper-revealed-num {
position: absolute; z-index: 4;
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-revealed-num.ok-top-num {
color: #fbbf24;
}
.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;
}
.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;
}
.ok-tear-modal.hidden { display: none; }
.ok-tear-content-wrap {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 0;
}
.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;
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; }
.ok-tear-back-layer {
position: absolute; inset: 0;
background: transparent;
z-index: 0;
}
.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;
}
#okTearCanvas {
position: absolute; inset: 0; z-index: 2;
width: 100%; height: 100%;
cursor: grab; touch-action: none;
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));
}
.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;
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); }
@property --ok-rays-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.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; inset:0;
--ok-rays-angle: 0deg;
background: repeating-conic-gradient(
from var(--ok-rays-angle, 0deg) at 50% 50%,
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 { --ok-rays-angle: 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;
}
@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;
width: min(500px, 94vw);
height: 230px;
flex-shrink: 0;
margin: 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; }
.tear-hint-label { display: none; }
.tear-hint-card {
position: absolute;
bottom: 0;
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;
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;
}
.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 {
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.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);
}
.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);
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; }
body:has(#okDetailView:not(.hidden)) #okQueueFloatBtn { display: none !important; }
body:has(#okQueueView:not(.hidden)) #okQueueFloatBtn { display: none !important; }
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); }
#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); }
#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;
top: calc(var(--hdr-total) + var(--timer-tab-offset, 0px) + 8px);
left: 16px;
z-index: 395;
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;
}
@media (max-width: 560px) {
#okFloatTimerWidget {
--timer-tab-offset: 0px;
left: 10px;
top: calc(var(--hdr-total) + var(--mpb-h, 0px) + var(--ok-action-bar-h, 56px) + 1px);
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; }
body:has(#okQueueView:not(.hidden)) #okFloatTimerWidget {
top: calc(var(--hdr-total) + var(--mpb-h, 0px) + 4px);
}
}
@media (min-width: 561px) {
#okFloatTimerWidget { --timer-tab-offset: var(--tab-h, 47px); left: 20px; }
}
@media (min-width: 561px) and (max-width: 750px) {
#okFloatTimerWidget {
--timer-tab-offset: 0px;
left: 10px;
top: calc(var(--hdr-total) + var(--mpb-h, 0px) + var(--ok-action-bar-h, 56px) + 1px);
}
body:has(#okQueueView:not(.hidden)) #okFloatTimerWidget {
top: calc(var(--hdr-total) + var(--mpb-h, 0px) + 4px);
}
}
#okFloatTimerWidget.show { display: flex !important; }
#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 {
background: #0f172a;
border-top: 1px solid #1e293b;
margin-top: 0;
flex-shrink: 0;
padding-bottom: 0;
}
@media (max-width: 560px) {
.ms-footer {
margin-top: 0;
padding-bottom: var(--bottom-nav, 56px);
}
}
@media (min-width: 561px) and (max-width: 750px) {
.ms-footer {
padding-bottom: var(--bottom-nav, 56px);
}
}
.ms-footer-inner {
max-width: 1200px; margin: 0 auto;
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; }
.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;
}
@media (max-width: 480px) {
.lk-tabbar { display: none !important; }
}
.notice-modal{
position:fixed;inset:0;display:none;
align-items:center;justify-content:center;
z-index:700;
padding-top: calc(var(--hdr-total, 60px) + 8px);
padding-bottom: calc(var(--bottom-nav, 56px) + 8px);
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: calc(100vh
- var(--hdr-total, 60px)
- 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;
}
@media (min-width: 561px) {
.notice-modal {
padding-bottom: 16px;
}
.notice-card {
max-height: calc(100vh
- var(--hdr-total, 60px)
- 45px
- 32px
);
}
}
@media (min-width: 561px) and (max-width: 750px) {
.notice-modal {
padding-bottom: calc(var(--bottom-nav, 56px) + 8px);
}
.notice-card {
max-height: calc(100vh
- var(--hdr-total, 60px)
- var(--bottom-nav, 56px)
- env(safe-area-inset-bottom, 0px)
- 24px
);
}
}
@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}
.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;
}
@media (min-width: 561px) {
.lk-tabbar {
display: flex !important;
}
#bottomNavBar {
display: none !important;
}
}
@media (min-width: 561px) and (max-width: 750px) {
.lk-tabbar {
display: none !important;
}
#bottomNavBar {
display: flex !important;
}
}
.lk-tabbar::-webkit-scrollbar { display: none !important; }
.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 {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px 20px !important;
}
.wrap > section,
#goodsSection,
#auctionSection,
#eventSection {
padding-top: 18px !important;
}
@media (max-width: 560px) {
#goodsSection,
#auctionSection,
#eventSection {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
#onlineKujiSection {
padding-top: 0 !important;
flex: 1;
min-height: calc(100vh - var(--hdr-total, 120px));
display: flex; flex-direction: column;
}
#bangkujiSection {
flex: 1;
min-height: calc(100vh - var(--hdr-total, 120px));
display: flex; flex-direction: column;
}
.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;
}
.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;
}
.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; }
.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);
}
.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); }
.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;
}
.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; }
.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;
}
.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; }
.yj-room-img-wrap {
position:relative; width:100%; padding-top:100%;
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;
}
.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); }
.yj-live-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px; padding:12px; flex:1; align-content:start; }
.yj-paper-wrap { position:relative; width:100%; aspect-ratio:2/3; cursor:pointer; }
.yj-paper-wrap.opened { cursor:default; pointer-events:none; }
.yj-paper-inner { position:relative; width:100%; height:100%; }
.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;
transition: opacity .32s ease, transform .32s cubic-bezier(.4,0,.2,1);
}
.yj-paper-front { opacity:1; transform:scale(1); z-index:1; }
.yj-paper-back { opacity:0; transform:scale(.88); z-index:0; }
.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);
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); }
.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} }
.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 {
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;
}
@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-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 { padding: 0 0 24px !important; }
.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; }
.product { border-radius: 10px !important; }
.product-name { font-size: 12px !important; }
.price { font-size: 13px !important; }
}
#mobilePointBar {
display: none;
}
@media (min-width: 751px) {
#mobilePointBar { display: none !important; }
}
@media (max-width: 750px) {
#mobilePointBar {
width: 100%;
flex-shrink: 0;
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;
position: sticky;
top: var(--hdr-total);
z-index: 395;
}
#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); }
}
#_saiProbe {
position: fixed; bottom: 0;
height: 0; width: 0; pointer-events: none; visibility: hidden; z-index: -1;
}
:root {
--bnav: var(--bottom-nav, 56px);
--sai: 0px;
--fp: calc(var(--bnav) + var(--sai));
--mpb-h: 0px;
--mobile-safe-bottom: 24px;
--app-nav-inset: 0px;
}
#bottomNavBar {
z-index: 600 !important;
}
#bottomNavBar.evh-behind {
z-index: 1 !important;
}
body.evh-modal-open #bottomNavBar,
body.evh-modal-open #lkTabbar,
body.evh-modal-open #lkSiteHeader,
body.evh-modal-open #mobilePointBar {
display: none !important;
}
@media (max-width: 768px) {
body.ok-tear-open #bottomNavBar {
display: none !important;
}
body.ok-detail-open #bottomNavBar {
display: none !important;
}
body.ok-detail-open {
--fp: 0px !important;
--bnav: 0px !important;
}
body.ok-detail-open #okFloatPayBar {
padding-bottom: 0px !important;
}
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;
transition: bottom 0.15s ease;
}
html.is-app-android #okQueueFloatBtn {
bottom: calc(var(--bnav, 56px) + var(--app-nav-inset, 0px) + 10px) !important;
}
@media (min-width: 601px) {
#okQueueFloatBtn { bottom: 16px !important; }
}
@media (min-width: 601px) and (max-width: 750px) {
#okQueueFloatBtn {
bottom: calc(var(--bnav, 56px) + 10px) !important;
}
html.is-app-android #okQueueFloatBtn {
bottom: calc(var(--bnav, 56px) + var(--app-nav-inset, 0px) + 10px) !important;
}
}
#okPayDoneModal {
padding-bottom: calc(var(--fp) + 8px) !important;
}
@media (min-width: 601px) {
#okPayDoneModal {
padding-bottom: 8px !important;
}
}
#okSelectBar {
position: sticky;
top: 0;
z-index: 52;
display: none !important;
}
@media (max-width: 750px) {
body:has(#okFloatPayBar:not(.hidden)) #okQueueFloatBtn {
bottom: calc(var(--fp, 56px) + 68px) !important;
}
body.ok-float-pay-visible #okQueueFloatBtn {
bottom: calc(var(--fp, 56px) + 68px) !important;
}
}
#okFloatPayBar {
position: fixed;
bottom: 0;
left: 0; right: 0;
z-index: 590;
padding: 0 12px calc(var(--fp, 56px));
pointer-events: none;
transition: bottom 0.2s ease;
}
#okFloatPayBar::after {
content: '';
display: block;
position: absolute;
left: 0; right: 0; bottom: 0;
height: 0;
background: #13111f;
pointer-events: none;
z-index: 0;
}
#okFloatPayBar.hidden { display: none !important; }
@media (min-width: 601px) and (max-width: 750px) {
#okFloatPayBar {
bottom: 0;
padding: 0 20px calc(var(--fp, 56px));
left: 0; right: 0;
transform: none;
max-width: none;
}
}
@media (min-width: 751px) {
#okFloatPayBar { bottom: 0; padding-bottom: 0; max-width: 760px; left: 50%; transform: translateX(-50%); }
}
html.is-app-android #okFloatPayBar {
padding-bottom: calc(var(--fp, 56px) + var(--app-nav-inset, 0px)) !important;
}
@media (min-width: 601px) {
html.is-app-android #okFloatPayBar {
padding-bottom: calc(var(--fp, 56px) + var(--app-nav-inset, 0px)) !important;
}
}
@media (min-width: 561px) {
html.is-touch-device .lk-tabbar {
display: none !important;
}
html.is-touch-device #bottomNavBar {
display: flex !important;
}
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;
}
html.is-touch-device .notice-modal {
padding-bottom: calc(var(--bottom-nav, 56px) + 8px) !important;
}
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;
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; }
}
.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));
}
.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 { flex: 1 !important; min-width: 0; }
@media (min-width: 751px) {
.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); }
@media (max-width: 600px) {
.ok-float-pay-inner {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 14px 16px 12px;
border-radius: 20px 20px 0 0;
}
.ok-float-pay-info {
width: 100%;
flex: unset;
justify-content: flex-start;
align-items: center;
gap: 8px;
}
.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; }
.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;
}
}
@media (min-width: 601px) and (max-width: 750px) {
.ok-float-pay-inner {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 16px 24px 14px;
border-radius: 20px 20px 0 0;
}
.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; }
.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;
}
#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-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;
}
@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; }
.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); }
}
.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));
}
.ok-papers-section {
padding-bottom: 0;
}
@media (min-width: 601px) {
.ok-papers-section {
padding-bottom: 0;
}
}
#scrollTopBtn {
display: flex;
align-items: center;
justify-content: center;
transition: bottom 0.15s ease, opacity 0.25s, transform 0.25s;
}
#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: linear-gradient(135deg, #10b981, #059669);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
font-size: 13px;
font-weight: 700;
font-family: inherit;
box-shadow: 0 4px 18px rgba(16,185,129,.5), 0 0 0 2px rgba(52,211,153,.25);
transition: opacity .2s, transform .15s, bottom .15s ease;
white-space: nowrap;
letter-spacing: -.2px;
}
#globalBackBtn:hover {
box-shadow: 0 8px 24px rgba(16,185,129,.65), 0 0 0 3px rgba(52,211,153,.35);
}
#globalBackBtn:active { transform: scale(.93); }
#globalBackBtn .gbb-arrow { font-size: 16px; line-height: 1; }
#globalBackBtn.gbb-circle {
width: 48px;
height: 48px;
padding: 0;
border-radius: 50%;
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 4px 18px rgba(16,185,129,.5), 0 0 0 2px rgba(52,211,153,.25);
color: #fff;
}
#globalBackBtn.gbb-circle #globalBackLabel { display: none; }
#globalBackBtn.gbb-circle .gbb-arrow { font-size: 22px; font-weight: 800; }
#globalBackBtn.gbb-circle:hover {
transform: translateY(-2px) scale(1.06);
box-shadow: 0 8px 24px rgba(16,185,129,.65), 0 0 0 3px rgba(52,211,153,.35);
}
#globalBackBtn.gbb-circle:active { transform: scale(.9); }
#okJoinFloatBtn {
display: none;
position: fixed;
right: 18px;
z-index: 9391;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0;
background: linear-gradient(135deg, #f59e0b, #f97316);
box-shadow: 0 4px 20px rgba(245, 158, 11, .55), 0 0 0 2px rgba(251,191,36,.3);
transition: transform .2s ease, box-shadow .2s ease, bottom .15s ease, background .25s ease;
animation: okjfPulse 2.2s ease-in-out infinite;
}
#okJoinFloatBtn.show {
display: flex !important;
align-items: center;
justify-content: center;
animation: okjfPulse 2.2s ease-in-out infinite, okjfPop .45s cubic-bezier(.34,1.56,.64,1) 1;
}
#okJoinFloatBtn:hover {
transform: translateY(-4px) scale(1.07);
box-shadow: 0 8px 28px rgba(245, 158, 11, .75), 0 0 0 3px rgba(251,191,36,.4);
animation: none;
}
#okJoinFloatBtn:active { transform: scale(.9); }
#okJoinFloatBtn.is-leave {
background: linear-gradient(135deg, #ef4444, #b91c1c);
box-shadow: 0 4px 16px rgba(220, 38, 38, .45), 0 0 0 2px rgba(248,113,113,.22);
animation: none;
}
#okJoinFloatBtn.is-leave:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 6px 22px rgba(220, 38, 38, .6), 0 0 0 3px rgba(248,113,113,.3);
}
.okjf-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
pointer-events: none;
}
.okjf-icon {
font-size: 20px;
line-height: 1;
filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
}
.okjf-label {
font-size: 9px;
font-weight: 800;
color: #fff;
letter-spacing: -.2px;
white-space: nowrap;
}
@keyframes okjfPulse {
0%, 100% { transform: translateY(0); box-shadow: 0 4px 20px rgba(245,158,11,.55), 0 0 0 2px rgba(251,191,36,.3); }
50% { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(245,158,11,.8), 0 0 0 5px rgba(251,191,36,.18); }
}
@keyframes okjfPop {
0% { transform: scale(0) rotate(-18deg); opacity: 0; }
70% { transform: scale(1.12) rotate(4deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (min-width: 1024px) {
#okJoinFloatBtn { display: none !important; }
}
#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; }
#moreSheetBackdrop { bottom: 0 !important; }
}
@media (min-width: 601px) and (max-width: 750px) {
#moreSheet {
bottom: 0 !important;
padding-bottom: 18px !important;
}
}
#okMultiResultModal > div {
padding-bottom: calc(var(--fp) + 16px) !important;
}
@media (min-width: 601px) {
#okMultiResultModal > div {
padding-bottom: 16px !important;
}
}
#okQueueView {
padding-bottom: calc(var(--fp) + 4px);
}
#okDetailView {
padding-bottom: 0;
}
.ok-queue-hero-card {
scroll-margin-top: calc(var(--hdr-total, 60px) + var(--tab-h, 47px) + 4px);
}
#okQueueActiveBox,
#okQueueWaitingBox,
#okQueueJoinBox {
scroll-margin-bottom: calc(var(--bottom-nav, 56px) + 10px);
}
@media (min-width: 601px) {
#okQueueView {
padding-bottom: 4px;
}
.ok-queue-hero-card {
scroll-margin-top: calc(var(--hdr-total, 60px) + 4px);
}
#okQueueActiveBox,
#okQueueWaitingBox,
#okQueueJoinBox {
scroll-margin-bottom: 10px;
}
#okDetailView {
padding-bottom: 0;
}
}
#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; }
}
.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); }
}
#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; }
}
#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; }
}
.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); }
}
.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;
}
.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-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;
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;
}
#okLiveWinFeed {
display: none !important;
}
.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); }
}
.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); }
}
#okMultiResultBtnBar {
padding-bottom: 0;
}
#okQueueFloatBtn {
padding-bottom: 0 !important;
}
.ok-paper {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.ok-paper.tap-feedback {
transform: scale(0.95) translateY(2px) !important;
transition-duration: .07s !important;
}
@media (max-width: 768px) {
.ok-paper.tap-feedback {
transform: none !important;
opacity: 0.65 !important;
transition-duration: .07s !important;
}
}
@media (orientation: landscape) and (max-height: 500px) {
#okMultiTearModal {
flex-direction: row !important;
}
.ok-mth-wrap {
width: 220px; flex-shrink: 0;
}
#okMultiGrid {
flex: 1;
}
}
@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; }
}
#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; }
.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;
}
button:focus-visible, [role="button"]:focus-visible {
outline: 2px solid #6366f1 !important;
outline-offset: 2px !important;
}
.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;
}
.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; }
}
.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; }
#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;
align-items: flex-end;
justify-content: center;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity .25s ease, visibility 0s .25s;
will-change: opacity;
}
#okGuideModal.ok-guide-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: opacity .25s ease, visibility 0s 0s;
}
.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);
}
.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%;
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;
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);
}
.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;
}
#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;
}
.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;
}
.oksg-body {
flex: 1;
min-height: 0;
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;
}
.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;
background: #f8fafc;
overflow: hidden;
}
.oksg-img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.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);
}
.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 + .pf-stg-section { margin-top: 16px; }
.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); }
.ok-mth-wrap {
width: 100%; max-width: 960px; flex-shrink: 0;
padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 0;
}
.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);
}
.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;
}
.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;
}
.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); }
}
@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;
}
.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;
}
.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;
}
.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); }
.stg-device-list {
background: var(--surface, #fff);
}
.stg-device-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 11px 16px;
border-bottom: 1px solid var(--border, #e2e8f0);
}
.stg-device-item:last-child { border-bottom: none; }
.stg-device-current { background: rgba(80,70,229,.045); }
.stg-device-info { flex: 1; min-width: 0; }
.stg-device-name {
font-size: 13px; font-weight: 700; color: var(--text-1, #0f172a);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stg-device-badge {
display: inline-block; font-size: 9.5px; font-weight: 800;
color: #5046e5; background: rgba(80,70,229,.12);
padding: 1.5px 7px; border-radius: 999px; margin-left: 4px;
vertical-align: 1px;
}
.stg-device-meta {
font-size: 11px; color: #94a3b8; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stg-device-btn {
flex-shrink: 0;
background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25);
color: #ef4444; font-size: 11.5px; font-weight: 700;
padding: 6px 11px; border-radius: 9px; cursor: pointer;
font-family: inherit; -webkit-tap-highlight-color: transparent;
transition: background .15s;
}
.stg-device-btn:active { background: rgba(239,68,68,.16); }
.stg-device-btn-gray {
background: var(--surface-2, #f8fafc); border-color: var(--border, #e2e8f0);
color: #64748b;
}
.stg-device-btn-gray:active { background: rgba(100,116,139,.12); }
.stg-device-empty {
padding: 14px 16px; font-size: 12px; color: #94a3b8; text-align: center;
}
.stg-device-revoke-all {
display: block; width: calc(100% - 32px); margin: 12px 16px 4px;
background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.28);
color: #ef4444; font-size: 13px; font-weight: 800;
padding: 11px 0; border-radius: 12px; cursor: pointer;
font-family: inherit; -webkit-tap-highlight-color: transparent;
transition: background .15s;
}
.stg-device-revoke-all:active { background: rgba(239,68,68,.16); }
.stg-device-hint {
font-size: 10.5px; color: #94a3b8; text-align: center;
padding: 0 16px 12px;
}
.stg-admin-go-btn {
display: block; width: calc(100% - 32px); margin: 12px 16px;
background: linear-gradient(135deg, rgba(80,70,229,.1), rgba(124,58,237,.1));
border: 1px solid rgba(80,70,229,.3);
color: var(--brand, #5046e5); font-size: 13.5px; font-weight: 800;
padding: 12px 0; border-radius: 12px; cursor: pointer;
font-family: inherit; -webkit-tap-highlight-color: transparent;
transition: background .15s;
}
.stg-admin-go-btn:active { background: rgba(80,70,229,.15); }
.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;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
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);
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-addr-search-btn {
flex:1; padding:10px 12px; border-radius:10px; border:none;
background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff;
font-size:13px; font-weight:800; cursor:pointer; font-family:inherit;
white-space:nowrap; box-shadow:0 2px 8px rgba(79,70,229,.3);
}
.pim-addr-search-btn:active { transform:scale(.97); }
#pimPostcode { background:rgba(255,255,255,.04); color:#9ca3af; }
.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; }
@media (max-width: 560px) {
#bangkujiSection {
padding-top: 0 !important;
padding-bottom: calc(var(--bottom-nav, 56px) + 20px) !important;
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;
}
}
.bkj-hero {
background: linear-gradient(145deg,
#0f172a 0%, #1e1b4b 35%, #2d1b69 65%, #1a1040 100%
);
position: relative; overflow: hidden;
padding: 28px 24px 28px;
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;
}
.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; }
@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; }
body.bkj-panel-open #lkTabbar,
body.bkj-panel-open #bottomNavBar {
visibility: hidden !important;
pointer-events: none !important;
}
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;
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;
padding-bottom: calc(90px + var(--mobile-safe-bottom, 24px));
}
.bkj-float-back {
display: none;
position: fixed;
bottom: calc(var(--bottom-nav, 56px) + 16px);
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; }
@media (min-width: 769px) {
.bkj-float-back {
display: none;
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; }
}
@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;
}
.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);
}
.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; }
.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;
}
.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);
}
.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);
}
.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); }
.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);
}
.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; }
.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; }
.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; }
.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; }
.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 {
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;
}
@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;
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); }
.ok-order-total-val.free { color: #16a34a; }
#yjPayModal .ok-order-sheet {
border-radius: 28px;
}
#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;
padding-bottom:16px;
}
@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 {
display: none;
position: fixed;
right: 18px;
z-index: 9390;
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 .15s 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; }
.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; }
@keyframes ptFlash {
0% { background: rgba(167,139,250,0.35); }
100% { background: transparent; }
}
.pt-flash { animation: ptFlash 0.7s ease-out; border-radius: 6px; }
#okMultiTearModal {
will-change: transform;
isolation: isolate;
}
#okMultiTearModal::before {
content: '';
position: absolute;
inset: 0;
background: rgb(5, 7, 20);
z-index: -1;
pointer-events: none;
}
#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;
height: 100%;
width: 100%;
max-width: 100vw;
}
@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-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-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;
}
.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%); }
.ok-result-tab::after { display: none; }
#okResultTab0:not(.active) {
border-color: rgba(251,191,36,.3);
background: rgba(251,191,36,.06);
color: rgba(254,243,199,.7);
}
#okResultTab1:not(.active) {
border-color: rgba(34,211,238,.3);
background: rgba(34,211,238,.06);
color: rgba(207,250,254,.7);
}
#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);
}
#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);
}
.ok-result-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
display: flex;
flex-direction: column;
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;
margin-left: auto;
margin-right: auto;
align-self: center;
padding: 14px 14px 20px;
box-sizing: border-box;
}
.ok-result-tab-panel.active { display: block; }
.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); }
.ok-result-cta-bar {
position: relative;
flex-shrink: 0;
width: 100%;
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); }
.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);
}
.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-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;
}
@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;
}
}
#okYvSpeedBtn {
top: calc(var(--hdr-total, 60px) + var(--tab-h, 47px) + 12px);
right: 18px;
}
@media (max-width: 750px) {
#okYvSpeedBtn {
top: calc(var(--hdr-total, 60px) + 44px + 10px);
right: 12px;
}
}
#okYvSpeedBtn:active {
transform: translateY(3px);
}
#okYvMuteBtn {
top: calc(var(--hdr-total, 60px) + var(--tab-h, 47px) + 12px + 56px + 10px);
right: 24px;
}
@media (max-width: 750px) {
#okYvMuteBtn {
top: calc(var(--hdr-total, 60px) + 44px + 10px + 56px + 10px);
right: 18px;
}
}
#okYvMuteBtn:active { transform: translateY(3px); }
.ok-tear-result-overlay.ok-top-gold {
background: linear-gradient(160deg, #1a1002 0%, #4a3005 45%, #3a2504 80%, #1a1002 100%);
}
.ok-tear-result-overlay.ok-top-gold .ok-result-rays::before {
background: repeating-conic-gradient(
from var(--ok-rays-angle, 0deg) at 50% 50%,
rgba(220,160,30,.14) 0deg 5deg,
rgba(120,75,10,.07) 5deg 10deg
);
}
.ok-tear-result-overlay.ok-top-gold .ok-result-rays::after {
background:
radial-gradient(ellipse 70% 40% at 50% 0%, rgba(251,191,36,.32) 0%, transparent 65%),
radial-gradient(ellipse 50% 30% at 50% 100%, rgba(255,215,90,.18) 0%, transparent 60%);
}
.ok-tear-result-overlay.ok-top-gold .ok-result-prize-card {
background: linear-gradient(145deg, #3a2606 0%, #241503 60%, #3a2606 100%);
border: 2.5px solid rgba(251,191,36,.9);
box-shadow:
0 0 0 1px rgba(255,235,170,.2),
0 0 0 6px rgba(251,191,36,.16),
0 0 50px rgba(251,191,36,.55),
0 0 100px rgba(245,158,11,.22),
0 28px 80px rgba(0,0,0,.85);
}
.ok-tear-result-overlay.ok-top-gold .ok-result-prize-card::before {
background: conic-gradient(from 0deg, transparent 0deg, rgba(251,191,36,.1) 30deg, transparent 60deg, transparent 180deg, rgba(255,215,90,.08) 210deg, transparent 240deg);
}
.ok-tear-result-overlay.ok-top-gold .ok-result-prize-rank {
color: #fbbf24;
background: rgba(251,191,36,.2);
border: 1px solid rgba(251,191,36,.5);
}
.ok-tear-result-overlay.ok-top-gold .ok-result-prize-img-wrap {
background: linear-gradient(145deg, rgba(255,235,170,.14), rgba(255,235,170,.04));
border: 2.5px solid rgba(255,235,170,.4);
box-shadow:
0 0 0 5px rgba(251,191,36,.28),
0 0 30px rgba(251,191,36,.35),
0 16px 50px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.25);
}
.ok-tear-result-overlay.ok-top-gold .ok-result-prize-name {
color: #fff7e0;
text-shadow:
0 0 24px rgba(251,191,36,.65),
0 2px 12px rgba(0,0,0,.6);
}
@keyframes okPrizeCardPulseGold {
0%,100% { box-shadow: 0 0 0 1px rgba(255,235,170,.15), 0 0 40px rgba(251,191,36,.5), 0 0 80px rgba(245,158,11,.15), 0 20px 60px rgba(0,0,0,.8); }
50% { box-shadow: 0 0 0 4px rgba(251,191,36,.5), 0 0 80px rgba(251,191,36,.95), 0 0 140px rgba(245,158,11,.4), 0 20px 60px rgba(0,0,0,.8); }
}
.ok-tear-result-overlay.ok-top-gold .ok-result-prize-card.pulsing {
animation: okPrizeCardPulseGold 0.6s ease-in-out 3;
}
#scrollTopBtn:hover {
transform: translateY(-2px) scale(1.06);
box-shadow: 0 8px 24px rgba(239,68,68,.65), 0 0 0 3px rgba(248,113,113,.35);
}
#scrollTopBtn:active { transform: scale(.9); }
#okQdHandle {
display: none;
position: fixed;
right: 0;
top: 44%;
transform: translateY(-50%);
z-index: 9380;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 13px 8px 13px 10px;
border: 1px solid rgba(212,175,55,.45);
border-right: none;
border-radius: 14px 0 0 14px;
cursor: pointer;
background: linear-gradient(165deg, #14162e 0%, #1e2142 55%, #14162e 100%);
box-shadow: -4px 0 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(212,175,55,.18);
color: #e8d9a8;
font-family: inherit;
transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .25s;
-webkit-tap-highlight-color: transparent;
}
#okQdHandle.show { display: flex; }
#okQdHandle:active { transform: translateY(-50%) scale(.95); }
#okQdHandle.drawer-open {
transform: translateY(-50%) translateX(110%);
opacity: 0;
pointer-events: none;
}
.okqd-handle-text {
font-size: 12px;
font-weight: 900;
line-height: 1.45;
letter-spacing: .06em;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.okqd-handle-count {
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 900;
background: linear-gradient(135deg, #d4af37, #b8860b);
color: #1a1305;
box-shadow: 0 1px 5px rgba(212,175,55,.4);
}
.okqd-handle-count:empty { display: none; }
#okQdBackdrop {
display: none;
position: fixed;
inset: 0;
z-index: 9394;
background: rgba(4,6,14,.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
#okQdBackdrop.show { display: block; animation: okqdFade .22s ease; }
@keyframes okqdFade { from { opacity: 0; } to { opacity: 1; } }
#okQueueDrawer {
position: fixed;
right: 0;
top: 50%;
transform: translate(105%, -50%);
visibility: hidden;
z-index: 9395;
width: min(78vw, 300px);
max-height: calc(100vh - var(--hdr-total, 60px) - var(--tab-h, 47px) - var(--bottom-nav, 56px) - 28px);
display: flex;
flex-direction: column;
border: 1.5px solid rgba(212,175,55,.4);
border-right: none;
border-radius: 20px 0 0 20px;
overflow: hidden;
background: linear-gradient(160deg, #0a0d1c 0%, #10142a 55%, #0d1124 100%);
box-shadow:
-10px 0 40px rgba(0,0,0,.7),
0 0 0 1px rgba(212,175,55,.08),
inset 0 1px 0 rgba(212,175,55,.12);
transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s;
}
#okQueueDrawer.open {
transform: translate(0, -50%);
visibility: visible;
transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s;
}
.okqd-header {
display: flex;
align-items: center;
gap: 7px;
padding: 13px 14px 11px;
flex-shrink: 0;
border-bottom: 1px solid rgba(212,175,55,.22);
background: linear-gradient(90deg, rgba(212,175,55,.1), rgba(212,175,55,.03));
}
.okqd-header-icon { font-size: 15px; }
.okqd-header-title {
flex: 1;
font-size: 13.5px;
font-weight: 900;
color: #e8d9a8;
letter-spacing: .05em;
}
.okqd-header-badge {
font-size: 11px;
font-weight: 900;
padding: 3px 9px;
border-radius: 20px;
background: rgba(212,175,55,.15);
color: #d4af37;
border: 1px solid rgba(212,175,55,.3);
}
.okqd-close {
border: none;
background: rgba(255,255,255,.06);
color: #94a3b8;
width: 26px;
height: 26px;
border-radius: 50%;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.okqd-close:active { background: rgba(255,255,255,.14); }
.okqd-body {
flex: 1;
min-height: 120px;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 10px 12px;
scrollbar-width: thin;
scrollbar-color: rgba(212,175,55,.3) transparent;
}
.okqd-body::-webkit-scrollbar { width: 3px; }
.okqd-body::-webkit-scrollbar-thumb { background: rgba(212,175,55,.35); border-radius: 3px; }
#okPdHandle {
display: none;
position: fixed;
left: 0;
top: 44%;
transform: translateY(-50%);
z-index: 9380;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 13px 10px 13px 8px;
border: 1px solid rgba(212,175,55,.45);
border-left: none;
border-radius: 0 14px 14px 0;
cursor: pointer;
background: linear-gradient(165deg, #14162e 0%, #1e2142 55%, #14162e 100%);
box-shadow: 4px 0 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(212,175,55,.18);
color: #e8d9a8;
font-family: inherit;
transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .25s;
-webkit-tap-highlight-color: transparent;
}
#okPdHandle.show { display: flex; }
#okPdHandle:active { transform: translateY(-50%) scale(.95); }
#okPdHandle.drawer-open {
transform: translateY(-50%) translateX(-110%);
opacity: 0;
pointer-events: none;
}
#okPdBackdrop {
display: none;
position: fixed;
inset: 0;
z-index: 9394;
background: rgba(4,6,14,.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
#okPdBackdrop.show { display: block; animation: okqdFade .22s ease; }
#okPrizeDrawer {
position: fixed;
left: 0;
top: 50%;
transform: translate(-105%, -50%);
visibility: hidden;
z-index: 9395;
width: min(78vw, 300px);
max-height: calc(100vh - var(--hdr-total, 60px) - var(--tab-h, 47px) - var(--bottom-nav, 56px) - 28px);
display: flex;
flex-direction: column;
border: 1.5px solid rgba(212,175,55,.4);
border-left: none;
border-radius: 0 20px 20px 0;
overflow: hidden;
background: linear-gradient(160deg, #0a0d1c 0%, #10142a 55%, #0d1124 100%);
box-shadow:
10px 0 40px rgba(0,0,0,.7),
0 0 0 1px rgba(212,175,55,.08),
inset 0 1px 0 rgba(212,175,55,.12);
transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s;
}
#okPrizeDrawer.open {
transform: translate(0, -50%);
visibility: visible;
transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s;
}
#okPdPrizeList .ok-qs-prize-item { padding: 7px 4px; }
body.ok-drawer-open #scrollTopBtn,
body.ok-drawer-open #globalBackBtn,
body.ok-drawer-open #okJoinFloatBtn,
body.ok-drawer-open #okPreChargeFloatBtn,
body.ok-drawer-open #okQueueFloatBtn {
z-index: 9350 !important;
pointer-events: none !important;
}
@media (min-width: 1024px) {
#okQdHandle, #okQueueDrawer, #okQdBackdrop { display: none !important; }
#okPdHandle, #okPrizeDrawer, #okPdBackdrop { display: none !important; }
}
#okPayDelayBanner {
display: none;
position: fixed;
inset: 0;
z-index: 100050;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
padding: 20px;
}
#okPayDelayBanner .ok-pdb-sheet {
background: #1f2430;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
padding: 22px 20px;
max-width: 360px;
width: 100%;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
#okPayDelayBanner .ok-pdb-title {
font-size: 17px;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
}
#okPayDelayBanner .ok-pdb-desc {
font-size: 13.5px;
line-height: 1.6;
color: #c7cdd8;
margin-bottom: 16px;
}
#okPayDelayBanner .ok-pdb-desc b { color: #fbbf24; }
#okPayDelayBanner .ok-pdb-btns {
display: flex;
gap: 8px;
justify-content: center;
}
#okPayDelayBanner .ok-pdb-refresh {
flex: 1;
padding: 11px 0;
border: none;
border-radius: 9px;
background: #4f8cff;
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
#okPayDelayBanner .ok-pdb-wait {
flex: 1;
padding: 11px 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 9px;
background: transparent;
color: #aab2c0;
font-size: 14px;
cursor: pointer;
}