/* ========================================================================= * GALAXY BET — brand theme * 일 때만 적용 (js/brand.js 가 설정) * 시안 galaxy-bet-main.html 의 디자인을 SPA 셸에 이식한 것. * 반드시 다른 CSS 뒤에 로드할 것 (index.html 의 마지막 ). * ========================================================================= */ /* ── 1. 토큰 ─────────────────────────────────────────────────────────── */ [data-brand="galuxy"] { --gx-bg-0: #03060f; --gx-panel: rgba(12, 20, 52, 0.72); --gx-panel-2: rgba(16, 26, 66, 0.55); --gx-line: rgba(120, 150, 255, 0.22); --gx-line-soft: rgba(120, 150, 255, 0.13); --gx-txt: #e9edff; --gx-txt-2: #a8b4dd; --gx-txt-3: #7a86ad; --gx-gold: #f3c65b; --gx-purple: #7c5cff; --gx-radius: 16px; --gx-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); /* 기존 SPA 토큰도 같은 팔레트로 맞춘다 (모달/폼 등 공용 컴포넌트용) */ --max-w: 1520px; --bg: #03060f; --bg-1: #070c24; --bg-2: #0a1130; --bg-3: #101a42; --bg-input: #0c1436; --fg: #e9edff; --fg-muted: #a8b4dd; --fg-dim: #7a86ad; --border: rgba(120, 150, 255, 0.13); --border-strong: rgba(120, 150, 255, 0.32); --brand-pink: #a855f7; --brand-purple: #7c5cff; --brand-gradient: linear-gradient(90deg, #7c5cff, #3d8bff); --focus-ring: 0 0 0 2px rgba(124, 92, 255, 0.5); } /* ── 2. 우주 배경 ────────────────────────────────────────────────────── */ [data-brand="galuxy"] body { background: var(--gx-bg-0); color: var(--gx-txt); overflow-x: hidden; } [data-brand="galuxy"] body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(900px 620px at 12% 6%, rgba(78, 42, 160, 0.42), transparent 62%), radial-gradient(1000px 700px at 86% 10%, rgba(30, 64, 175, 0.35), transparent 64%), radial-gradient(760px 620px at 50% 96%, rgba(88, 32, 140, 0.30), transparent 68%), linear-gradient(180deg, #050a1e 0%, #070d24 45%, #04081a 100%); } /* 별 레이어. * background-position 을 애니메이션하면 매 프레임 전체 화면을 다시 그린다(=스크롤 끊김). * 레이어를 화면보다 크게 잡고 transform 으로만 움직여 컴포지터에서 처리한다. */ [data-brand="galuxy"] body::after { content: ''; position: fixed; left: -1400px; top: -900px; right: -1400px; bottom: -900px; z-index: -1; pointer-events: none; opacity: 0.7; will-change: transform; background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 28% 62%, #cfe0ff, transparent), radial-gradient(1.8px 1.8px at 44% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 58% 78%, #ffe9b8, transparent), radial-gradient(1.5px 1.5px at 72% 32%, #fff, transparent), radial-gradient(1.1px 1.1px at 86% 68%, #b9d0ff, transparent), radial-gradient(1.4px 1.4px at 94% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 6% 84%, #fff, transparent), radial-gradient(1.3px 1.3px at 36% 92%, #d8c3ff, transparent), radial-gradient(1.1px 1.1px at 66% 52%, #fff, transparent); background-size: 1400px 900px; animation: gx-drift 140s linear infinite; } @keyframes gx-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(1400px, 900px, 0); } } [data-brand="galuxy"] .gx-wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 20px; } [data-brand="galuxy"] .gx-section { padding: 26px 0; } [data-brand="galuxy"] .gx-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } [data-brand="galuxy"] .gx-sec-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } [data-brand="galuxy"] #view { padding: 0 0 10px; } [data-brand="galuxy"] .gx-section img { max-width: 100%; height: auto; display: block; } /* ── 3. 상단바 ───────────────────────────────────────────────────────── */ /* 헤더는 콘텐츠 폭(--max-w)과 무관하게 모니터 전체 폭을 쓴다. */ [data-brand="galuxy"] .topbar { background: transparent; border-bottom: 0; backdrop-filter: none; padding: 0; } [data-brand="galuxy"] .topbar-row { width: 100%; max-width: none; margin: 0; gap: 22px; min-height: 68px; padding: 0 28px; border-radius: 0; border: 0; border-bottom: 1px solid var(--gx-line); /* backdrop-filter 는 sticky 헤더에서 스크롤할 때마다 뒤 배경을 다시 블러 처리해 체감 반응속도를 크게 떨어뜨린다. 불투명 배경으로 대체. */ background: linear-gradient(180deg, rgba(11, 18, 48, 0.98), rgba(8, 13, 38, 0.97)); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* 로고 */ [data-brand="galuxy"] .gx-logo { display: flex; align-items: center; gap: 11px; flex: none; } [data-brand="galuxy"] .gx-logo-mark { width: 40px; height: 40px; filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6)); } [data-brand="galuxy"] .gx-logo-txt { display: flex; flex-direction: column; line-height: 1; } [data-brand="galuxy"] .gx-logo-txt b { font-family: Orbitron, 'Segoe UI', sans-serif; font-size: 20px; letter-spacing: 0.16em; background: linear-gradient(180deg, #fff, #b9c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-brand="galuxy"] .gx-logo-txt span { font-family: Orbitron, 'Segoe UI', sans-serif; font-size: 10px; letter-spacing: 0.52em; color: var(--gx-txt-3); margin-top: 3px; } /* 네비 */ [data-brand="galuxy"] .topnav { gap: 6px; margin: 0 auto; justify-content: center; flex-wrap: nowrap; min-width: 0; } [data-brand="galuxy"] .topnav a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: #d5ddf7; white-space: nowrap; /* '카/지/노' 로 세로 분해되는 것 방지 */ flex: none; transition: 0.2s; } [data-brand="galuxy"] .topnav a:hover, [data-brand="galuxy"] .topnav a.active { color: #fff; background: rgba(124, 92, 255, 0.16); } [data-brand="galuxy"] .topnav-ico { width: 19px; height: 19px; flex: none; opacity: 0.85; transition: 0.2s; } [data-brand="galuxy"] .topnav a:hover .topnav-ico { opacity: 1; transform: translateY(-1px); } /* 버튼 */ [data-brand="galuxy"] .topbar .btn { border-radius: 10px; font-weight: 700; } [data-brand="galuxy"] .topbar .btn-ghost { padding: 10px 22px; font-size: 14px; border: 1px solid rgba(140, 170, 255, 0.35); color: #dde5ff; background: rgba(255, 255, 255, 0.03); } [data-brand="galuxy"] .topbar .btn-ghost:hover { border-color: rgba(160, 190, 255, 0.7); background: rgba(124, 92, 255, 0.18); } [data-brand="galuxy"] .btn-primary { padding: 11px 24px; font-size: 14px; color: #20160a; border: 0; background: linear-gradient(135deg, #ffd97a, #f0b53f 55%, #dd9822); box-shadow: 0 6px 22px rgba(233, 178, 58, 0.34); } [data-brand="galuxy"] .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(233, 178, 58, 0.5); } /* ── 4. 히어로 ───────────────────────────────────────────────────────── */ [data-brand="galuxy"] .gx-hero { position: relative; padding: 26px 0 6px; } [data-brand="galuxy"] .gx-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: center; min-height: 380px; } [data-brand="galuxy"] .gx-eyebrow { font-size: 17px; font-weight: 700; color: var(--gx-gold); margin-bottom: 14px; text-shadow: 0 0 24px rgba(243, 198, 91, 0.35); } [data-brand="galuxy"] .gx-hero h1 { font-size: clamp(30px, 4.4vw, 58px); font-weight: 900; line-height: 1.22; letter-spacing: -0.02em; margin: 0; } [data-brand="galuxy"] .gx-hero h1 .l1 { display: block; color: #fff; text-shadow: 0 4px 30px rgba(120, 150, 255, 0.35); } [data-brand="galuxy"] .gx-hero h1 .l2 { display: block; background: linear-gradient(100deg, #ffffff 0%, #cbd8ff 22%, #8fb4ff 52%, #b58bff 78%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 26px rgba(90, 140, 255, 0.4)); } [data-brand="galuxy"] .gx-lead { margin: 20px 0 0; font-size: 16px; color: var(--gx-txt-2); line-height: 1.8; } [data-brand="galuxy"] .gx-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } [data-brand="galuxy"] .gx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 30px; font-size: 15.5px; font-weight: 700; border-radius: 12px; white-space: nowrap; border: 0; cursor: pointer; position: relative; overflow: hidden; transition: 0.22s; } [data-brand="galuxy"] .gx-btn svg { width: 18px; height: 18px; } [data-brand="galuxy"] .gx-btn-gold { color: #20160a; background: linear-gradient(135deg, #ffd97a, #f0b53f 55%, #dd9822); box-shadow: 0 6px 22px rgba(233, 178, 58, 0.34); } [data-brand="galuxy"] .gx-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(233, 178, 58, 0.5); } [data-brand="galuxy"] .gx-btn-gold::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 47%, transparent 62%); transform: translateX(-120%); animation: gx-sheen 4.2s ease-in-out infinite; pointer-events: none; will-change: transform; } @keyframes gx-sheen { 0%, 62% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } } [data-brand="galuxy"] .gx-btn-outline { border: 1px solid rgba(150, 180, 255, 0.4); color: #e6ecff; background: rgba(10, 18, 48, 0.5); } [data-brand="galuxy"] .gx-btn-outline:hover { border-color: rgba(180, 205, 255, 0.85); background: rgba(124, 92, 255, 0.2); transform: translateY(-2px); } [data-brand="galuxy"] .gx-hero-feats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--gx-txt-2); } [data-brand="galuxy"] .gx-hero-feats li { display: flex; align-items: center; gap: 8px; } [data-brand="galuxy"] .gx-hero-feats li + li { padding-left: 18px; border-left: 1px solid var(--gx-line-soft); } [data-brand="galuxy"] .gx-hero-feats svg { width: 17px; height: 17px; } [data-brand="galuxy"] .gx-hero-art { position: relative; } [data-brand="galuxy"] .gx-hero-art img { width: 113%; max-width: none; margin-left: -13%; border-radius: 20px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 93%, transparent 100%), linear-gradient(180deg, #000 82%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 93%, transparent 100%), linear-gradient(180deg, #000 82%, transparent 100%); mask-composite: intersect; animation: gx-float 7s ease-in-out infinite; will-change: transform; } @keyframes gx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ── 5. 카테고리 카드 ────────────────────────────────────────────────── */ [data-brand="galuxy"] .gx-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } [data-brand="galuxy"] .gx-cat { position: relative; display: block; overflow: hidden; border-radius: var(--gx-radius); min-height: 158px; padding: 22px 22px 20px; isolation: isolate; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--c-line); background: linear-gradient(115deg, var(--c-a) 0%, rgba(8, 13, 38, 0.35) 62%); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42); } [data-brand="galuxy"] .gx-cat::before { content: ''; position: absolute; inset: 0; z-index: -2; background: rgba(6, 10, 30, 0.55); } [data-brand="galuxy"] .gx-cat-art { position: absolute; top: 0; right: 0; height: 100%; width: 62%; z-index: -1; background-image: var(--c-img); background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.85) 42%, #000 78%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.85) 42%, #000 78%); transition: transform 0.45s ease; } [data-brand="galuxy"] .gx-cat:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--c-glow); } [data-brand="galuxy"] .gx-cat:hover .gx-cat-art { transform: scale(1.06); } [data-brand="galuxy"] .gx-cat-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } [data-brand="galuxy"] .gx-cat-title svg { width: 26px; height: 26px; } [data-brand="galuxy"] .gx-cat-title b { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; } [data-brand="galuxy"] .gx-cat-desc { display: block; font-size: 13.5px; color: #c3cdec; line-height: 1.65; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } [data-brand="galuxy"] .gx-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #eef2ff; border: 1px solid var(--c-line); background: rgba(6, 11, 32, 0.6); transition: 0.22s; } [data-brand="galuxy"] .gx-pill svg { width: 14px; height: 14px; transition: 0.22s; } [data-brand="galuxy"] .gx-cat:hover .gx-pill { background: var(--c-a); border-color: var(--c-glow); } [data-brand="galuxy"] .gx-cat:hover .gx-pill svg { transform: translateX(3px); } [data-brand="galuxy"] .gx-cat-1 { --c-a: rgba(124, 92, 255, 0.30); --c-line: rgba(150, 120, 255, 0.45); --c-glow: rgba(160, 120, 255, 0.7); } [data-brand="galuxy"] .gx-cat-2 { --c-a: rgba(168, 85, 247, 0.28); --c-line: rgba(196, 120, 255, 0.42); --c-glow: rgba(200, 130, 255, 0.7); } [data-brand="galuxy"] .gx-cat-3 { --c-a: rgba(56, 120, 255, 0.28); --c-line: rgba(90, 150, 255, 0.42); --c-glow: rgba(90, 160, 255, 0.7); } [data-brand="galuxy"] .gx-cat-4 { --c-a: rgba(215, 160, 50, 0.26); --c-line: rgba(230, 180, 80, 0.45); --c-glow: rgba(243, 198, 91, 0.7); } /* ── 6. 프로모 배너 ──────────────────────────────────────────────────── */ [data-brand="galuxy"] .gx-promo { position: relative; overflow: hidden; border-radius: var(--gx-radius); border: 1px solid rgba(120, 150, 255, 0.28); background: linear-gradient(100deg, rgba(12, 20, 58, 0.9) 0%, rgba(28, 26, 86, 0.78) 46%, rgba(14, 22, 60, 0.9) 100%); box-shadow: var(--gx-shadow-lg); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 16px 26px 16px 16px; } [data-brand="galuxy"] .gx-promo::after { content: ''; position: absolute; right: -60px; top: -70px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(120, 90, 220, 0.55), rgba(40, 30, 110, 0.2) 60%, transparent 70%); pointer-events: none; } [data-brand="galuxy"] .gx-promo-ship { width: 210px; height: auto; flex: none; border-radius: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 82%, transparent); animation: gx-float 8s ease-in-out infinite; will-change: transform; } [data-brand="galuxy"] .gx-promo-list { display: flex; align-items: center; justify-content: space-evenly; gap: 36px; flex-wrap: wrap; padding: 0 10px; position: relative; z-index: 1; } [data-brand="galuxy"] .gx-promo-item .t { font-size: 14px; font-weight: 700; color: var(--gx-gold); margin-bottom: 4px; } [data-brand="galuxy"] .gx-promo-item .v { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -0.01em; } [data-brand="galuxy"] .gx-promo-item .s { font-size: 12.5px; color: var(--gx-txt-3); margin-top: 3px; } [data-brand="galuxy"] .gx-promo-item.hi .v { font-size: 24px; background: linear-gradient(100deg, #ffe9ae, #f3c65b 55%, #ffdf95); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-brand="galuxy"] .gx-promo-more { flex: none; padding: 13px 24px; border-radius: 10px; font-size: 14px; font-weight: 700; border: 1px solid rgba(243, 198, 91, 0.55); color: #ffe6a8; background: rgba(243, 198, 91, 0.08); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.22s; position: relative; z-index: 1; } [data-brand="galuxy"] .gx-promo-more:hover { background: rgba(243, 198, 91, 0.2); border-color: var(--gx-gold); transform: translateY(-2px); } [data-brand="galuxy"] .gx-promo-more svg { width: 15px; height: 15px; } /* ── 7. 바로가기 (로그인 시) ─────────────────────────────────────────── */ [data-brand="galuxy"] .gx-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } [data-brand="galuxy"] .gx-quick-item { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 10px; border-radius: 12px; font-size: 14px; font-weight: 500; color: #dde5ff; cursor: pointer; border: 1px solid var(--gx-line-soft); background: var(--gx-panel); transition: 0.22s; } [data-brand="galuxy"] .gx-quick-item svg { width: 18px; height: 18px; } [data-brand="galuxy"] .gx-quick-item:hover { transform: translateY(-3px); border-color: rgba(150, 180, 255, 0.45); background: rgba(124, 92, 255, 0.18); } /* ── 8. 인기 게임 ────────────────────────────────────────────────────── */ [data-brand="galuxy"] .gx-games { display: grid; grid-template-columns: repeat(5, 1fr) 0.62fr; gap: 18px; } [data-brand="galuxy"] .gx-game { display: block; border-radius: 14px; overflow: hidden; background: var(--gx-panel); border: 1px solid var(--gx-line-soft); transition: 0.28s; position: relative; } [data-brand="galuxy"] .gx-game:hover { transform: translateY(-6px); border-color: rgba(150, 180, 255, 0.45); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } [data-brand="galuxy"] .gx-game-thumb { display: block; position: relative; aspect-ratio: 235 / 72; overflow: hidden; background: #0a1130; } [data-brand="galuxy"] .gx-game-tag { position: absolute; top: -7px; right: 9px; z-index: 2; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #fff; line-height: 1.3; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } [data-brand="galuxy"] .gx-game-tag.hot { background: linear-gradient(135deg, #ff7a3d, #e63a1e); } [data-brand="galuxy"] .gx-game-tag.new { background: linear-gradient(135deg, #5b8cff, #3b3fd8); } [data-brand="galuxy"] .gx-game-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } [data-brand="galuxy"] .gx-game:hover .gx-game-thumb img { transform: scale(1.07); } [data-brand="galuxy"] .gx-game-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5, 9, 26, 0.6); opacity: 0; transition: 0.25s; } [data-brand="galuxy"] .gx-game:hover .gx-game-play { opacity: 1; } [data-brand="galuxy"] .gx-game-play > span { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffd97a, #e0a02b); box-shadow: 0 6px 20px rgba(233, 178, 58, 0.5); } [data-brand="galuxy"] .gx-game-play svg { width: 16px; height: 16px; margin-left: 2px; } [data-brand="galuxy"] .gx-game-meta { display: block; padding: 11px 13px 13px; } [data-brand="galuxy"] .gx-game-meta b { display: block; font-size: 14px; font-weight: 500; color: #eef2ff; } [data-brand="galuxy"] .gx-game-meta small { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.06em; color: var(--gx-txt-3); } [data-brand="galuxy"] .gx-game-all { border-radius: 14px; border: 1px solid var(--gx-line-soft); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(20, 32, 80, 0.8), rgba(9, 15, 42, 0.9)); transition: 0.28s; } [data-brand="galuxy"] .gx-game-all::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(90, 140, 255, 0.5), rgba(30, 50, 140, 0.25) 55%, transparent 70%); } [data-brand="galuxy"] .gx-game-all:hover { transform: translateY(-6px); border-color: rgba(150, 180, 255, 0.45); } [data-brand="galuxy"] .gx-game-all a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; border: 1px solid rgba(150, 180, 255, 0.35); background: rgba(6, 11, 32, 0.6); position: relative; z-index: 1; } [data-brand="galuxy"] .gx-game-all svg { width: 15px; height: 15px; transition: 0.22s; } [data-brand="galuxy"] .gx-game-all:hover svg { transform: translateX(4px); } /* ── 9. 신뢰 스트립 ──────────────────────────────────────────────────── */ [data-brand="galuxy"] .gx-trust { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--gx-radius); border: 1px solid var(--gx-line-soft); background: var(--gx-panel-2); padding: 22px 10px; } [data-brand="galuxy"] .gx-trust-item { display: flex; align-items: center; gap: 14px; padding: 2px 24px; } [data-brand="galuxy"] .gx-trust-item + .gx-trust-item { border-left: 1px solid var(--gx-line-soft); } [data-brand="galuxy"] .gx-trust-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, rgba(124, 92, 255, 0.3), rgba(60, 120, 255, 0.18)); border: 1px solid var(--gx-line); } [data-brand="galuxy"] .gx-trust-ico svg { width: 21px; height: 21px; } [data-brand="galuxy"] .gx-trust-item b { display: block; font-size: 14.5px; font-weight: 700; } [data-brand="galuxy"] .gx-trust-item small { display: block; font-size: 12.5px; color: var(--gx-txt-3); margin-top: 2px; } /* ── 10. 푸터 ────────────────────────────────────────────────────────── */ [data-brand="galuxy"] .footer { margin-top: 34px; border-top: 1px solid var(--gx-line-soft); background: linear-gradient(180deg, rgba(5, 9, 26, 0.5), rgba(3, 6, 16, 0.95)); padding: 38px 0 0; } [data-brand="galuxy"] .gx-f-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr 1.2fr; gap: 32px; } [data-brand="galuxy"] .gx-f-brand .gx-logo { margin-bottom: 14px; } [data-brand="galuxy"] .gx-f-brand p { font-size: 12.5px; color: var(--gx-txt-3); line-height: 1.85; max-width: 270px; margin: 0; } [data-brand="galuxy"] .gx-f-col h4 { font-size: 13.5px; font-weight: 700; color: #dbe3ff; margin: 0 0 14px; } [data-brand="galuxy"] .gx-f-col ul { list-style: none; margin: 0; padding: 0; } [data-brand="galuxy"] .gx-f-col li + li { margin-top: 9px; } [data-brand="galuxy"] .gx-f-col a { font-size: 12.5px; color: var(--gx-txt-3); cursor: pointer; transition: 0.2s; } [data-brand="galuxy"] .gx-f-col a:hover { color: var(--gx-gold); } [data-brand="galuxy"] .gx-f-links { display: flex; flex-wrap: wrap; gap: 9px 18px; } [data-brand="galuxy"] .gx-f-cs .row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--gx-txt-3); } [data-brand="galuxy"] .gx-f-cs .row + .row { margin-top: 10px; } [data-brand="galuxy"] .gx-f-cs .row svg { width: 15px; height: 15px; flex: none; opacity: 0.8; } [data-brand="galuxy"] .gx-f-bottom { margin-top: 30px; border-top: 1px solid var(--gx-line-soft); padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } [data-brand="galuxy"] .gx-f-bottom small { font-size: 12px; color: var(--gx-txt-3); } [data-brand="galuxy"] .gx-f-legal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } [data-brand="galuxy"] .gx-f-legal span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gx-txt-3); } [data-brand="galuxy"] .gx-badge18 { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 120, 120, 0.5); color: #ff9b9b; font-size: 10px; font-weight: 700; font-style: normal; } [data-brand="galuxy"] .gx-socials { display: flex; gap: 9px; } [data-brand="galuxy"] .gx-socials a { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gx-line-soft); color: var(--gx-txt-3); transition: 0.22s; } [data-brand="galuxy"] .gx-socials a:hover { color: #fff; border-color: rgba(150, 180, 255, 0.5); background: rgba(124, 92, 255, 0.2); transform: translateY(-2px); } [data-brand="galuxy"] .gx-socials svg { width: 14px; height: 14px; } /* ── 11. 게임사 미등록 안내 (카지노/슬롯/홀덤 공통) ──────────────────── */ [data-brand="galuxy"] .gx-soon { width: 100%; padding: 64px 24px; text-align: center; border-radius: var(--gx-radius); border: 1px dashed rgba(120, 150, 255, 0.32); background: var(--gx-panel); } [data-brand="galuxy"] .gx-soon-ico { width: 68px; height: 68px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; font-size: 30px; color: var(--gx-gold); background: rgba(243, 198, 91, 0.12); border: 1px solid rgba(243, 198, 91, 0.35); } [data-brand="galuxy"] .gx-soon-title { font-size: 23px; font-weight: 800; margin-bottom: 10px; } [data-brand="galuxy"] .gx-soon-desc { color: var(--gx-txt-2); font-size: 14px; line-height: 1.7; margin-bottom: 26px; } [data-brand="galuxy"] .gx-soon-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ── 11-2. 배팅내역 카테고리 칩 (스포츠/홀덤 추가분) ────────── */ [data-brand="galuxy"] .bet-cat-chip.casino { background: rgba(168, 85, 247, 0.16); color: #d8b4fe; } [data-brand="galuxy"] .bet-cat-chip.slot { background: rgba(236, 72, 153, 0.16); color: #f9a8d4; } [data-brand="galuxy"] .bet-cat-chip.sports { background: rgba(59, 130, 246, 0.18); color: #93c5fd; } [data-brand="galuxy"] .bet-cat-chip.holdem { background: rgba(243, 198, 91, 0.16); color: #ffe6a8; } /* ── 12. 반응형 ──────────────────────────────────────────────────────── */ @media (max-width: 1400px) { [data-brand="galuxy"] .topnav a { padding: 10px 11px; font-size: 14px; } [data-brand="galuxy"] .gx-promo-list { gap: 26px; } } @media (max-width: 1180px) { [data-brand="galuxy"] .gx-games { grid-template-columns: repeat(3, 1fr); } [data-brand="galuxy"] .gx-game-all { grid-column: span 3; min-height: 96px; } [data-brand="galuxy"] .gx-quick { grid-template-columns: repeat(3, 1fr); } [data-brand="galuxy"] .gx-f-grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px; } [data-brand="galuxy"] .gx-f-brand { grid-column: span 3; } } @media (max-width: 980px) { [data-brand="galuxy"] .gx-hero-grid { grid-template-columns: 1fr; gap: 8px; } [data-brand="galuxy"] .gx-hero-art { order: -1; margin: 0 -20px; } [data-brand="galuxy"] .gx-hero-art img { width: 100%; margin-left: 0; border-radius: 0; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); } [data-brand="galuxy"] .gx-cats { grid-template-columns: 1fr 1fr; } [data-brand="galuxy"] .gx-promo { grid-template-columns: 1fr; gap: 16px; padding: 20px; } [data-brand="galuxy"] .gx-promo-ship { width: 150px; margin: 0 auto; } [data-brand="galuxy"] .gx-promo-list { justify-content: space-between; gap: 20px; } [data-brand="galuxy"] .gx-promo-more { width: 100%; justify-content: center; } [data-brand="galuxy"] .gx-trust { grid-template-columns: 1fr 1fr; gap: 18px 0; padding: 20px 6px; } [data-brand="galuxy"] .gx-trust-item:nth-child(3) { border-left: 0; } } @media (max-width: 720px) { [data-brand="galuxy"] .gx-wrap { padding: 0 14px; } [data-brand="galuxy"] .gx-hero-art { margin: 0 -14px; } [data-brand="galuxy"] .topbar-row { min-height: 58px; padding: 0 14px; gap: 12px; } [data-brand="galuxy"] .topbar { padding: 0; } [data-brand="galuxy"] .gx-logo-mark { width: 34px; height: 34px; } [data-brand="galuxy"] .gx-logo-txt b { font-size: 17px; } [data-brand="galuxy"] .gx-hero { padding: 14px 0 0; } [data-brand="galuxy"] .gx-hero-feats li + li { padding-left: 0; border-left: 0; } [data-brand="galuxy"] .gx-hero-cta .gx-btn { flex: 1; padding: 14px 18px; font-size: 14px; } [data-brand="galuxy"] .gx-cats { grid-template-columns: 1fr; } [data-brand="galuxy"] .gx-cat { min-height: 140px; } [data-brand="galuxy"] .gx-games { grid-template-columns: 1fr 1fr; gap: 12px; } [data-brand="galuxy"] .gx-game-all { grid-column: span 2; min-height: 78px; } [data-brand="galuxy"] .gx-quick { grid-template-columns: repeat(2, 1fr); } [data-brand="galuxy"] .gx-promo-list { gap: 14px; } [data-brand="galuxy"] .gx-promo-item .v { font-size: 19px; } [data-brand="galuxy"] .gx-promo-item.hi .v { font-size: 21px; } [data-brand="galuxy"] .gx-trust { grid-template-columns: 1fr; } [data-brand="galuxy"] .gx-trust-item { border-left: 0 !important; } [data-brand="galuxy"] .gx-f-grid { grid-template-columns: 1fr 1fr; } [data-brand="galuxy"] .gx-f-brand { grid-column: span 2; } [data-brand="galuxy"] .gx-f-bottom { justify-content: center; text-align: center; } } @media (prefers-reduced-motion: reduce) { [data-brand="galuxy"] * { animation: none !important; } }