/* ============================================================================ 가챠 뽑기 전용 스타일 — 리퀴드 글래스 (light glass / prismatic edge) ---------------------------------------------------------------------------- 이 파일의 규칙은 전부 .gacha-mode 아래로만 적용된다. (번호 쟁탈전 화면은 styles.css 의 아케이드/네온 톤을 그대로 유지) 가챠 진입 시 js/gacha/app.js 가 에 .gacha-mode 를 붙이고 나갈 때 뗀다. 핵심 재료 3가지 1) 표면 : 반투명 흰 유리 + backdrop-filter blur/saturate 2) 가장자리: conic-gradient 를 mask 로 잘라낸 1.4px 프리즘 테두리 3) 그림자 : 접지 그림자 + 색을 머금은 확산 그림자(분산 느낌) ========================================================================== */ .gacha-mode { /* ---- 배경 / 잉크 ---- */ --q-bg: #EDEFF4; --q-bg-soft: #F7F8FB; --q-ink: #14161C; --q-ink-2: #565D70; --q-ink-3: #8B92A6; /* ---- 유리 ---- */ --q-glass: rgba(255, 255, 255, 0.58); --q-glass-strong: rgba(255, 255, 255, 0.80); --q-glass-thin: rgba(255, 255, 255, 0.34); --q-blur: 24px; /* ---- 포인트 (IT 톤: 블루/바이올렛 중심, 오렌지는 액션) ---- */ --q-accent: #2E6BFF; --q-accent-2: #7A5AF8; --q-hot: #FF7A3D; --q-hot-2: #FF3D6E; --q-ok: #12BE86; /* ---- 프리즘 ---- */ --q-prism: conic-gradient(from 200deg, #FF6B6B, #FFB86B, #FFF07A, #7DF0C8, #6BC5FF, #A98CFF, #FF8FD1, #FF6B6B); /* ---- 반경 ---- */ --q-r-lg: 26px; --q-r-md: 20px; --q-r-pill: 999px; /* ---- 그림자 ---- */ --q-shadow: 0 0 0 1px rgba(20, 24, 40, 0.045), 0 1px 2px rgba(20, 24, 40, 0.07), 0 10px 24px -10px rgba(20, 24, 40, 0.22), 0 28px 56px -28px rgba(20, 24, 40, 0.28); --q-shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.06), 0 6px 16px -8px rgba(20, 24, 40, 0.24); /* 유리 내부 굴절(두께감) */ --q-inner: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.55), inset 0 14px 26px -18px rgba(255, 255, 255, 0.9), inset 0 -14px 26px -20px rgba(90, 100, 130, 0.28); /* ---- 움직임 (튀지 않게, 정밀하게) ---- */ --q-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --q-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --q-dur: 0.34s; /* ---- 여백 ---- */ --q-pad-x: 20px; --q-gap: 14px; --q-safe-b: env(safe-area-inset-bottom, 0px); --q-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'JetBrains Mono', Menlo, monospace; font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Noto Sans KR', sans-serif; background: var(--q-bg); color: var(--q-ink); } /* 기본(네온) 배경은 가챠에서 쓰지 않는다 */ .gacha-mode::before, .gacha-mode::after { display: none; } /* 배경 레이어는 0, 앱 콘텐츠는 1. 음수 z-index 를 쓰면 body 자기 배경 뒤로 깔려 보이지 않는다. */ .gacha-mode .app { position: relative; z-index: 1; } /* ---------------------------------------------------------------- 배경 */ .g-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(58% 44% at 14% 6%, rgba(110, 150, 255, 0.30), transparent 62%), radial-gradient(46% 38% at 88% 16%, rgba(255, 150, 120, 0.24), transparent 64%), radial-gradient(64% 52% at 52% 104%, rgba(150, 130, 255, 0.26), transparent 66%), linear-gradient(180deg, var(--q-bg-soft), var(--q-bg)); } /* 아주 옅은 격자 — IT 느낌의 바탕 */ .g-bg::after { content: ''; position: absolute; inset: 0; opacity: 0.5; background-image: linear-gradient(rgba(20, 24, 40, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 24, 40, 0.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(72% 60% at 50% 40%, #000, transparent 78%); -webkit-mask-image: radial-gradient(72% 60% at 50% 40%, #000, transparent 78%); } .g-bg-wave { position: absolute; left: -12%; width: 124%; display: block; opacity: 0.5; } .g-bg-wave.w1 { top: 2%; animation: g-wave 21s ease-in-out infinite; } .g-bg-wave.w2 { top: 22%; animation: g-wave 27s ease-in-out infinite reverse; opacity: 0.36; } .g-bg-wave.w3 { bottom: 0; animation: g-wave 33s ease-in-out infinite; opacity: 0.34; } @keyframes g-wave { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-3%) translateY(10px); } } /* 떠다니는 유리 구슬 */ .g-bead { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.95) 0 12%, rgba(255,255,255,0.5) 26%, transparent 52%), radial-gradient(circle at 70% 78%, rgba(255,255,255,0.6), transparent 46%), color-mix(in srgb, var(--bead, var(--q-accent)) 34%, transparent); box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 10px 24px -12px rgba(20, 24, 40, 0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: g-float var(--dur, 4s) ease-in-out infinite; animation-delay: var(--delay, 0s); will-change: transform; } @supports not (color: color-mix(in srgb, red, blue)) { .g-bead { background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.9), rgba(255,255,255,0.25)); } } @keyframes g-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* ---------------------------------------------------------------- 프리즘 테두리 conic-gradient 를 테두리 두께(1.4px)만큼만 남기고 마스크로 잘라낸다. .g-card / .g-dome / .g-body-panel / .g-clay-round / .g-hero-mark 에서 같은 방식을 쓴다. 마스크 합성을 못 쓰는 브라우저에서는 흰 외곽선으로 대체한다. */ @supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) { .g-card::before, .g-dome::before, .g-body-panel::before, .g-clay-round::before, .g-hero-mark::before { display: none; } .g-card, .g-dome, .g-body-panel, .g-clay-round, .g-hero-mark { outline: 1px solid rgba(255, 255, 255, 0.75); outline-offset: -1px; } } /* ---------------------------------------------------------------- 레이아웃 */ .gacha-mode .screen { padding-left: var(--q-pad-x); padding-right: var(--q-pad-x); gap: var(--q-gap); } .gacha-mode .screen.has-dock { padding-bottom: calc(104px + var(--q-safe-b)); } .gacha-mode .topbar { background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(20, 24, 40, 0.06); box-shadow: 0 1px 0 rgba(255,255,255,0.9); } .gacha-mode .topbar .brand { color: var(--q-ink); font-weight: 800; letter-spacing: -0.02em; } .gacha-mode .chip { background: rgba(255,255,255,0.7); border: 1px solid rgba(20,24,40,0.07); color: var(--q-ink-2); border-radius: var(--q-r-pill); font-family: var(--q-mono); font-size: 11px; letter-spacing: 0.02em; } .gacha-mode .chip.live { color: var(--q-accent); border-color: rgba(46,107,255,0.28); background: rgba(46,107,255,0.08); } .gacha-mode .topbar .btn-ghost { border: 1px solid rgba(20,24,40,0.08); color: var(--q-ink-2); background: rgba(255,255,255,0.72); border-radius: var(--q-r-pill); box-shadow: 0 1px 2px rgba(20,24,40,0.06); font-weight: 600; } .gacha-mode .topbar .btn-ghost:hover { background: #fff; color: var(--q-ink); } /* ---------------------------------------------------------------- 카드 */ .g-card { position: relative; min-width: 0; border-radius: var(--q-r-lg); padding: 22px 20px; background: linear-gradient(180deg, var(--q-glass-strong), var(--q-glass)); -webkit-backdrop-filter: blur(var(--q-blur)) saturate(175%); backdrop-filter: blur(var(--q-blur)) saturate(175%); box-shadow: var(--q-inner), var(--q-shadow); color: var(--q-ink); animation: g-rise var(--q-dur) var(--q-ease-out) both; animation-delay: var(--stagger, 0ms); } .g-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: var(--q-prism); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.6; pointer-events: none; } .g-card.soft { background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.42)); } @keyframes g-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .g-title { margin: 0 0 6px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; font-size: clamp(28px, 8vw, 38px); color: var(--q-ink); } .g-label { margin: 0 0 16px; font-family: var(--q-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--q-ink-3); } .g-body { margin: 0; font-size: 15px; line-height: 1.62; color: var(--q-ink-2); } .g-note { margin: 16px 0 0; font-size: 14px; line-height: 1.62; color: var(--q-ink-2); text-align: center; } .g-note b, .g-body b { color: var(--q-ink); font-weight: 700; } .g-num { font-family: var(--q-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--q-accent); } .g-center { text-align: center; } .g-hero { text-align: center; padding-top: 26px; } .g-hero-mark { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 24px; display: flex; align-items: center; justify-content: center; color: var(--q-accent); background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6)); box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -10px 18px -12px rgba(90,100,130,0.35), 0 8px 20px -10px rgba(46, 107, 255, 0.5), 0 2px 4px rgba(20,24,40,0.06); position: relative; } .g-hero-mark::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: var(--q-prism); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.6; } .g-hero-mark svg { width: 34px; height: 34px; } /* ---------------------------------------------------------------- 유리 버튼 */ .g-clay { appearance: none; border: none; cursor: pointer; position: relative; font-family: inherit; font-weight: 700; letter-spacing: -0.01em; border-radius: var(--q-r-pill); color: #fff; background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 46%), linear-gradient(135deg, var(--q-accent), var(--q-accent-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -8px 16px -10px rgba(0,0,0,0.35), 0 1px 2px rgba(20,24,40,0.1), 0 12px 26px -12px rgba(46, 107, 255, 0.7); transition: transform 0.16s var(--q-ease), box-shadow 0.2s var(--q-ease), filter 0.2s ease; overflow: hidden; } .g-clay::after { /* 상단 스펙큘러 */ content: ''; position: absolute; left: 8%; right: 8%; top: 2px; height: 42%; border-radius: var(--q-r-pill); background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); pointer-events: none; } .g-clay:hover:not(:disabled) { filter: brightness(1.04); } .g-clay:active:not(:disabled) { transform: scale(0.975); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -4px 10px -8px rgba(0,0,0,0.4), 0 4px 12px -8px rgba(46,107,255,0.6); } .g-clay:disabled { opacity: 0.42; cursor: not-allowed; } .g-clay-lg { width: 100%; min-height: 58px; font-size: 17px; padding: 17px 22px; } /* 주 액션 — 참고 이미지의 오렌지 유리 */ .g-clay-hot { background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 46%), linear-gradient(135deg, var(--q-hot), var(--q-hot-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -8px 16px -10px rgba(0,0,0,0.32), 0 1px 2px rgba(20,24,40,0.1), 0 12px 26px -12px rgba(255, 90, 70, 0.75); } .g-clay-mint { background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 46%), linear-gradient(135deg, var(--q-ok), #0FA8A8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -8px 16px -10px rgba(0,0,0,0.3), 0 12px 26px -12px rgba(18, 190, 134, 0.7); } .g-clay-violet { background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 46%), linear-gradient(135deg, var(--q-accent-2), var(--q-accent)); } /* 보조(투명 유리) 버튼 */ .g-clay-round { width: 56px; height: 56px; flex: none; padding: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: var(--q-ink); background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.55)); box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -10px 18px -14px rgba(90,100,130,0.4), 0 1px 2px rgba(20,24,40,0.07), 0 8px 18px -10px rgba(20,24,40,0.3); } .g-clay-round::after { display: none; } .g-clay-round::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: var(--q-prism); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.55; pointer-events: none; } .g-clay-round svg { width: 22px; height: 22px; } /* 하단 고정 액션 */ .g-dock { position: fixed; z-index: 30; bottom: calc(18px + var(--q-safe-b)); left: 50%; transform: translateX(-50%); width: min(calc(100% - 40px), 680px); } .g-dock::before { content: ''; position: absolute; inset: -30px -20px -44px; background: linear-gradient(180deg, transparent, rgba(237, 239, 244, 0.9) 58%); pointer-events: none; z-index: -1; } /* ---------------------------------------------------------------- 스테퍼 */ .g-stepper { display: flex; align-items: center; justify-content: center; gap: 20px; } .g-stepper-val { min-width: 104px; text-align: center; font-family: var(--q-mono); font-weight: 700; font-size: 50px; line-height: 1; letter-spacing: -0.04em; color: var(--q-ink); font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- 스위치 */ .g-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; min-width: 0; } .g-switch-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .g-switch-text b { font-weight: 700; font-size: 16px; color: var(--q-ink); letter-spacing: -0.01em; } .g-switch-text small { font-size: 13px; color: var(--q-ink-3); } .g-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 58px; height: 33px; margin: 0; border: none; border-radius: var(--q-r-pill); cursor: pointer; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(238,240,246,0.9)); box-shadow: inset 0 2px 5px rgba(90,100,130,0.22), inset 0 -1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(20,24,40,0.05); transition: background 0.28s var(--q-ease); } .g-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(180deg, #fff, #F2F4F8); box-shadow: 0 2px 5px rgba(20,24,40,0.3), inset 0 1px 0 #fff; transition: transform 0.32s var(--q-ease-out); } .g-switch:checked { background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0)), linear-gradient(135deg, var(--q-ok), #0FA8A8); box-shadow: inset 0 2px 5px rgba(0,80,60,0.28), 0 6px 16px -8px rgba(18,190,134,0.7); } .g-switch:checked::after { transform: translateX(25px); } /* ---------------------------------------------------------------- 입력 */ .gacha-mode .g-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .gacha-mode .g-field label { font-family: var(--q-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--q-ink-3); } .gacha-mode input.g-input { width: 100%; min-width: 0; max-width: 100%; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--q-ink); padding: 15px 18px; border-radius: var(--q-r-md); border: none; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7)); box-shadow: inset 0 2px 5px rgba(90,100,130,0.16), inset 0 -1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(20,24,40,0.05); -webkit-appearance: none; appearance: none; transition: box-shadow 0.2s var(--q-ease); } .gacha-mode input.g-input::placeholder { color: var(--q-ink-3); font-weight: 500; } .gacha-mode input.g-input:focus { outline: none; box-shadow: inset 0 2px 5px rgba(90,100,130,0.12), 0 0 0 3px rgba(46, 107, 255, 0.22), 0 6px 16px -10px rgba(46,107,255,0.6); } /* ---------------------------------------------------------------- 가챠 기계 */ .gacha-machine { position: relative; padding: 0 2px; width: 100%; max-width: 440px; margin-inline: auto; /* 넓은 화면에서 통이 과하게 커지지 않게 */ animation: g-rise var(--q-dur) var(--q-ease-out) both; } /* 유리 본체 — 돔 · 조작부 · 배출구를 감싸는 한 덩어리 */ .g-shell { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 32px; background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.44)); -webkit-backdrop-filter: blur(var(--q-blur)) saturate(175%); backdrop-filter: blur(var(--q-blur)) saturate(175%); box-shadow: var(--q-inner), var(--q-shadow); } .g-shell::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 4; padding: 1.6px; background: var(--q-prism); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.6; pointer-events: none; } /* 캡슐이 보이는 창 — 유리 아래로 살짝 파인 느낌 */ .g-dome { /* 폭이 바뀌어도 늘 정사각형. 고정 높이를 주면 화면 폭마다 비율이 달라진다. */ position: relative; aspect-ratio: 1 / 1; /* 정사각형에서는 세로 반경 50% 가 정확히 반원. 56% 로 조금 더 부풀려 구체 느낌을 준다. */ border-radius: 50% 50% 20px 20px / 56% 56% 20px 20px; background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(226,232,244,0.55) 60%, rgba(244,247,252,0.6)); box-shadow: inset 0 3px 8px rgba(90, 100, 130, 0.22), inset 0 -1px 0 rgba(255,255,255,0.9), inset 0 -26px 40px -30px rgba(90,100,130,0.5); overflow: hidden; } .g-dome::after { /* 상단 스펙큘러 */ content: ''; position: absolute; left: 16%; right: 42%; top: 9%; height: 20%; z-index: 4; border-radius: 50%; background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,255,255,0)); filter: blur(3px); pointer-events: none; } .g-pile { position: absolute; inset: 0; z-index: 2; } .g-dome-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--q-ink-3); font-size: 14px; font-weight: 600; font-family: var(--q-mono); letter-spacing: 0.06em; } /* 통 안의 캡슐 */ .g-capsule { position: absolute; width: 19.5%; aspect-ratio: 1/1; border-radius: 50%; transform: rotate(var(--rot, 0deg)); background: radial-gradient(circle at 32% 24%, rgba(255,255,255,1) 0 10%, rgba(255,255,255,0.55) 24%, transparent 50%), linear-gradient(180deg, rgba(255,255,255,0.92) 0 50%, var(--c) 50% 100%); box-shadow: inset 0 -8px 14px -6px rgba(0,0,0,0.28), inset 0 2px 3px rgba(255,255,255,0.95), 0 6px 12px -4px rgba(20,24,40,0.34); animation: g-capsule-in 0.3s var(--q-ease-out) both; animation-delay: var(--delay, 0ms); } .g-capsule::after { content: ''; position: absolute; left: 5%; right: 5%; top: 47%; height: 5%; border-radius: 3px; background: rgba(255,255,255,0.8); } @keyframes g-capsule-in { from { opacity: 0; transform: translateY(-14px) scale(0.8) rotate(var(--rot, 0deg)); } to { opacity: 1; } } /* 조작부 — 본체 안에 살짝 파인 트랙 */ .g-body-panel { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--q-r-md); background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.75)); box-shadow: inset 0 2px 6px rgba(90, 100, 130, 0.16), inset 0 -1px 0 rgba(255,255,255,0.95); } .g-knob { width: 66px; height: 66px; flex: none; padding: 0; position: relative; border: none; border-radius: 50%; cursor: pointer; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 48%), linear-gradient(135deg, var(--q-hot), var(--q-hot-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -10px 18px -12px rgba(0,0,0,0.4), 0 2px 4px rgba(20,24,40,0.1), 0 12px 24px -10px rgba(255, 90, 70, 0.7); transition: transform 0.16s var(--q-ease), filter 0.2s ease; } .g-knob svg { width: 26px; height: 26px; } .g-knob:hover:not(:disabled) { filter: brightness(1.05); } .g-knob:active:not(:disabled) { transform: scale(0.955); } .g-knob:disabled { opacity: 0.38; cursor: not-allowed; } .g-knob.is-turning { animation: g-knob-turn 1.05s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes g-knob-turn { to { transform: rotate(540deg); } } .g-counter { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; } .g-counter b { font-family: var(--q-mono); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.04em; color: var(--q-ink); font-variant-numeric: tabular-nums; } .g-counter span { font-family: var(--q-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--q-ink-3); font-weight: 600; } .g-slot { width: 38px; height: 54px; flex: none; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5)); box-shadow: inset 0 2px 5px rgba(90,100,130,0.24), inset 0 -1px 0 rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; } .g-slot i { width: 4px; height: 24px; border-radius: 3px; background: rgba(90,100,130,0.4); } /* 배출구 — 확실히 파인 슬롯. 배경에 묻히지 않도록 안쪽을 어둡게 */ .g-tray { position: relative; display: flex; justify-content: center; } .g-tray-mouth { position: relative; width: 58%; height: 62px; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, rgba(38, 46, 68, 0.62), rgba(58, 68, 94, 0.42) 42%, rgba(96, 108, 138, 0.3)); box-shadow: inset 0 14px 22px -8px rgba(10, 14, 28, 0.75), inset 0 -2px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(20, 24, 40, 0.14); } .g-tray-mouth::after { /* 유리 앞면 반사 */ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.32)); pointer-events: none; z-index: 3; } .g-drop { position: absolute; left: 50%; bottom: 120%; width: 44px; height: 44px; margin-left: -22px; opacity: 0; animation: none; } .gacha-machine.is-dispensing .g-dome { animation: g-shake 0.34s ease 3; } @keyframes g-shake { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-0.5deg); } 75% { transform: translateX(4px) rotate(0.5deg); } } .gacha-machine.is-dispensing .g-drop { animation: g-drop 1.15s cubic-bezier(0.45, 0, 0.65, 1) both; } @keyframes g-drop { 0% { opacity: 0; bottom: 260%; transform: rotate(0deg); } 20% { opacity: 1; } 62% { bottom: 6%; transform: rotate(210deg); } 74% { bottom: 34%; transform: rotate(250deg); } 86% { bottom: 6%; transform: rotate(280deg); } 93% { bottom: 16%; transform: rotate(292deg); } 100% { opacity: 1; bottom: 8%; transform: rotate(300deg); } } /* ---------------------------------------------------------------- 결과 */ .g-result { text-align: center; overflow: hidden; animation: g-reveal 0.44s var(--q-ease-out) both; } @keyframes g-reveal { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } } .g-result-seq { margin: 0; font-family: var(--q-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--q-ink-3); } /* 캡슐 열림 — 컨테이너 높이에 회전으로 커지는 바운딩 박스(약 17px)까지 여유를 준다 */ .capsule-open { --cap: 168px; --gap-top: 64px; position: relative; width: var(--cap); height: calc(var(--cap) + 120px); margin: 6px auto 0; } .capsule-open .co-half { position: absolute; left: 0; right: 0; height: calc(var(--cap) / 2); } .capsule-open .co-top { top: var(--gap-top); border-radius: var(--q-r-pill) var(--q-r-pill) 0 0; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.62)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 2px 0 #fff, inset 0 -10px 18px -14px rgba(90,100,130,0.5), 0 6px 16px -10px rgba(20,24,40,0.4); animation: g-half-up 0.58s var(--q-ease-out) both; } .capsule-open .co-bottom { top: calc(var(--gap-top) + var(--cap) / 2); border-radius: 0 0 var(--q-r-pill) var(--q-r-pill); background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 40%), var(--c); box-shadow: inset 0 2px 0 rgba(255,255,255,0.7), inset 0 -12px 20px -12px rgba(0,0,0,0.35), 0 10px 22px -12px rgba(20,24,40,0.5); animation: g-half-down 0.58s var(--q-ease-out) both; } @keyframes g-half-up { from { transform: none; } to { transform: translateY(-44px) rotate(-12deg); } } @keyframes g-half-down { from { transform: none; } to { transform: translateY(30px) rotate(6deg); } } .capsule-open .co-number { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; font-family: var(--q-mono); font-weight: 700; font-size: 78px; letter-spacing: -0.05em; line-height: 1; color: var(--q-ink); font-variant-numeric: tabular-nums; animation: g-num-in 0.44s var(--q-ease-out) 0.24s both; } @keyframes g-num-in { from { opacity: 0; transform: scale(0.72); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } .g-result-who { margin: 8px 0 0; font-weight: 800; font-size: clamp(21px, 6vw, 26px); letter-spacing: -0.02em; color: var(--q-ink); overflow-wrap: anywhere; } /* 마지막 캡슐 — 프리즘 링을 진하게 + 파티클 카드에 backdrop-filter 가 걸려 스태킹 컨텍스트가 생기므로, z-index:-1 의사요소를 쓰면 카드 배경 "위"로 올라와 전체를 덮는다. 그래서 회전하는 프리즘은 바깥 래퍼에 두고 카드가 가운데를 가린다. */ .g-final-ring { position: relative; padding: 2px; overflow: hidden; border-radius: calc(var(--q-r-lg) + 2px); box-shadow: 0 18px 40px -18px rgba(120, 90, 255, 0.55), 0 2px 6px rgba(20,24,40,0.1); } .g-final-ring-spin { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: var(--q-prism); animation: g-spin 4.5s linear infinite; } @keyframes g-spin { to { transform: rotate(360deg); } } .g-final-ring .g-result { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9)); } .g-final-ring .g-result::before { opacity: 0; } .g-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; } .g-spark { position: absolute; left: 50%; top: 44%; width: 8px; height: 8px; border-radius: 2px; background: var(--sc, var(--q-accent)); color: var(--sc, var(--q-accent)); box-shadow: 0 0 12px 2px currentColor; animation: g-spark-fly 1.4s var(--q-ease-out) both; animation-delay: var(--delay, 0s); } @keyframes g-spark-fly { from { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(180deg) scale(0.3); } } /* ---------------------------------------------------------------- 기록 / 목록 */ .g-history-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 0 14px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--q-ink); letter-spacing: -0.01em; } .g-history-toggle svg { width: 18px; height: 18px; color: var(--q-ink-3); flex: none; } .g-chips { display: flex; flex-wrap: wrap; gap: 8px; } .g-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: var(--q-r-pill); background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.62)); box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px -10px rgba(90,100,130,0.4), 0 2px 6px -3px rgba(20,24,40,0.18); font-family: var(--q-mono); font-weight: 700; font-size: 15px; color: var(--q-ink); font-variant-numeric: tabular-nums; } .g-chip small { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 600; font-size: 12px; color: var(--q-ink-3); } .g-result-list { display: flex; flex-direction: column; gap: 10px; } .g-result-row { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 13px 16px; border-radius: var(--q-r-md); background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6)); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(20,24,40,0.05), 0 8px 20px -12px rgba(20,24,40,0.3); animation: g-rise 0.36s var(--q-ease-out) both; animation-delay: var(--stagger, 0ms); } .g-result-row .g-num-badge { width: 48px; height: 48px; flex: none; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-family: var(--q-mono); font-weight: 700; font-size: 19px; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 48%), linear-gradient(135deg, var(--q-accent), var(--q-accent-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 14px -8px rgba(46,107,255,0.8); } .g-result-row .g-row-body { flex: 1; min-width: 0; } .g-result-row .g-row-name { font-weight: 700; font-size: 16px; color: var(--q-ink); overflow-wrap: anywhere; letter-spacing: -0.01em; } .g-result-row .g-row-meta { font-family: var(--q-mono); font-size: 12px; color: var(--q-ink-3); } /* ---------------------------------------------------------------- 진행자 드로어 / 모달 */ .gacha-mode .drawer { background: rgba(20, 24, 40, 0.28); } .gacha-mode .drawer-panel { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,247,251,0.9)); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border-left: 1px solid rgba(255,255,255,0.9); box-shadow: -20px 0 50px -22px rgba(20,24,40,0.4); color: var(--q-ink); } .gacha-mode .drawer h3 { color: var(--q-ink); font-weight: 800; letter-spacing: -0.02em; } .gacha-mode .drawer .kv { color: var(--q-ink-2); border-bottom-color: rgba(20,24,40,0.08); } .gacha-mode .drawer .kv b { color: var(--q-ink); font-family: var(--q-mono); } .gacha-mode .drawer .group-title { color: var(--q-ink-3); font-family: var(--q-mono); font-size: 10px; letter-spacing: 0.08em; } .gacha-mode .drawer .small.muted, .gacha-mode .drawer .muted { color: var(--q-ink-3); } .gacha-mode .roster li { background: rgba(255,255,255,0.9); border: 1px solid rgba(20,24,40,0.07); border-radius: var(--q-r-pill); font-family: var(--q-mono); font-weight: 600; color: var(--q-ink-2); } .gacha-mode .drawer .btn-ghost { color: var(--q-ink-2); border: 1px solid rgba(20,24,40,0.1); background: rgba(255,255,255,0.8); } .gacha-mode .drawer .btn-cyan { background: linear-gradient(135deg, var(--q-accent), var(--q-accent-2)); box-shadow: 0 8px 18px -10px rgba(46,107,255,0.8); } .gacha-mode .drawer .btn-danger { background: linear-gradient(135deg, var(--q-hot), var(--q-hot-2)); box-shadow: 0 8px 18px -10px rgba(255,90,70,0.8); } .gacha-mode .overlay { background: rgba(20, 24, 40, 0.3); } .gacha-mode .modal { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,248,252,0.94)); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255,255,255,0.95); border-radius: var(--q-r-lg); color: var(--q-ink); } .gacha-mode .modal h3 { color: var(--q-ink); font-weight: 800; letter-spacing: -0.02em; } .gacha-mode .modal p { color: var(--q-ink-2); } .gacha-mode .toast { background: rgba(20, 24, 40, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: var(--q-r-pill); } @media (max-width: 360px) { .capsule-open { --cap: 140px; } .capsule-open .co-number { font-size: 64px; } .g-knob { width: 58px; height: 58px; } .g-clay-round { width: 50px; height: 50px; } .g-stepper-val { font-size: 44px; min-width: 84px; } } @media (prefers-reduced-motion: reduce) { .g-bead, .g-bg-wave, .g-final-ring-spin { animation: none !important; } } /* ---------------------------------------------------------------- 결과 요약 / 정렬 */ .g-stats { display: flex; justify-content: center; gap: 10px; margin-top: 18px; } .g-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: var(--q-r-md); background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.6)); box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px -10px rgba(90,100,130,0.4), 0 2px 6px -3px rgba(20,24,40,0.18); } .g-stat b { font-family: var(--q-mono); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -0.03em; color: var(--q-ink); font-variant-numeric: tabular-nums; } .g-stat small { font-size: 11px; color: var(--q-ink-3); font-weight: 600; } .g-segment { display: flex; gap: 4px; padding: 4px; border-radius: var(--q-r-pill); background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.45)); box-shadow: inset 0 2px 5px rgba(90,100,130,0.16), inset 0 -1px 0 rgba(255,255,255,0.9); } .g-seg { flex: 1; min-width: 0; padding: 10px 8px; border: none; cursor: pointer; border-radius: var(--q-r-pill); background: transparent; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--q-ink-3); transition: color 0.2s var(--q-ease), background 0.2s var(--q-ease), box-shadow 0.2s var(--q-ease); } .g-seg.on { color: var(--q-ink); font-weight: 700; background: linear-gradient(180deg, #fff, rgba(255,255,255,0.85)); box-shadow: 0 1px 2px rgba(20,24,40,0.08), 0 4px 10px -6px rgba(20,24,40,0.3), inset 0 1px 0 #fff; } .g-seg:active { transform: scale(0.985); } /* 주인 없이 남은 숫자 */ .g-chip-ghost { background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35)); color: var(--q-ink-3); box-shadow: inset 0 0 0 1px rgba(20,24,40,0.08); }