/* ══════════════════════════════════════════════════════════════════════════ 2호기 맞춤 스킨 (2026-10-07 PM 지시 · B) ══════════════════════════════════════════════════════════════════════════ 럭셔리(skins/luxury) 를 그대로 복사한 스킨이다. 달라진 것은 이 파일 맨 끝 「이 스킨 전용」 블록과 히어로 배경 3장(images/hero_bg1·hero_bg_table·hero_bg3 = 같은 그림 · 흑백 느와르 · AI 생성)뿐이다. 럭셔리를 고치면 이 폴더에도 같이 옮겨야 한다(스킨은 「스킨 → 기본」 두 단계만 찾는다 · 상속 없음). ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ luxury — 배치: 맨 위 고정 헤더 (로고 + 사용자 띠) ══════════════════════════════════════════════════════════════════════════ 럭셔리 원안(luxury_design)의 정체성 절반은 **맨 위 한 줄에 로고와 로그인이 함께 있는 헤더**다. 색만 옮기면 "금색으로 칠한 2020" 이 된다. 마크업은 한 벌로 두고 CSS 로만 세운다 — 그래야 기능이 늘어도 고칠 곳이 한 군데다. ── 원안과 현 화면 대조 (실측 2026-08-26) ───────────────────────────────── 현 유저웹 럭셔리 원안 메뉴 히어로 아래 .midbar 히어로 아래 .mainnav → 이미 같다. 안 건드린다 로고 히어로 안 가운데 .hero-logo 헤더 왼쪽 .topbar .brand → 옮긴다 로그인·보유머니 히어로 아래 .userbar 헤더 오른쪽 .topbar-actions → 옮긴다 그래서 옮기는 요소는 **2개**다. 그린 스킨(사이드바)도 2개를 옮겼고, 방법은 그 거울상이다. 그린 body { padding-left } + .midbar 를 왼쪽 세로 기둥으로 럭셔리 body { padding-top } + .userbar 를 위쪽 가로 띠로 ★ 그린은 사용자 띠를 안 옮겼다 — 이유가 **폭**이었다 (그린 지시서 §6). 그린 원안은 사용자 영역이 사이드바 **맨 아래**라, 등급·아이디·머니·포인트에 버튼 다섯 개가 든 가로 띠를 240px 세로 칸에 욱여넣어야 했다. 그래서 범위 밖으로 뒀고 "필요하면 별건으로 PM 결정을 받는다"고 열어 뒀다. 럭셔리는 원안이 요구하는 자리가 **가로 띠**라 형태를 안 바꿔도 된다 = 막던 이유가 없다. (PM 결정 2026-08-26.) ★ 경계값은 1100px 이다 (원안의 값이 아니라 현 유저웹의 값). 현 유저웹은 1100px 이하에서 `.midbar-nav { display: none }` 으로 가로 메뉴를 접고 서랍(offcanvas)에 넘긴다(theme.css:3496). 서랍이 현 유저웹 것이므로 경계값도 그것을 따른다. ★ 1100px 이하는 **손대지 않는다** — 모바일 배치는 이미 맞다 (그린 §3 정합). ★ backdrop-filter 는 넣지 않는다. 원안 `.topbar` 는 `backdrop-filter: blur(18px)` 을 쓰지만, 우리 `.userbar` 에서는 2026-08-21 에 **일부러 걷어낸 것**이다 (theme.css:665 주석). 뒤 화면을 매 프레임 다시 블러하는 합성 레이어가 히어로 회전(4초·5초)마다 다시 만들어지며 띠가 순간 비었다 나타났다 = 깜빡임 사고의 원인이었다. 되살리면 그 사고가 그대로 돌아온다. ★ 여기서 안 하는 것 — 컴포넌트 생김새, 게임 카드, 모달, 메뉴(.midbar), 모바일. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1101px) { :root { /* 헤더 띠 높이. 원안 topbar 는 padding 18px + 내용 ≒ 64px 대. */ --topbar-h: 64px; /* 로고를 띠 안에 앉힌다. 기본값 145px 은 히어로 한가운데에 있을 때의 크기다. ★ 심볼이 거의 정사각(0.91:1)이라 40px 이면 폭도 36px 뿐이다. 띠가 64px 이므로 46px 까지 키워도 위아래 9px 이 남는다. 상호 글자도 비례해 20px -> 23px 이 된다. */ --logo-h: 46px; /* 헤더 왼쪽에 비워 둘 브랜드 자리 (심볼 + 상호). 위 .userbar-inner 참조. */ --brand-reserve: 300px; /* 히어로 문구 위 여백. 기본 120px 은 히어로 위쪽을 로고(8px + 145px)가 차지할 때의 값이다 (theme.css 주석: "로고와 안 겹치게 띄우는 값"). 로고가 떠났으니 아래 여백(160px)과 같게 맞춰 문구를 한가운데로 세운다. */ --hero-copy-top: 160px; } /* 본문 전체를 아래로 민다. ★ index.html 최상위가 전부 직계 형제라(hero·userbar·midbar·gamesec·footer) 감쌀 컨테이너를 만들 필요가 없다. 오버레이(.modal·.toasts·.offcanvas 등)는 position: fixed 라 이 여백의 영향을 받지 않는다 = 화면 전체를 덮는 동작 유지. (그린이 padding-left 로 한 것과 같은 수법이다.) */ body { padding-top: var(--topbar-h); } /* ── 사용자 띠 = 맨 위 고정 헤더 ─────────────────────────────────── DOM 상으로는 히어로 **뒤**에 있다. sticky 로는 히어로를 지나야 붙으므로 fixed + body 여백으로 자리를 잡는다 (자리를 미리 비워 두므로 화면이 안 밀린다). */ .userbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 30; /* 페이지 요소 위 · 모달(8000+)·서랍(9400+) 아래 */ border-bottom: 1px solid var(--gold-line); box-shadow: 0 2px 24px rgba(0,0,0,0.45); } /* 원안 = 로고 왼쪽 / 액션 오른쪽. 기본값은 justify-content: center 라 가운데 뭉친다. */ .userbar-inner { height: 100%; min-height: 0; justify-content: flex-end; /* 왼쪽은 브랜드(심볼 + 상호) 자리로 비운다. ★ 상호는 업체마다 길이가 달라 CSS 로는 폭을 못 잰다 → 넉넉히 잡아 둔다. 심볼 68px + 틈 12px + 상호 20px 글자. 「MAXIM」 다섯 자면 약 190px 이다. 300px 면 열 자 안팎까지 받는다. 1101px 화면에서도 오른쪽에 780px 이 남는다. */ padding: 0 24px 0 var(--brand-reserve); } /* ── 로고 = 그 띠 왼쪽 ───────────────────────────────────────────── ★ .hero 가 overflow: hidden 이라 absolute 로는 히어로를 못 벗어난다. fixed 는 벗어난다 (변형된 조상이 없다) = 마크업 무변경의 전제. 그린이 로고를 사이드바 위로 올릴 때 쓴 기법과 같다. */ .hero-logo.is-desktop { position: fixed; top: 0; left: 24px; height: var(--topbar-h); transform: none; display: flex; align-items: center; z-index: 31; } } /* ══════════════════════════════════════════════════════════════════════════ 히어로 캐릭터 — 폭 밖에서도 적용한다 (1100px 이하 포함) ══════════════════════════════════════════════════════════════════════════ ★ 위 헤더 블록과 달리 여기는 **모든 폭에 적용**한다. 그림을 갈아끼우는 것은 스킨 전체에 걸리므로, 크기 규칙만 데스크탑에 두면 좁은 화면에서 샴페인 병이 사람 크기로 서 버린다. (그린은 사이드바가 데스크탑에만 있어 안쪽에 뒀다.) ★ 기본 규칙은 **세트 2 가 사람**이라는 전제로 짜여 있다 — `.hero-char { height: 55vh }` · `.hero-char-set--2 .hero-char { bottom: -40px }` (사람은 바닥에 서는 게 맞고, 아래가 좀 잘려도 된다). 럭셔리는 그 자리에 물건이 온다 → 작게, 띄워서, 안 잘리게 다시 잡는다. ★★ 세트 2 왼쪽 img 에는 **인라인 `style="height:59vh"`** 가 있다(index.html:58). 인라인은 어떤 선택자로도 못 이긴다 → `height` 를 덮지 말고 **`max-height`·`max-width` 로 가둔다.** 그린이 같은 이유로 max-* 를 썼다. ★ 크기는 "채워진 면적"으로 맞춘다 — 눈은 상자가 아니라 채운 양으로 크기를 읽는다. 폭은 손으로 안 골랐다. 네 장이 같은 시각 무게가 되도록 폭 = sqrt(기준면적 x 가로세로비 / 채움비율) 로 계산했다 (scripts/skin-image-prep.py luxury objects 가 값을 찍어 준다). 기준면적은 그린이 PM 확인까지 받은 값(슬롯 폭 23% · 채움 0.443 · 비율 1.79)을 썼다. 폭은 히어로 대비 비율이라 화면이 넓어져도 같은 인상이 된다. ══════════════════════════════════════════════════════════════════════════ */ /* 세트 1 — 딜러 사진. `heroFloat` 가 최대 14px 들어올리는데(theme.css:393) 사진 아래가 잘린 판이라 들리는 순간 잘린 끝이 드러난다. 미리 내려 둔다. */ .hero-char-set:not(.hero-char-set--2):not(.hero-char-set--3) .hero-char { bottom: -18px; } /* 세트 2 — 샴페인·금괴. 기본은 사람 전제(바닥에 서고 55~59vh)라 덩치가 크고 아래가 잘린다. ★★ `height: auto !important` 가 없으면 **그림이 찌그러진다** (실측 2026-08-26). 높이가 값으로 정해져 있는데(55vh / 왼쪽은 인라인 59vh) `max-width` 로 폭만 깎으면 높이는 안 따라온다 → 렌더 비율이 슬롯 1.792 -> 1.362 (**-24%**) · 룰렛 1.563 -> 1.362 (-12.8%) 로 눌렸다. 세트 3 은 `height: auto` 를 줘서 멀쩡했다. (그 두 그림은 이후 샴페인·금괴로 갈렸지만, 규칙이 없으면 새 그림도 똑같이 눌린다.) 인라인 스타일은 선택자로 못 이기므로 여기서만 `!important` 를 쓴다. */ .hero-char-set--2 .hero-char { height: auto !important; max-height: 46vh; /* 폭이 크기를 정하도록 넉넉히 — 세로로 긴 샴페인이 여기 걸리면 작아진다 */ } .hero-char-set--2 .hero-char--left { max-width: 17.5%; } /* 샴페인 채움 0.335 · 비율 0.78 */ .hero-char-set--2 .hero-char--right { max-width: 26.3%; } /* 금괴 채움 0.474 · 비율 2.50 */ /* 세트 3 — 왕관·주사위. 기본도 물건 전제라(27.5vh / bottom 22%) 자리는 맞다. */ .hero-char-set--3 .hero-char { height: auto; max-height: 34vh; } .hero-char-set--3 .hero-char--left { max-width: 17.0%; } /* 왕관 채움 0.680 · 비율 1.50 */ .hero-char-set--3 .hero-char--right { max-width: 18.5%; } /* 주사위 채움 0.421 · 비율 1.10 */ /* ══════════════════════════════════════════════════════════════════════════ 오브젝트 두 벌은 **가운데를 맞춰 세운다** (아래 끝 기준 아님) ══════════════════════════════════════════════════════════════════════════ ★ PM 지적 (2026-08-27) — 오브젝트 두 화면의 덩치가 달라 보인다. 실측으로 원인이 나왔다. 기본 규칙은 `.hero-char { position:absolute; bottom: ... }` = **아래 끝 기준**이다. 사람은 바닥에 서니 그게 맞지만, 물건은 형태가 제각각이라(샴페인 세로 0.78 · 금괴 가로 2.50) 아래를 맞추면 **위가 벌어진다.** 1440x760 실측 — 아래 끝 461 · 461 · 450 · 450 (거의 같다) 위 끝 138 · 310 · 287 · 208 (**172px 벌어진다**) 같은 시각 면적으로 맞춰도 키가 두 배 넘게 갈리니, 화면마다 덩치가 다르게 읽힌다. ★ 그래서 두 벌만 **세로 가운데 정렬**로 바꾼다. 세트를 flex 로 만들고 캐릭터를 흐름 안에 두면(position: static) 키와 무관하게 가운데가 맞는다. 문구도 히어로 한가운데라, 물건이 문구를 좌우에서 나란히 감싼다. ★ 세트 1(딜러)은 그대로 아래 끝 기준이다 — **사람은 바닥에 서는 것이 맞다.** ★ heroFloat(transform) 은 그대로 돈다. flex 는 transform 을 안 건드린다. ══════════════════════════════════════════════════════════════════════════ */ .hero-char-set--2, .hero-char-set--3 { display: flex; align-items: center; justify-content: space-between; padding: 0 2%; } .hero-char-set--2 .hero-char, .hero-char-set--3 .hero-char { position: static; /* 흐름 안으로 = 세로 가운데 정렬을 flex 가 맡는다 */ bottom: auto; } /* ══════════════════════════════════════════════════════════════════════════ 게임 탭 = 금 판 (배너 그림을 안 쓴다) ══════════════════════════════════════════════════════════════════════════ 기본 배너는 보라·파랑 **네온 간판 그림**이라 금·와인과 정면으로 싸운다. 그런데 마크업을 보니 **배너 글자는 이미 HTML 텍스트**다(.game-tab__label / 2026-08-08). 그림은 판만 담당한다 → 그 판을 CSS 로 그리면 그림이 아예 필요 없다. 2020 네온 간판 그림 + 영문 라벨 green 사진 타일 + 국문·영문 두 줄 luxury **금 테두리 판 + 영문 라벨(Cinzel)** ← 셋이 다 다르다 images/title_*_notext.png 는 1x1 투명 PNG 로 덮어 **그림을 지웠다** (그린과 같은 수법). 판이 CSS 라 어느 크기에서도 또렷하고, 배너 2장을 만들 필요가 없다. ★★ 상태 조합까지 같이 적는다 (그린이 세 번 걸린 특정도 함정 / 그린 layout.css 주석) 기본 규칙이 상태 클래스로 특정도를 올려 뒀다 — .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 var(--gold-line); background-color: rgb(var(--c-deep-2-rgb)); background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: inset 0 1px 0 var(--gold-soft), 0 6px 18px rgba(0,0,0,0.45); transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); /* ── 사진 위에 덮는 막 묶음 (2026-08-27 PM 지시) ───────────────────────── 왜 = 종전에는 왼쪽 막 하나뿐이라 사진이 **오른쪽·아래 테두리에서 그대로 잘렸다.** 룰렛 휠과 칩이 선에 싹둑 잘려 "판에 사진을 얹은" 모양이 됐다. 그리고 왼쪽 절반이 죽은 검정이라 판 하나가 아니라 **검정 판 + 사진 두 덩이**로 읽혔다. 그래서 두 가지를 함께 한다 — ① 오른쪽·아래·위 가장자리를 판 바탕색으로 녹인다 (사진이 어둠에서 떠오르게) ② 라벨 뒤에 아주 옅은 금빛을 깐다 (죽은 검정을 없애 사진 쪽 금빛과 잇는다) ★ background-image 는 한 속성이라 대상별 규칙에서 통째로 다시 써야 한다. 같은 다섯 줄을 두 번 적지 않도록 변수로 묶어 둔다. ★ 사진은 안 건드린다 — 어느 크기에서도 또렷하고, 사진만 갈아끼워도 처리가 따라온다. */ --tab-veil: radial-gradient(ellipse 40% 72% at 22% 50%, rgba(var(--c-gold-a-rgb), 0.10) 0%, rgba(var(--c-gold-a-rgb), 0) 70%), linear-gradient(270deg, rgba(var(--c-deep-2-rgb), 0.95) 0%, rgba(var(--c-deep-2-rgb), 0) 26%), linear-gradient(0deg, rgba(var(--c-deep-2-rgb), 0.92) 0%, rgba(var(--c-deep-2-rgb), 0) 20%), linear-gradient(180deg, rgba(var(--c-deep-2-rgb), 0.70) 0%, rgba(var(--c-deep-2-rgb), 0) 14%), linear-gradient(90deg, rgba(var(--c-deep-2-rgb), 0.90) 0%, rgba(var(--c-deep-2-rgb), 0.55) 46%, rgba(var(--c-deep-2-rgb), 0.05) 78%); } /* 액자 매트 — 카드 안쪽으로 들여 그은 금 실선. 테두리에 선을 하나 더 긋는 것이 아니라 **틀을 만든다** — 라벨과 사진이 한 틀 안에 들어가면서 두 덩이로 갈리던 것이 한 판으로 읽힌다. ★ ::after 는 못 쓴다 — 기본 CSS 가 활성 탭 발광 밑줄에 쓰고 있다(theme.css:1720). 그 밑줄 색은 럭셔리 팔레트가 이미 금·아이보리로 바꿔 놨으므로 살려 둔다. */ .game-tabs--img.is-desktop .game-tab--img::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(var(--c-gold-a-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(--c-gold-a-rgb), 0.55); } .game-tabs--img.is-desktop .game-tab--img.is-active::before { border-color: rgba(var(--c-gold-a-rgb), 0.68); } /* 활성 밑줄을 매트 **안쪽**으로 들인다. 기본값(left 4% / bottom 4%)이면 289px 높이에서 y≈277 — 매트 선(y≈277)과 겹쳐 걸린다. */ .game-tabs--img.is-desktop .game-tab--img::after { left: 6%; bottom: 8%; width: 60%; } /* 배너 그림 — 왼쪽에 어두운 막을 덮어 라벨 자리를 만든다. ★ 이 파일명들은 **기본 자산에 없는 새 이름**이다. 스킨은 새 파일을 더할 수 있다 (그린의 cat_*_bg.jpg 도 같다 / 실측 200). 사진이라 PNG 가 아니라 JPG 로 둔다. */ .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(--c-gold-a-rgb)); box-shadow: inset 0 1px 0 var(--gold-soft), 0 0 0 1px rgba(var(--c-gold-a-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(--c-gold-a-rgb), 0.6); transform: translateY(-2px); } /* 라벨 — 기본은 **네온 간판용**이라 세 가지를 되돌린다. ① 자리 기본과 같은 왼쪽이 맞다 — 그림이 오른쪽 3분의 1을 쓴다 (미세 조정만) ② 기울임 font-style: italic -> 곧게 (Cinzel 은 기울이면 결이 무너진다) ③ 발광 보라·파랑 네온 text-shadow 4겹 -> 금빛 한 겹 ★ ③은 `.game-tab--img[data-target="casinoList"] .game-tab__label` (0,3,0) 이 잡고 있다. 여기 선택자도 (0,3,0) 이라 **소스 순서로** 이긴다 — 안 적으면 네온이 그대로 남는다. */ .game-tabs--img.is-desktop .game-tab__label { /* 그림이 오른쪽 3분의 1을 쓰므로 라벨은 기본 자리(왼쪽)로 되돌린다. */ left: 8%; top: 34%; width: 56%; height: 34%; font-family: var(--font-display); font-size: 5.0cqw; font-style: normal; font-weight: 700; letter-spacing: 0.12em; color: var(--gold-0); text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 18px rgba(var(--c-gold-a-rgb), 0.25); } /* ── 게임 목록 배경 ──────────────────────────────────────────────────── ★ 기본 CSS 가 배경 위에 **하드코딩 초록**을 덮는다 — `linear-gradient(135deg, rgba(16,185,129,.22), rgba(6,78,59,.32))` (theme.css:1519·1530). 팔레트 토큰이 아니라 리터럴이라 brand.css 로는 못 바꾼다. 여기서 통째로 다시 적는다. (스킨 팔레트가 못 잡은 색은 실측으로 이 한 곳뿐이었다 — 나머지 초록은 성공·수신 표시라 둔다.) */ .gamesec::before { background: linear-gradient(135deg, rgba(var(--c-gold-a-rgb), 0.10) 0%, rgba(var(--c-deep-2-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(--c-gold-a-rgb), 0.10) 0%, rgba(var(--c-deep-2-rgb), 0.55) 100%), url('../images/gamelist_bg2.jpg') center center / cover no-repeat; } /* ══════════════════════════════════════════════════════════════════════════ 게임사 카드 배경 — 색만 옮긴다 (2026-08-27 PM 지시) ══════════════════════════════════════════════════════════════════════════ 카드 배경은 색이 아니라 **그림**이다 (slot_cards/gamecard_bg_*.webp / 원형 HUD). 세 버전이 같은 그림을 써서 2020 에서만 어울렸다 — 그 그림이 파랑이고 2020 이 파랑 계열이라 일치감이 있었다. 그린·럭셔리에서는 파란 원판만 혼자 떠 있었다. ★ 그림을 새로 만들지 않고 CSS 로 색상만 돌린다. 실측으로 그렇게 해도 되는 그림이다 — 평상시 판이 **단일 색상 226도(파랑)**, 호버 판이 **0도(빨강)** 로 각각 한 가지 색만 쓴다(채도 있는 픽셀의 대표 색상 = 중앙값과 원형평균이 일치). 색이 섞여 있지 않으니 hue-rotate 가 탁해지지 않는다. ★ 스킨마다 그림 2장을 더 만들면 4장이 늘고, 원본이 바뀔 때마다 다시 만들어야 한다. 값은 CSS Filter Effects 의 행렬을 그대로 구현해 미리 그려 보고 골랐다 (hue-rotate 는 진짜 HSL 회전이 아니라 근사 행렬이라 각도만으로는 결과를 못 맞춘다). 177도 회전에서 채도가 떨어져 올리브빛이 되던 것을 채도 보정으로 잡았다. 평상시 226도(파랑) -> 금 기준 --c-gold-a-rgb = 217,166,38 (색상 43도) 호버 0도(빨강) -> 버건디 ══════════════════════════════════════════════════════════════════════════ */ .gcv-bg { filter: hue-rotate(172deg) saturate(1.30); } .gcv:hover .gcv-bg { filter: hue-rotate(-10deg) saturate(1.00); } /* ══════════════════════════════════════════════════════════════════════════ 이 스킨 전용 — 히어로 배경 한 장(흑백 느와르) · 오른쪽 캐릭터 없음 ══════════════════════════════════════════════════════════════════════════ ★ 배경은 세 장 자리 모두 같은 그림이다(업체 요청 = 이 분위기 한 장). 돌아가는 것은 왼쪽 캐릭터뿐이다. 그래서 세 장이 **같은 모양으로** 보이게 맞춘다 — 하나만 흐리거나 하나만 줄어 보이면 회전 때마다 그림이 튄다. ★ 그림 = 2800×1000(2.8:1). 원본(2048×1024 · 인물이 가운데~오른쪽에 크게)을 오른쪽 끝에 붙이고 왼쪽을 어둠으로 이어 원본 왼쪽 640px 을 어둠으로 녹였다(2026-10-08 · 원본 그대로면 PC 에서 메인 문구가 인물 입·담배 위에 얹혔다). 기준 = 오른쪽 끝(100%) — 화면이 좁아질수록 왼쪽 어둠부터 잘려 나가고 인물은 늘 오른쪽에 붙는다. ★ 폰(≤768px)은 theme.css 가 히어로 배경·캐릭터를 통째로 끈다(로고 띠만) — 이 블록은 폰 화면에 영향이 없다. ★ 오른쪽 캐릭터를 숨긴다(PM 결정) — 그 자리가 인물 자리다. 왼쪽 캐릭터(딜러·샴페인·왕관)는 그대로 돈다. */ /* 흐림·확대 해제 — 흐림(3px)용으로 잡아 둔 -40px 여백도 거둔다 */ .hero-bg-slide { inset: 0; filter: none; background-position: 100% center; } /* 3번 자리(원본 표시 · contain + 가장자리 페이드)도 1·2번과 같은 모양(cover)으로 */ .hero-bg-slide--raw img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 100% center; transform: none; -webkit-mask-image: none; mask-image: none; } /* 디밍은 1·2번에만 걸리던 것 → 세 장 모두 같게(없음). 그림이 이미 어둡다(뒷좌석이 화면 대부분). */ .hero-bg-slide:not(.hero-bg-slide--raw)::after { display: none; } .hero-char--right { display: none; } /* 세트 3 왼쪽 = 왕관 → 주사위 (PM 지시 2026-10-08). 오른쪽(주사위)이 숨겨져 있어 주사위를 왼쪽 자리로 옮긴 것이다 — images/hero_obj_02.png(왼쪽 자리 파일)에 럭셔리 hero_obj_01.png(주사위)를 그대로 복사했다. 크기는 럭셔리가 주사위에 맞춰 둔 값(18.5% · 채움 0.421 · 비율 1.10)을 따른다(위 세트 3 의 17.0% 는 왕관 값). */ .hero-char-set--3 .hero-char--left { max-width: 18.5%; } /* 좁은 화면(769~1100px · 태블릿 세로 등) — 2026-10-08 터프 그림으로 바꾼 뒤 다시 잼(820·1024 캡처). ★ 세로 화면은 그림 높이에 맞춰 커져 인물 하나가 화면을 거의 다 채운다 → 인물을 문구 옆으로 비킬 공간이 없다. 왼쪽 캐릭터(딜러·샴페인·주사위)가 인물 얼굴 앞을 덮어 → 이 폭에서만 숨긴다. 문구가 인물 위에 오므로 어둡게 깐다. ★ 그림은 오른쪽 끝 기준(100%) 그대로 — 왼쪽은 그림에 구워 둔 어둠이라 잘려 나가도 잃는 것이 없다. ≤768px 은 히어로 배경 자체가 꺼진다(theme.css). */ @media (max-width: 1100px) { .hero-char--left { display: none; } .hero-bg-slide::after, .hero-bg-slide:not(.hero-bg-slide--raw)::after { content: ''; display: block; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); pointer-events: none; } }