/* ══════════════════════════════════════════════════════════════════════════ legend 스킨 — 배치 덮어쓰기 (theme.css → brand.css → layout.css) ══════════════════════════════════════════════════════════════════════════ ★ 이 파일은 회원 브라우저로 그대로 내려간다 — 주석에 업체 상호를 적지 않는다. ★ 기본 layout.css 는 비어 있다 — 이 파일이 그 자리를 통째로 갈아끼운다. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ 게임 탭 = 사진 배너 + 앤티크 금 액자 (구조는 럭셔리 판을 따랐다) ══════════════════════════════════════════════════════════════════════════ 배너 글자는 HTML 텍스트다(.game-tab__label) — 그림은 배경만 맡는다. 그림은 기본 자산에 없는 새 이름(tab_*_bg.jpg)이라 여기서 붙여야 화면에 나온다. 그림은 오른쪽 3분의 1에 주인공(룰렛·슬롯 릴)이 있고 왼쪽이 어둡다 = 라벨 자리. ★★ 상태 조합까지 같이 적는다 (그린이 세 번 걸린 특정도 함정) — .game-tab--img.is-active (0,2,0) .game-tab--img[data-target="slotList"].is-active (0,3,0) `.game-tab--img` (0,1,0) 하나로 덮으면 **활성 탭에서만** 판이 안 그려진다. ══════════════════════════════════════════════════════════════════════════ */ .game-tab--img img { display: none; } .game-tabs--img.is-desktop .game-tab--img, .game-tabs--img.is-desktop .game-tab--img:hover, .game-tabs--img.is-desktop .game-tab--img.is-active { aspect-ratio: 864 / 289; /* 그림이 잡아 주던 높이를 대신한다 */ filter: none; opacity: 1; border-radius: 4px; border: 1px solid rgba(var(--lg-gold-rgb), 0.28); background-color: rgb(var(--lg-deep-rgb)); background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: inset 0 1px 0 rgba(var(--lg-gold-rgb), 0.15), 0 6px 18px rgba(0,0,0,0.45); transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); /* 사진 위 막 — 오른쪽·아래·위 가장자리를 판 바탕색으로 녹이고(사진이 선에 잘리지 않게) 라벨 뒤에 옅은 금빛을 깐다(왼쪽이 죽은 검정 + 사진 두 덩이로 갈리지 않게). 럭셔리와 같은 묶음. */ --tab-veil: radial-gradient(ellipse 40% 72% at 22% 50%, rgba(var(--lg-gold-rgb), 0.10) 0%, rgba(var(--lg-gold-rgb), 0) 70%), linear-gradient(270deg, rgba(var(--lg-deep-rgb), 0.95) 0%, rgba(var(--lg-deep-rgb), 0) 22%), linear-gradient(0deg, rgba(var(--lg-deep-rgb), 0.90) 0%, rgba(var(--lg-deep-rgb), 0) 20%), linear-gradient(180deg, rgba(var(--lg-deep-rgb), 0.70) 0%, rgba(var(--lg-deep-rgb), 0) 14%), linear-gradient(90deg, rgba(var(--lg-deep-rgb), 0.88) 0%, rgba(var(--lg-deep-rgb), 0.50) 46%, rgba(var(--lg-deep-rgb), 0.04) 78%); } /* 액자 매트 — 안쪽으로 들여 그은 금 실선(라벨과 사진이 한 틀에 들어간다). ★ ::after 는 못 쓴다 — 기본 CSS 가 활성 탭 발광 밑줄에 쓴다. */ .game-tabs--img.is-desktop .game-tab--img::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(var(--lg-gold-rgb), 0.40); border-radius: 2px; pointer-events: none; transition: border-color var(--t-base); } .game-tabs--img.is-desktop .game-tab--img:hover::before { border-color: rgba(var(--lg-gold-rgb), 0.55); } .game-tabs--img.is-desktop .game-tab--img.is-active::before { border-color: rgba(var(--lg-gold-rgb), 0.70); } /* 활성 밑줄을 매트 안쪽으로 (기본 위치면 매트 선과 겹친다) */ .game-tabs--img.is-desktop .game-tab--img::after { left: 6%; bottom: 8%; width: 60%; } .game-tabs--img.is-desktop .game-tab--img[data-target="casinoList"], .game-tabs--img.is-desktop .game-tab--img[data-target="casinoList"]:hover, .game-tabs--img.is-desktop .game-tab--img[data-target="casinoList"].is-active { background-image: var(--tab-veil), url('../images/tab_casino_bg.jpg'); } .game-tabs--img.is-desktop .game-tab--img[data-target="slotList"], .game-tabs--img.is-desktop .game-tab--img[data-target="slotList"]:hover, .game-tabs--img.is-desktop .game-tab--img[data-target="slotList"].is-active { background-image: var(--tab-veil), url('../images/tab_slot_bg.jpg'); } /* 선택된 탭 — 테두리를 금으로 올리고 은은히 발광 */ .game-tabs--img.is-desktop .game-tab--img.is-active { border-color: rgb(var(--lg-gold-rgb)); box-shadow: inset 0 1px 0 rgba(var(--lg-gold-rgb), 0.15), 0 0 0 1px rgba(var(--lg-gold-rgb), 0.35), 0 8px 26px rgba(0,0,0,0.5); transform: none; /* 기본은 scale(1.04) — 판이라 커질 이유가 없다 */ } .game-tabs--img.is-desktop .game-tab--img:hover { border-color: rgba(var(--lg-gold-rgb), 0.6); transform: translateY(-2px); } /* 라벨 — 기본은 네온 간판용(기울임 · 보라·파랑 발광 4겹)이라 되돌린다. ★ 기본의 `.game-tab--img[data-target="…"] .game-tab__label` 이 (0,3,0) 이다 — 여기도 (0,3,0) 이라 **소스 순서로** 이긴다. */ .game-tabs--img.is-desktop .game-tab__label { /* ★ 주인공(룰렛·릴)이 판 폭의 54% 부터 시작한다(원본 실측) — 럭셔리 값(left 8% · 5.0cqw)이면 「CASINO GAMES」 끝 글자가 룰렛에 겹쳤다(2026-10-19 헤드리스 캡처). 글자를 줄여 50% 안에서 끝낸다. */ left: 6%; top: 34%; width: 48%; height: 34%; font-family: 'Cinzel', 'Oswald', 'Pretendard', sans-serif; font-size: 4.2cqw; font-style: normal; font-weight: 700; letter-spacing: 0.12em; color: var(--lg-gold-ink); text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 0 18px rgba(var(--lg-gold-rgb), 0.25); } /* ── 게임 목록 배경 ──────────────────────────────────────────────────── ★ 기본 CSS 가 배경 위에 **하드코딩 초록**을 덮는다 — `linear-gradient(135deg, rgba(16,185,129,.22), rgba(6,78,59,.32))` (theme.css .gamesec::before). 토큰이 아니라 리터럴이라 brand.css 로는 못 바꾼다 → 여기서 통째로 다시 적는다(럭셔리와 같은 수법). 그림 = 슬롯 기계가 늘어선 돌 홀(슬롯) · 와인 펠트 테이블과 샹들리에 홀(카지노). 두 장 밝기 65 · 67. */ .gamesec::before { background: linear-gradient(135deg, rgba(var(--lg-gold-rgb), 0.08) 0%, rgba(var(--lg-deep-rgb), 0.55) 100%), url('../images/gamelist_bg.webp') center center / cover no-repeat; } .gamesec:has(#casinoList.is-active)::before { background: linear-gradient(135deg, rgba(var(--lg-gold-rgb), 0.08) 0%, rgba(var(--lg-deep-rgb), 0.55) 100%), url('../images/gamelist_bg2.jpg') center center / cover no-repeat; } /* ── 세트 1 사자 — 조금 작게 · 가운데 쪽으로 (2026-10-19 PM) ────────────── PM: 「용은 꼬리 때문에 가운데로 많이 나와 있고, 사자는 덜 나와 있다」. 채운 면적은 맞춰 뒀지만(0.441 · 0.440) 용은 꼬리가 가로로 뻗어 **안쪽 끝**이 가운데 가까이 온다. → 사자만 키 55vh → 52vh(약 −5%) · 왼쪽 여백 2% → 6%. 용은 그대로. ★ 세트 1 만 고른다 — 세트 2(딜러)·3(기본 그림)의 왼쪽 자리는 건드리지 않는다. */ .hero-char-set:not(.hero-char-set--2):not(.hero-char-set--3) .hero-char--left { height: 52vh; left: 6%; }