/* ============================================================ WITYX PREMIUM — 다크 프리미엄 글래스 + 3D + 모션 레이어 (style.v3.css 다음에 로드. 내용/구조/기능 불변, 비주얼만 고도화) 대부분 다크(html:not([data-theme="light"]))에서만 적용 — 라이트는 깔끔 유지. ============================================================ */ /* ── 다크 팔레트 보강 (인라인 var(--x, 밝은폴백) 들이 다크로 풀리도록) ── */ html:not([data-theme="light"]) { --bg: #060912; --bg2: #0d1322; --bg3: #141c30; --bg4: #1e2940; --card: rgba(22, 30, 50, 0.55); --card2: rgba(15, 23, 42, 0.55); --card-bg: linear-gradient(150deg, rgba(30,41,59,0.60), rgba(13,18,34,0.40)); --surface: rgba(20, 28, 48, 0.6); --border: rgba(255, 255, 255, 0.10); --border-color: rgba(124, 92, 255, 0.28); --text: #F4F7FF; --text2: #A9B6D6; --text3: #6E7C9E; --primary: #6d8cff; --primary-light: #8aa2ff; --primary-glow: rgba(99, 102, 241, 0.45); --accent: #22d3ee; --neon: #34e7ff; --shadow: 0 18px 50px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* ── 프리미엄 애니메이션 배경 (네뷸라/오로라) ── */ html:not([data-theme="light"]) body { background: radial-gradient(1200px 800px at 12% -8%, #16204a 0%, rgba(8,12,24,0) 55%), radial-gradient(1000px 760px at 110% 4%, #2a1148 0%, rgba(8,12,24,0) 50%), radial-gradient(900px 900px at 50% 120%, #0a1c3a 0%, rgba(6,9,18,0) 55%), #05070f; } html:not([data-theme="light"]) #app { background: transparent; } /* 배경 오로라는 #app 뒤(z-index:-1)로 — position/레이아웃은 절대 건드리지 않음(아래 잘림 방지) */ html:not([data-theme="light"]) #app::before { content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none; background: radial-gradient(480px 480px at 16% 12%, rgba(99,102,241,0.42), transparent 60%), radial-gradient(540px 540px at 86% 20%, rgba(34,211,238,0.34), transparent 60%), radial-gradient(560px 560px at 56% 94%, rgba(168,85,247,0.38), transparent 62%), radial-gradient(420px 420px at 92% 82%, rgba(244,114,182,0.24), transparent 60%); filter: blur(6px); animation: wxAurora 16s ease-in-out infinite alternate; } @keyframes wxAurora { 0% { transform: translate3d(0,0,0) scale(1); opacity:.85; } 50% { transform: translate3d(2%, -2%, 0) scale(1.08); opacity:1; } 100% { transform: translate3d(-2%, 2%, 0) scale(1.04); opacity:.9; } } /* 본문은 투명하게(오로라가 비쳐보이게) — position 은 원래대로 유지 */ html:not([data-theme="light"]) .page, html:not([data-theme="light"]) .page.active { background: transparent; } /* ── 글래스 카드/섹션/모달 (3D 입체 그림자 + 내부 하이라이트) ── */ html:not([data-theme="light"]) .card, html:not([data-theme="light"]) .menu-section .menu-item, html:not([data-theme="light"]) .section-card, html:not([data-theme="light"]) .modal, html:not([data-theme="light"]) .modal-content, html:not([data-theme="light"]) .modal-card { background: linear-gradient(150deg, rgba(56,72,116,0.42), rgba(10,15,30,0.22)) !important; -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) brightness(1.08); border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: 0 18px 46px rgba(2,4,12,0.55), 0 2px 0 rgba(255,255,255,0.12) inset, 0 -18px 36px rgba(99,102,241,0.07) inset !important; } /* 카드 상단 미세 하이라이트 라인(유리 굴절감) */ html:not([data-theme="light"]) .card { position: relative; overflow: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; } html:not([data-theme="light"]) .card::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 16%), radial-gradient(130% 60% at 0% 0%, rgba(255,255,255,0.12), transparent 52%); } /* 3D 호버 부양 */ html:not([data-theme="light"]) .card:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(2,4,12,0.6), 0 0 0 1px rgba(124,140,255,0.18), 0 2px 0 rgba(255,255,255,0.06) inset !important; } /* 메뉴 그룹 컨테이너도 한 장의 유리로 */ html:not([data-theme="light"]) .menu-section { border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(150deg, rgba(52,66,108,0.40), rgba(9,14,28,0.22)); -webkit-backdrop-filter: blur(26px) saturate(185%) brightness(1.06); backdrop-filter: blur(26px) saturate(185%) brightness(1.06); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 14px 36px rgba(2,4,12,0.5); } html:not([data-theme="light"]) .menu-section .menu-item { background: transparent !important; backdrop-filter: none; box-shadow: none !important; border: none !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } html:not([data-theme="light"]) .menu-section .menu-item:last-child { border-bottom: none !important; } html:not([data-theme="light"]) .menu-item:active { background: rgba(124,140,255,0.10) !important; } html:not([data-theme="light"]) .menu-item-icon { box-shadow: 0 6px 16px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.12) inset; } /* ── 상단 헤더 글래스 ── */ html:not([data-theme="light"]) .app-header { -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); background: linear-gradient(180deg, rgba(8,12,24,0.85), rgba(8,12,24,0.45)) !important; border-bottom: 1px solid rgba(255,255,255,0.07); } html:not([data-theme="light"]) .icon-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform .2s, background .2s; } html:not([data-theme="light"]) .icon-btn:hover { background: rgba(124,140,255,0.16); transform: translateY(-1px); } /* ── 하단 네비 = 플로팅 글래스 도크 ── */ html:not([data-theme="light"]) .bottom-nav { background: linear-gradient(180deg, rgba(16,22,40,0.72), rgba(8,11,22,0.82)) !important; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border-top: 1px solid rgba(255,255,255,0.08); box-shadow: 0 -10px 40px rgba(0,0,0,0.45); } html:not([data-theme="light"]) .nav-item { transition: transform .2s, color .2s; } html:not([data-theme="light"]) .nav-item.active { color: var(--neon); background: rgba(34,211,238,0.12); box-shadow: 0 0 0 1px rgba(34,211,238,0.25) inset, 0 8px 22px rgba(34,211,238,0.18); } html:not([data-theme="light"]) .nav-item.active i { filter: drop-shadow(0 0 8px rgba(34,231,255,0.7)); transform: translateY(-1px); } /* ── 버튼 프리미엄 (그라데이션 + 글로우 + 3D 프레스) ── */ html:not([data-theme="light"]) .btn-primary { background: linear-gradient(135deg, #6d8cff, #8b5cf6) !important; box-shadow: 0 10px 26px rgba(99,102,241,0.45), 0 1px 0 rgba(255,255,255,0.25) inset; border: none; transition: transform .15s, box-shadow .25s, filter .2s; } html:not([data-theme="light"]) .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 14px 34px rgba(99,102,241,0.55), 0 1px 0 rgba(255,255,255,0.3) inset; } html:not([data-theme="light"]) .btn-primary:active { transform: translateY(2px) scale(.99); box-shadow: 0 4px 14px rgba(99,102,241,0.4) inset; } html:not([data-theme="light"]) .btn-accent { box-shadow: 0 10px 26px rgba(6,182,212,0.4), 0 1px 0 rgba(255,255,255,0.2) inset; } /* 입력칸 글래스 */ html:not([data-theme="light"]) input:not([type=checkbox]):not([type=radio]), html:not([data-theme="light"]) textarea, html:not([data-theme="light"]) select { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.10) !important; color: var(--text) !important; } html:not([data-theme="light"]) input:focus, html:not([data-theme="light"]) textarea:focus { border-color: rgba(124,140,255,0.6) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.18) !important; } /* ── 모션: 페이지 진입 시 카드 순차 등장(fade-up) ── */ @keyframes wxFadeUp { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } html:not([data-theme="light"]) .page.active > .page-scroll > *, html:not([data-theme="light"]) .page.active > .page-scroll > .menu-section, html:not([data-theme="light"]) .page.active > .page-scroll > .card { animation: wxFadeUp .5s cubic-bezier(.2,.8,.2,1) both; } html:not([data-theme="light"]) .page.active > .page-scroll > *:nth-child(1){animation-delay:.02s} html:not([data-theme="light"]) .page.active > .page-scroll > *:nth-child(2){animation-delay:.07s} html:not([data-theme="light"]) .page.active > .page-scroll > *:nth-child(3){animation-delay:.12s} html:not([data-theme="light"]) .page.active > .page-scroll > *:nth-child(4){animation-delay:.17s} html:not([data-theme="light"]) .page.active > .page-scroll > *:nth-child(5){animation-delay:.22s} html:not([data-theme="light"]) .page.active > .page-scroll > *:nth-child(6){animation-delay:.27s} html:not([data-theme="light"]) .page.active > .page-scroll > *:nth-child(n+7){animation-delay:.3s} /* 모달 등장 */ @keyframes wxModalIn { from { opacity:0; transform: translateY(24px) scale(.96); } to { opacity:1; transform:none; } } html:not([data-theme="light"]) .modal:not(.hidden) .modal-content, html:not([data-theme="light"]) .modal:not(.hidden) .modal-card { animation: wxModalIn .35s cubic-bezier(.2,.8,.2,1) both; } /* 잔액/큰 숫자 은은한 글로우 */ html:not([data-theme="light"]) .balance-amount, html:not([data-theme="light"]) .total-balance, html:not([data-theme="light"]) [data-balance-glow] { text-shadow: 0 0 18px rgba(124,140,255,0.35); } /* 프리미엄 골드/주주 카드 등 컬러카드는 살짝 더 빛나게(배경은 건드리지 않음) */ html:not([data-theme="light"]) #dreShareholderCard, html:not([data-theme="light"]) .premium-card { box-shadow: 0 18px 50px rgba(245,158,11,0.22), 0 0 0 1px rgba(245,158,11,0.25) inset !important; } /* 스크롤바 */ html:not([data-theme="light"]) ::-webkit-scrollbar { width: 8px; height: 8px; } html:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(124,140,255,.5), rgba(34,211,238,.4)); border-radius: 8px; } html:not([data-theme="light"]) ::-webkit-scrollbar-track { background: transparent; } /* 부드러운 공통 전환 */ html:not([data-theme="light"]) .menu-item, html:not([data-theme="light"]) .btn, html:not([data-theme="light"]) .nav-item, html:not([data-theme="light"]) .icon-btn { transition: all .22s cubic-bezier(.2,.8,.2,1); } /* ============================================================ 3D 강화 — 전체적으로 입체감 (다층 그림자 + 베벨 가장자리 + 압출 아이콘/버튼 + 누름 깊이) 안전: position/layout 불변. transform 은 hover/active 한정 + 작은 값만. ============================================================ */ /* 카드/섹션/모달: 멀리·가까이 다층 그림자 + 상단 림 하이라이트 + 하단 림 음영(돌출감) */ html:not([data-theme="light"]) .card, html:not([data-theme="light"]) .menu-section, html:not([data-theme="light"]) .section-card, html:not([data-theme="light"]) .asset-split-item, html:not([data-theme="light"]) .modal-content, html:not([data-theme="light"]) .modal-card { box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 -1px 0 rgba(0,0,0,0.40) inset, 0 3px 6px rgba(0,0,0,0.34), 0 10px 20px rgba(0,0,0,0.40), 0 26px 54px rgba(2,4,12,0.58) !important; } /* 잔액 등 핵심 큰 카드: 더 띄워 부유감 */ html:not([data-theme="light"]) .asset-card, html:not([data-theme="light"]) #totalAssetCard, html:not([data-theme="light"]) .asset-total-card, html:not([data-theme="light"]) .balance-card { box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 12px 26px rgba(0,0,0,0.45), 0 34px 64px rgba(2,4,12,0.62) !important; } /* 아이콘 칩: 위는 밝고 아래는 어둡게 = 돌출(압출) 3D */ html:not([data-theme="light"]) .menu-item-icon { box-shadow: 0 2px 0 rgba(255,255,255,0.22) inset, 0 -2px 5px rgba(0,0,0,0.45) inset, 0 7px 15px rgba(0,0,0,0.45) !important; } /* 버튼: 베벨(상단 하이라이트 + 하단 음영) + 또렷한 3D, 누르면 쑥 들어감 */ html:not([data-theme="light"]) .btn, html:not([data-theme="light"]) .btn-primary, html:not([data-theme="light"]) .btn-accent, html:not([data-theme="light"]) .btn-danger { box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 -3px 7px rgba(0,0,0,0.28) inset, 0 8px 18px rgba(0,0,0,0.42) !important; transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s; } html:not([data-theme="light"]) .btn:active, html:not([data-theme="light"]) .btn-primary:active, html:not([data-theme="light"]) .btn-accent:active, html:not([data-theme="light"]) .btn-danger:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 3px 7px rgba(0,0,0,0.55) inset !important; } /* 탭 가능한 요소: 누르면 살짝 들어가는 3D 촉감 */ html:not([data-theme="light"]) .menu-item:active { transform: translateY(1px) scale(0.997); } html:not([data-theme="light"]) .nav-item:active { transform: translateY(2px) scale(0.96); } /* 하단 네비 활성 칩: 솟아오른 3D */ html:not([data-theme="light"]) .nav-item.active { box-shadow: 0 2px 0 rgba(255,255,255,0.16) inset, 0 0 0 1px rgba(34,211,238,0.30) inset, 0 10px 24px rgba(34,211,238,0.28) !important; } /* 토글 스위치 3D(트랙 음각 + 노브 돌출) */ html:not([data-theme="light"]) .menu-item-toggle { box-shadow: 0 2px 5px rgba(0,0,0,0.45) inset; } html:not([data-theme="light"]) .menu-item-toggle::after { box-shadow: 0 2px 5px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.6) inset; } /* 데스크탑 호버: 카드가 더 떠오르고 미세 기울임(3D) */ @media (hover:hover) { html:not([data-theme="light"]) .card:hover { transform: perspective(900px) translateY(-5px) rotateX(1.2deg); } } /* ============================================================ 글래스 라이트(빛 반사 sweep) + 텍스트 부양감 — "유리에 빛이 스치고 글씨가 떠있는" 느낌 ============================================================ */ /* 카드 위로 빛이 천천히 스치는 글린트(반사광 sweep) */ html:not([data-theme="light"]) .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.06) 44%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.06) 56%, transparent 68%); background-size: 220% 100%; background-position: 165% 0; animation: wxGlint 8.5s ease-in-out infinite; } @keyframes wxGlint { 0%, 58% { background-position: 165% 0; } 100% { background-position: -65% 0; } } /* 카드 안 텍스트가 표면 위로 떠 보이게(아래로 드리우는 그림자) */ html:not([data-theme="light"]) .card, html:not([data-theme="light"]) .menu-item-text, html:not([data-theme="light"]) .menu-section-title, html:not([data-theme="light"]) .section-title, html:not([data-theme="light"]) .asset-split-label { text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 2px 7px rgba(0,0,0,0.30); } /* 큰 숫자/잔액/제목은 더 강하게 공중에 떠오르듯 */ html:not([data-theme="light"]) .asset-total-amount, html:not([data-theme="light"]) #totalAsset, html:not([data-theme="light"]) .asset-split-value, html:not([data-theme="light"]) .split-price, html:not([data-theme="light"]) .balance-amount { text-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 7px 18px rgba(0,0,0,0.42), 0 0 24px rgba(124,140,255,0.26) !important; } /* 아이콘도 살짝 떠 보이게(드롭섀도) */ html:not([data-theme="light"]) .menu-item-icon i, html:not([data-theme="light"]) .nav-item i, html:not([data-theme="light"]) .asset-split-label i { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55)); } /* ============================================================ ★ 홈 주요 카드 강력 글래스+빛반사+입체 — 실제 클래스(.asset-main-card/.asset-split-item/.split-left/.split-right)에 적용 ============================================================ */ html:not([data-theme="light"]) .asset-split-item, html:not([data-theme="light"]) .split-left, html:not([data-theme="light"]) .split-right, html:not([data-theme="light"]) .section-card, html:not([data-theme="light"]) .simulator-card, html:not([data-theme="light"]) .referral-card, html:not([data-theme="light"]) .rank-card, html:not([data-theme="light"]) .auto-compound-card, html:not([data-theme="light"]) .product-card, html:not([data-theme="light"]) .profile-card, html:not([data-theme="light"]) .wallet-balance-card, html:not([data-theme="light"]) .price-ticker-card, html:not([data-theme="light"]) .earn-prod-card, html:not([data-theme="light"]) .home-inv-card, html:not([data-theme="light"]) .invest-summary, html:not([data-theme="light"]) .invest-sum-item { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,0.22) !important; box-shadow: 0 2px 0 rgba(255,255,255,0.18) inset, 0 -2px 0 rgba(0,0,0,0.42) inset, 0 12px 24px rgba(0,0,0,0.45), 0 22px 44px rgba(2,4,12,0.55) !important; } /* 큰 배경(총자산)은 글래스 X = 솔리드 베이스. 안쪽 카드/버튼이 그 위에 떠 보이게(입체 층 구분). */ html:not([data-theme="light"]) .asset-main-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 18px 44px rgba(2,4,12,0.55), 0 1px 0 rgba(255,255,255,0.05) inset !important; } /* 어두운 칸(USDT 원금/출금가능)은 투명 프로스트 글래스로 — 뒤 오로라가 비침 */ html:not([data-theme="light"]) .asset-split-item { background: linear-gradient(150deg, rgba(60,76,122,0.42), rgba(10,15,30,0.24)) !important; -webkit-backdrop-filter: blur(26px) saturate(185%) brightness(1.08); backdrop-filter: blur(26px) saturate(185%) brightness(1.08); } /* 빛이 스치는 글린트 + 상단 하이라이트 + 좌상단 코너광 (밝고 또렷하게) */ html:not([data-theme="light"]) .asset-split-item::before, html:not([data-theme="light"]) .split-left::before, html:not([data-theme="light"]) .split-right::before, html:not([data-theme="light"]) .section-card::before, html:not([data-theme="light"]) .simulator-card::before, html:not([data-theme="light"]) .referral-card::before, html:not([data-theme="light"]) .rank-card::before, html:not([data-theme="light"]) .auto-compound-card::before, html:not([data-theme="light"]) .product-card::before, html:not([data-theme="light"]) .profile-card::before, html:not([data-theme="light"]) .wallet-balance-card::before, html:not([data-theme="light"]) .price-ticker-card::before, html:not([data-theme="light"]) .earn-prod-card::before, html:not([data-theme="light"]) .home-inv-card::before, html:not([data-theme="light"]) .invest-summary::before, html:not([data-theme="light"]) .invest-sum-item::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0) 18%), radial-gradient(125% 70% at 0% 0%, rgba(255,255,255,0.18), transparent 52%), linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.40) 50%, transparent 66%); background-size: 100% 100%, 100% 100%, 240% 100%; background-repeat: no-repeat; background-position: 0 0, 0 0, 175% 0; animation: wxGlintHome 6.5s ease-in-out infinite; } @keyframes wxGlintHome { 0%, 50% { background-position: 0 0, 0 0, 175% 0; } 100% { background-position: 0 0, 0 0, -75% 0; } } /* 카드 콘텐츠는 빛/글린트 위로(가독성) */ html:not([data-theme="light"]) .asset-split-item > *, html:not([data-theme="light"]) .split-left > *, html:not([data-theme="light"]) .split-right > *, html:not([data-theme="light"]) .section-card > *, html:not([data-theme="light"]) .simulator-card > *, html:not([data-theme="light"]) .referral-card > *, html:not([data-theme="light"]) .rank-card > *, html:not([data-theme="light"]) .auto-compound-card > *, html:not([data-theme="light"]) .product-card > *, html:not([data-theme="light"]) .profile-card > *, html:not([data-theme="light"]) .wallet-balance-card > *, html:not([data-theme="light"]) .price-ticker-card > *, html:not([data-theme="light"]) .earn-prod-card > *, html:not([data-theme="light"]) .home-inv-card > *, html:not([data-theme="light"]) .invest-summary > *, html:not([data-theme="light"]) .invest-sum-item > * { position: relative; z-index: 1; } /* ── 유리 버튼: 볼록(convex) + 둥근 모서리 + 돔 광택 + 빛반사 (파란/녹색/보라 카드 위 버튼) ── */ html:not([data-theme="light"]) .asset-action-btn, html:not([data-theme="light"]) .btn-primary, html:not([data-theme="light"]) .btn-accent, html:not([data-theme="light"]) .btn-spin, html:not([data-theme="light"]) .dre-premium-cta, html:not([data-theme="light"]) .asset-split-item button, html:not([data-theme="light"]) .split-left button, html:not([data-theme="light"]) .split-right button, html .wx-dome-btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px !important; border: 1px solid rgba(255,255,255,0.62) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, /* 최상단 밝은 라인 */ 0 8px 7px -4px rgba(255,255,255,0.75) inset, /* 상단 볼록 광(강) */ 0 -17px 26px -6px rgba(0,0,0,0.66) inset, /* 하단 깊은 내부 음영(두꺼운 돔) */ 11px 0 22px -11px rgba(0,0,0,0.46) inset, /* 우측 가장자리 음영 */ -11px 0 22px -11px rgba(255,255,255,0.28) inset, /* 좌측 가장자리 광 */ /* ↓ 두꺼운 유리 바닥 모서리(extrusion) — 솟은 두께감 */ 0 2px 0 rgba(0,0,0,0.48), 0 4px 0 rgba(0,0,0,0.38), 0 6px 0 rgba(0,0,0,0.28), 0 8px 0 rgba(0,0,0,0.20), 0 10px 2px rgba(0,0,0,0.32), 0 20px 38px rgba(0,0,0,0.60) !important; /* 외곽 떠오름 그림자 */ transition: transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s !important; } /* 볼록한 유리 광택(돔 하이라이트) — 텍스트 아래(z-index:-1) */ html:not([data-theme="light"]) .asset-action-btn::before, html:not([data-theme="light"]) .btn-primary::before, html:not([data-theme="light"]) .btn-accent::before, html:not([data-theme="light"]) .btn-spin::before, html:not([data-theme="light"]) .dre-premium-cta::before, html:not([data-theme="light"]) .asset-split-item button::before, html:not([data-theme="light"]) .split-left button::before, html:not([data-theme="light"]) .split-right button::before, html .wx-dome-btn::before { content: ""; position: absolute; left: 2.5%; right: 2.5%; top: 1px; height: 62%; pointer-events: none; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.20) 60%, transparent); border-radius: 20px 20px 80% 80% / 18px 18px 36px 36px; } /* 빛 글린트(반사 sweep) — 텍스트 아래 */ html:not([data-theme="light"]) .asset-action-btn::after, html:not([data-theme="light"]) .btn-primary::after, html:not([data-theme="light"]) .btn-accent::after, html:not([data-theme="light"]) .dre-premium-cta::after, html .wx-dome-btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.38) 50%, transparent 64%); background-size: 240% 100%; background-position: 175% 0; animation: wxGlintHome 6.5s ease-in-out infinite; } /* 누르면 들어가는 볼록 반전(촉감) */ html:not([data-theme="light"]) .asset-action-btn:active, html:not([data-theme="light"]) .btn-primary:active, html:not([data-theme="light"]) .btn-accent:active, html:not([data-theme="light"]) .btn-spin:active, html:not([data-theme="light"]) .dre-premium-cta:active, html .wx-dome-btn:active { transform: translateY(6px) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -9px 16px -4px rgba(0,0,0,0.6) inset, 0 2px 0 rgba(0,0,0,0.32), 0 4px 10px rgba(0,0,0,0.42) !important; } /* ============================================================ ★ MORE/WALLET 카드·행 글래스 통일 (메인화면 recipe 재사용) - .wx-glass-card : 카드 표면(거래요약 카드 / 디월렛 메인·주소·코인영역 / 프로필) - .wx-glass-row : 코인 행 / 거래 행(.tx-item, .tx-day-group) 기존 인라인 배경은 유지하고, 빛반사·글린트·볼록테두리·입체그림자만 덧입힘. sheen 은 z-index:-1 + isolation:isolate 로 콘텐츠(흐름 요소) 아래에 둬 가독성 보존. (절대배치 자식이 있는 카드도 안전 — > * 강제 z-index 미사용) ============================================================ */ html .wx-glass-card { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,0.22) !important; box-shadow: 0 2px 0 rgba(255,255,255,0.16) inset, 0 -2px 0 rgba(0,0,0,0.40) inset, 0 12px 24px rgba(0,0,0,0.42), 0 22px 44px rgba(2,4,12,0.50) !important; } html .wx-glass-row, html .tx-item, html .tx-day-group { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 -1px 0 rgba(0,0,0,0.34) inset, 0 6px 14px rgba(0,0,0,0.32), 0 12px 26px rgba(2,4,12,0.40) !important; transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s !important; } html .wx-glass-row:hover, html .tx-item:hover { transform: translateY(-1px); } /* 빛 sheen(상단 하이라이트 + 좌상단 코너광) + 글린트 sweep — 콘텐츠 아래 */ html .wx-glass-card::before, html .wx-glass-row::before, html .tx-item::before, html .tx-day-group::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 20%), radial-gradient(125% 70% at 0% 0%, rgba(255,255,255,0.16), transparent 54%), linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.34) 50%, transparent 64%); background-size: 100% 100%, 100% 100%, 240% 100%; background-repeat: no-repeat; background-position: 0 0, 0 0, 175% 0; animation: wxGlintHome 6.5s ease-in-out infinite; } /* ============================================================ ★ 디월렛 + 하위 모달 — 고광택 돔글래스 (대표님 지시 2026-06-16) 메인카드/주소카드/코인행 + 받기·보내기·스왑·전송이력·코인상세·홍보 모달 패널을 강한 돔(볼록) 상단 광택 + 글린트 sweep + 깊은 입체 그림자로 통일. 기존 배경은 유지하고 광택만 덧입힘. 광택(::before/::after)은 z-index:-1라 콘텐츠 아래(가독성 유지). 모달 패널은 overflow-y:auto 유지(강제 hidden 미사용). ============================================================ */ html #deedraWalletSection .wx-glass-card, html #deedraWalletSection .wx-glass-row, html #qrModalOverlay > div, html #sendModalOverlay > div, html #swapModalOverlay > div, html #tokenDetailsModalOverlay > div, html #historyModalOverlay > div, html #dwalletPromoModal > div { position: relative; isolation: isolate; border: 1px solid rgba(255,255,255,0.32) !important; box-shadow: 0 2px 0 rgba(255,255,255,0.30) inset, /* 상단 밝은 림(rim light) */ 0 11px 16px -8px rgba(255,255,255,0.30) inset, /* 상단 볼록 광 */ 0 -3px 0 rgba(0,0,0,0.46) inset, /* 하단 음영 */ 0 18px 40px rgba(0,0,0,0.50), 0 32px 64px rgba(2,4,12,0.60) !important; /* 깊은 부양 그림자 */ } /* 돔 광택(곡면 상단 하이라이트) — 콘텐츠 아래(z-index:-1) */ html #deedraWalletSection .wx-glass-card::before, html #deedraWalletSection .wx-glass-row::before, html #qrModalOverlay > div::before, html #sendModalOverlay > div::before, html #swapModalOverlay > div::before, html #tokenDetailsModalOverlay > div::before, html #historyModalOverlay > div::before, html #dwalletPromoModal > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; pointer-events: none; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 100%); border-bottom-left-radius: 52% 78%; border-bottom-right-radius: 52% 78%; animation: none; } /* 빛 글린트 sweep — 콘텐츠 아래(z-index:-1) */ html #deedraWalletSection .wx-glass-card::after, html #deedraWalletSection .wx-glass-row::after, html #qrModalOverlay > div::after, html #sendModalOverlay > div::after, html #swapModalOverlay > div::after, html #tokenDetailsModalOverlay > div::after, html #historyModalOverlay > div::after, html #dwalletPromoModal > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; border-radius: inherit; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.34) 50%, transparent 62%); background-size: 240% 100%; background-position: 175% 0; animation: wxGlintHome 6.5s ease-in-out infinite; } /* 하위 모달 버튼 — 볼록 유리 광택(반경/배경은 유지, 인셋 그림자로만 입체) */ html #qrModalOverlay button, html #sendModalOverlay button, html #swapModalOverlay button, html #tokenDetailsModalOverlay button, html #historyModalOverlay button, html #dwalletPromoModal button { position: relative; border: 1px solid rgba(255,255,255,0.34) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 7px 7px -5px rgba(255,255,255,0.55) inset, 0 -11px 16px -7px rgba(0,0,0,0.50) inset, 0 5px 13px rgba(0,0,0,0.40) !important; transition: transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .2s !important; } html #qrModalOverlay button:active, html #sendModalOverlay button:active, html #swapModalOverlay button:active, html #tokenDetailsModalOverlay button:active, html #historyModalOverlay button:active, html #dwalletPromoModal button:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -8px 14px -5px rgba(0,0,0,0.6) inset, 0 2px 6px rgba(0,0,0,0.4) !important; } /* ============================================================ ★ 입금/출금/센터정산 모달 — 돔글래스 전면 적용 (대표님 지시 2026-06-16) 패널(시트) + 내부 카드(.info-box/.warning-box/이력/.wx-glass-card) + 입력칸 + 버튼 전부. 글씨는 광택 위(::before/::after z-index:-1 + isolation). 양 테마 적용. ============================================================ */ /* 모달 패널(시트) — 큰 돔 */ html #depositModal .modal-sheet, html #withdrawModal .modal-sheet, html #centerWithdrawModal .modal-sheet { position: relative; isolation: isolate; border: 1px solid rgba(255,255,255,0.26) !important; box-shadow: 0 2px 0 rgba(255,255,255,0.24) inset, 0 -3px 0 rgba(0,0,0,0.40) inset, 0 -26px 60px rgba(2,4,12,0.50) !important; } html #depositModal .modal-sheet::before, html #withdrawModal .modal-sheet::before, html #centerWithdrawModal .modal-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%; pointer-events: none; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.06) 55%, transparent); border-bottom-left-radius: 50% 58%; border-bottom-right-radius: 50% 58%; } html #depositModal .modal-sheet::after, html #withdrawModal .modal-sheet::after, html #centerWithdrawModal .modal-sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; border-radius: inherit; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%); background-size: 240% 100%; background-position: 175% 0; animation: wxGlintHome 6.5s ease-in-out infinite; } /* 내부 카드류 — info-box / warning / 이력 / 인라인 .wx-glass-card : 돔 글래스 */ html #depositModal .info-box, html #depositModal .warning-box, html #depositModal .modal-tx-history, html #depositModal .wx-glass-card, html #withdrawModal .info-box, html #withdrawModal .warning-box, html #withdrawModal .modal-tx-history, html #withdrawModal .wx-glass-card, html #centerWithdrawModal .info-box, html #centerWithdrawModal .modal-tx-history, html #centerWithdrawModal .wx-glass-card, html #centerWithdrawModal [style*="grid-template-columns"] > div, html #centerWithdrawModal #centerSettlementNotice, html #withdrawModal #withdrawDdraCalc { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,0.20) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 -8px 16px -8px rgba(255,255,255,0.16) inset, 0 -1px 0 rgba(0,0,0,0.30) inset, 0 10px 24px rgba(0,0,0,0.30) !important; } html #depositModal .info-box::before, html #depositModal .warning-box::before, html #depositModal .modal-tx-history::before, html #depositModal .wx-glass-card::before, html #withdrawModal .info-box::before, html #withdrawModal .warning-box::before, html #withdrawModal .modal-tx-history::before, html #withdrawModal .wx-glass-card::before, html #centerWithdrawModal .info-box::before, html #centerWithdrawModal .modal-tx-history::before, html #centerWithdrawModal .wx-glass-card::before, html #centerWithdrawModal [style*="grid-template-columns"] > div::before, html #centerWithdrawModal #centerSettlementNotice::before, html #withdrawModal #withdrawDdraCalc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52%; pointer-events: none; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.05) 60%, transparent); border-bottom-left-radius: 50% 66%; border-bottom-right-radius: 50% 66%; } /* 입력칸 — 오목 글래스(인셋) */ html #depositModal .form-input, html #withdrawModal .form-input, html #centerWithdrawModal .form-input { border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 -7px 14px -7px rgba(0,0,0,0.45) inset !important; } /* 버튼 — 볼록 유리 광택(반경/배경 유지) */ html #depositModal .modal-body button, html #depositModal .modal-footer .btn, html #withdrawModal .modal-body button, html #withdrawModal .modal-footer .btn, html #centerWithdrawModal .modal-body button, html #centerWithdrawModal .modal-footer .btn { position: relative; border: 1px solid rgba(255,255,255,0.32) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.80) inset, 0 7px 7px -5px rgba(255,255,255,0.48) inset, 0 -10px 15px -7px rgba(0,0,0,0.45) inset, 0 5px 12px rgba(0,0,0,0.35) !important; transition: transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .2s !important; } html #depositModal .modal-body button:active, html #depositModal .modal-footer .btn:active, html #withdrawModal .modal-body button:active, html #withdrawModal .modal-footer .btn:active, html #centerWithdrawModal .modal-body button:active, html #centerWithdrawModal .modal-footer .btn:active { transform: translateY(2px) !important; } /* ── 간격 보정: 시세/EARN 분할 패널과 아래(공지사항) 사이 여백 확보 (너무 붙던 문제) ── */ .home-split-panel { margin-bottom: 20px !important; } .ann-news-stack { margin-top: 2px; } /* 환율 칩(1 USDT = ₩…)과 바로 아래 원금/미투자 카드 사이 여백 확보 */ #forexRateInfo { margin-bottom: 14px !important; } /* 모션 민감 사용자 배려 */ @media (prefers-reduced-motion: reduce) { html:not([data-theme="light"]) #app::before { animation: none; } html:not([data-theme="light"]) .card::after { animation: none; } html:not([data-theme="light"]) .asset-main-card::before, html:not([data-theme="light"]) .asset-split-item::before, html:not([data-theme="light"]) .split-left::before, html:not([data-theme="light"]) .split-right::before, html:not([data-theme="light"]) .asset-action-btn::after, html .wx-glass-card::before, html .wx-glass-row::before, html .tx-item::before, html .tx-day-group::before, html #deedraWalletSection .wx-glass-card::after, html #deedraWalletSection .wx-glass-row::after, html #qrModalOverlay > div::after, html #sendModalOverlay > div::after, html #swapModalOverlay > div::after, html #tokenDetailsModalOverlay > div::after, html #historyModalOverlay > div::after, html #dwalletPromoModal > div::after, html #depositModal .modal-sheet::after, html #withdrawModal .modal-sheet::after, html #centerWithdrawModal .modal-sheet::after { animation: none; } html:not([data-theme="light"]) .page.active > .page-scroll > *, html:not([data-theme="light"]) .modal:not(.hidden) .modal-content { animation: none !important; } } /* ============================================================ ★ 라이트모드 보정 (대표님 지시 2026-06-16: 라이트에도 적용) 디월렛/모달/요약·프로필 카드는 배경이 하드코딩 다크라 위 글래스/돔 레시피가 라이트에서도 그대로 옳음(어두운 글래스가 밝은 페이지 위에 떠 보임). 유일하게 라이트에서 '밝은 배경'이 되는 거래내역 행(.tx-item/.tx-day-group)만 라이트용 광택/그림자로 다듬는다(흰 광택은 보이게, 무거운 검은 그림자→부드러운 회색). ============================================================ */ html[data-theme="light"] .tx-item, html[data-theme="light"] .tx-day-group { border: 1px solid rgba(15,23,42,0.08) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 6px 16px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06) !important; } html[data-theme="light"] .tx-item::before, html[data-theme="light"] .tx-day-group::before { background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0) 32%), linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%); background-size: 100% 100%, 240% 100%; background-repeat: no-repeat; background-position: 0 0, 175% 0; }