/**************************************************************************************************************************************** W08(diamond) 로그인 게이트 — "Diamond Casino" 새 디자인 이식 (MNT 커런시 업체 제공, 2026-10-07) 업체가 Lovable(React + Tailwind v4 + Supabase)로 만든 로그인 페이지를 받았다. 스택이 전혀 달라 그대로 붙일 수 없고, 요청도 **"기존 로그인 기능과 백엔드는 그대로, 디자인만 교체"** 였다. → 마크업(_LoginPopup.cshtml)과 auth-ui.js 는 **한 줄도 건드리지 않고** 이 파일의 CSS 로만 외형을 바꾼다. 로그인/가입/추천인코드/중복확인/캡차/USDT 분기는 전부 기존 동작 그대로다. 🔴 원본 디자인의 색은 전부 `oklch()` 다. 그대로 쓰면 구형 웹뷰(카지노 유입의 상당수)에서 **색 선언이 통째로 무효**가 되어 글자/배경이 폴백으로 떨어진다. sRGB 로 변환해 hex 로 적는다. (변환값은 원본 oklch 를 그대로 계산한 것이라 디자인과 동일하다.) 🔴 `body.skin-w08` 스코프 — W08 은 현재 diamond 전용 스킨이다(리포·클러스터 전수 확인). 다른 스킨/테넌트에는 이 파일이 로드되지도 않는다. 원본 대비 의도적으로 다른 점(= 우리 화면 구조상 재현 불가/불필요): · 상단 헤더 바(로그인·회원가입 버튼) — 우리 로그인은 **전체화면 게이트**라 헤더가 가려진다. 원본 헤더의 역할(브랜드·언어)은 카드 상단 로고와 기존 언어 국기 띠가 이미 한다. · 이메일/표시이름 입력 — 우리는 **아이디** 로그인이고 가입은 추천인코드→가입폼 흐름이다(기능 유지 요청). *****************************************************************************************************************************************/ body.skin-w08 { --dc-primary: #008380; /* oklch(.54 .115 192) */ --dc-gold: #eec46d; /* oklch(.84 .116 84) */ --dc-gold-deep: #d9b56d; /* oklch(.79 .1 84) 버튼 아래 3D 그림자 */ --dc-lavender: #9362e4; /* oklch(.61 .19 298) 보조버튼 테두리 */ --dc-fg: #002829; /* oklch(.25 .045 198) */ --dc-fg-soft: #003a3b; /* oklch(.31 .064 197) */ --dc-muted: #4e6d6e; /* oklch(.51 .036 200) placeholder/라벨 */ --dc-border: #a1cfc9; /* oklch(.82 .049 186) */ --dc-card2: 181, 234, 229; /* oklch(.9 .055 188) 카드 그라디언트 하단 */ --dc-btn-top: #00aba4; /* oklch(.66 .13 190) */ --dc-btn-bot: #006966; /* oklch(.46 .099 192) */ --dc-ring: 35, 163, 157; /* oklch(.65 .105 190) focus ring */ } /*────────────────────────────────────────────────────────────────────────────── 1. 배경 — 카지노 아트리움 사진 기존에는 불투명 딥틸(--intro-overlay-bg)로 **메인을 가리기만** 했다(업체 요청 2026-09-27 "뒷배경은 보이지 않게"). 사진으로 덮어도 그 요청은 그대로 지켜진다 — 오히려 메인이 전혀 안 비친다. ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup { background: #e2fbf9 url('../img/login-atrium.webp') center center / cover no-repeat; } /* 사진 위에서 카드·국기띠가 또렷하도록 아주 옅은 톤만 깐다(원본 bg-background/10 과 같은 역할). */ /* 🔴 `position: fixed` 로 두면 안 된다 — `.intro-popup` 은 `overflow-y:auto` 인 스크롤 컨테이너다. 그 안의 fixed 자식은 레이아웃이 수렴하지 않아 렌더가 멈춘다(헤드리스 실측: 7분 넘게 미완료). 오버레이가 이미 화면 전체를 덮는 fixed 라, 기준을 오버레이로 두는 absolute 가 의미상으로도 맞다. */ body.skin-w08 .intro-popup::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,77,75,.22), rgba(0,40,41,.10) 38%, rgba(0,40,41,.28)); } body.skin-w08 .intro-inner {position: absolute; z-index: 1; background: transparent;} /*────────────────────────────────────────────────────────────────────────────── 2. 카드 — 유리질 패널 🔴 기존 `.intro-wrap::before` 는 main-bg.jpg 를 마스크로 깔고 있었다. 새 디자인에서 그 자리는 **안쪽 흰 테두리**(원본 .casino-card::before)다. 지우지 않고 용도를 바꾼다 — 지우면 W08 popup.css 의 선언이 그대로 살아나 사진 위에 또 다른 사진이 겹친다. ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup .intro-wrap { width: 500px; max-width: 100%; margin: 0 auto; padding: 8px 10px 4px; display: block; background: linear-gradient(150deg, rgba(255,255,255,.86), rgba(var(--dc-card2),.78)); border: 1px solid var(--dc-gold); border-radius: 26px; box-shadow: 0 0 0 5px rgba(255,255,255,.22), 0 24px 70px rgba(0,43,46,.30), inset 0 1px 1px rgba(255,255,255,.95); -webkit-backdrop-filter: blur(22px) saturate(130%); backdrop-filter: blur(22px) saturate(130%); overflow: visible; } body.skin-w08 .intro-popup .intro-wrap::before { content: ''; position: absolute; inset: 8px; background: none; opacity: 1; mask-image: none; -webkit-mask-image: none; border: 1px solid rgba(255,255,255,.48); border-radius: 20px; pointer-events: none; } /*────────────────────────────────────────────────────────────────────────────── 3. 브랜드 — 다이아몬드 마크 + 기존 골드 워드마크 `.intro-tit::before` 에는 이미 `--brand-logo`(= /brand/diamond/logo.png "DIAMOND ◆ CASINO ◆")가 들어간다. 원본 디자인의 워드마크와 같은 구성이라 그대로 두고, 그 **위에** 다이아몬드 마크만 얹는다. ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup .login-form .intro-tit, body.skin-w08 .intro-popup .join-form .intro-tit, body.skin-w08 .intro-popup .code-wrap .intro-tit { color: var(--dc-fg-soft); font-size: 25px; font-weight: 700; padding: 26px 25px 0; margin-bottom: 16px; } body.skin-w08 .intro-popup .login-form .intro-tit::before, body.skin-w08 .intro-popup .join-form .intro-tit::before { height: 46px; margin-bottom: 10px; } /* 다이아몬드 마크 — 로고 위 중앙. ::after 는 비어 있어 충돌하지 않는다. */ body.skin-w08 .intro-popup .login-form .intro-tit, body.skin-w08 .intro-popup .join-form .intro-tit {position: relative; padding-top: 74px;} body.skin-w08 .intro-popup .login-form .intro-tit::after, body.skin-w08 .intro-popup .join-form .intro-tit::after { content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 50px; height: 46px; background: url('../img/diamond-mark.svg') center / contain no-repeat; filter: drop-shadow(0 3px 5px rgba(10,35,48,.22)); } /*────────────────────────────────────────────────────────────────────────────── 4. 입력칸 — 흰 알약 + 청록 focus ring ──────────────────────────────────────────────────────────────────────────────*/ /* 🔴 `.check-list`(중복확인 버튼 동반 행)는 **li 자체가 flex 컨테이너**다 (auth-floating.css: `li.check-list{display:flex}` + 자식 `.floating-input-wrap` + `button`). li 에 테두리를 주면 **입력칸과 버튼을 통째로 감싼 테두리** 안에 입력칸 테두리가 또 생겨 이중이 된다. → 그 행은 li 를 건너뛰고 안쪽 `.floating-input-wrap` 만 칠한다. 가입폼 4개 행이 여기 해당한다 (아이디·닉네임·휴대폰·계좌번호). */ body.skin-w08 .intro-popup ul.intro-list > li.floating-field:not(.check-list), body.skin-w08 .intro-popup ul.intro-list > li.check-list > .floating-input-wrap { background: rgba(255,255,255,.92); border: 1px solid var(--dc-border); border-radius: 17px; box-shadow: 0 2px 3px rgba(20,60,62,.05); transition: border-color .2s ease, box-shadow .2s ease; } body.skin-w08 .intro-popup ul.intro-list > li.floating-field:not(.check-list):focus-within, body.skin-w08 .intro-popup ul.intro-list > li.check-list > .floating-input-wrap:focus-within { border-color: var(--dc-primary); box-shadow: 0 0 0 4px rgba(var(--dc-ring), .19); } /* 테두리/배경은 위 칸이 전담 — 안쪽 input 은 투명하게 비워 이중 테두리를 막는다. */ body.skin-w08 .intro-popup ul.intro-list > li input, body.skin-w08 .intro-popup ul.intro-list > li select { background: transparent; border: none; box-shadow: none; color: var(--dc-fg); } body.skin-w08 .intro-popup ul.intro-list > li label {color: var(--dc-muted);} /*────────────────────────────────────────────────────────────────────────────── 4-b. 로그인 입력칸 아이콘 — 원본 디자인의 Mail/Lock 자리 🔴 **로그인 폼에만** 넣는다. `.intro-list > li` 전체에 걸면 가입폼 12개 칸에도 전부 붙는다. 🔴 아이콘은 폰트 글리프(FontAwesome/remixicon) 대신 data URI SVG — 글리프 코드는 라이브러리 버전이 바뀌면 조용히 네모(tofu)로 떨어진다. 색은 --dc-primary 를 그대로 칠해 넣었다. ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup .login-form ul.intro-list > li.floating-field { position: relative; } body.skin-w08 .intro-popup .login-form ul.intro-list > li.floating-field::after { content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; opacity: .85; pointer-events: none; background: center / contain no-repeat; } body.skin-w08 .intro-popup .login-form ul.intro-list > li.floating-field:nth-child(1)::after {background-image: url("data:image/svg+xml,");} body.skin-w08 .intro-popup .login-form ul.intro-list > li.floating-field:nth-child(2)::after {background-image: url("data:image/svg+xml,");} /* 아이콘 자리만큼 글자/라벨을 민다 */ body.skin-w08 .intro-popup .login-form ul.intro-list > li.floating-field input, body.skin-w08 .intro-popup .login-form ul.intro-list > li.floating-field label {padding-left: 46px;} /*────────────────────────────────────────────────────────────────────────────── 4-c. 카드 아래 여백 — 버튼 밑이 휑하게 남는다(공용 .intro-btns 가 padding-bottom:20px + margin:15px) ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup .intro-btns {padding-bottom: 10px; margin-bottom: 8px;} /*────────────────────────────────────────────────────────────────────────────── 5. 버튼 주버튼(로그인·가입하기·코드확인) = 청록 그라디언트 + **골드 3D 아래선** 보조버튼(회원가입·로그인으로) = 흰 바탕 + 라벤더 테두리 ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup .intro-btns > button { height: 51px; padding: 0 18px; border-radius: 15px; font-size: 16px; font-weight: 700; transition: filter .2s ease, transform .2s ease; } body.skin-w08 .intro-popup .intro-login, body.skin-w08 .intro-popup .go-join, body.skin-w08 .intro-popup .ok-join { color: #fff; background: linear-gradient(180deg, var(--dc-btn-top), var(--dc-btn-bot)); border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 3px 0 var(--dc-gold-deep), 0 12px 22px rgba(0,60,58,.19); } body.skin-w08 .intro-popup .intro-join, body.skin-w08 .intro-popup .go-login { color: #4b2d85; background: rgba(255,255,255,.88); border: 1.5px solid var(--dc-lavender); box-shadow: 0 4px 16px rgba(80,40,160,.10); } @media (hover: hover) and (pointer: fine) { body.skin-w08 .intro-popup .intro-btns > button:hover {filter: brightness(1.06); transform: translateY(-1px);} body.skin-w08 .intro-popup .intro-join:hover, body.skin-w08 .intro-popup .go-login:hover {background: #f3eeff; filter: none;} } @media (prefers-reduced-motion: reduce) { body.skin-w08 .intro-popup .intro-btns > button:hover {transform: none;} } /* 중복확인 — 작은 보조 버튼이라 주버튼과 같은 톤의 납작한 형태로 맞춘다. */ body.skin-w08 .intro-popup ul.intro-list > li.check-list > button { background: var(--dc-primary); color: #fff; border: none; border-radius: 13px; } /*────────────────────────────────────────────────────────────────────────────── 6. 성인 이용 안내 — 원본 하단 문구(업체 번역 그대로 resx 에 넣었다) 마크업은 _LoginPopup 이 `Site:Brand:ShowLoginAgeNotice` 를 켠 테넌트에만 렌더한다. ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup .intro-age-notice { /* 위와 같은 이유로 absolute — 스크롤 컨테이너 안의 fixed 는 쓰지 않는다. */ position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; margin: 0; padding: 0 16px; width: 100%; max-width: 760px; text-align: center; font-size: 11px; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,.88); text-shadow: 0 1px 4px rgba(0,30,32,.75); pointer-events: none; } /* 모바일은 언어 국기 띠가 하단 가운데라(위 shared-bridge.css) 겹친다 — 그 위로 올린다. */ @media (max-width: 1024px) { body.skin-w08 .intro-popup .intro-age-notice {bottom: 68px;} } /*────────────────────────────────────────────────────────────────────────────── 7. 언어 국기 띠 — 사진 위에서도 읽히게 유리 알약으로 ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup .intro-lang-strip { z-index: 2; background: rgba(0,45,47,.42); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /*────────────────────────────────────────────────────────────────────────────── 8. 닫기(X) — 유리 카드 위에서 보이도록 색을 맞춘다(게이트일 땐 shared-bridge.css 가 숨긴다) ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup .intro-closeBtn {color: var(--dc-fg-soft); z-index: 3;} /*────────────────────────────────────────────────────────────────────────────── 9. 모바일 ──────────────────────────────────────────────────────────────────────────────*/ @media screen and (max-width: 768px) { body.skin-w08 .intro-popup .intro-wrap { width: calc(100% - 24px); margin: 0 12px; padding: 6px 4px 4px; border-radius: 22px; background: linear-gradient(150deg, rgba(255,255,255,.93), rgba(var(--dc-card2),.90)); } body.skin-w08 .intro-popup .login-form .intro-tit, body.skin-w08 .intro-popup .join-form .intro-tit {padding-top: 68px; font-size: 22px;} } /*────────────────────────────────────────────────────────────────────────────── 7. 회원가입 패널 — 원본 스킨이 전제한 "독립 페이지 패널"을 카드 안으로 되돌린다 (업체 신고 2026-10-07 "회원가입시 화면이 깨진다") 🔴 W08 원본 퍼블리싱에서 `.join-wrap` 은 `.intro-wrap`(로그인)과 **형제**인 1200px 전면 패널이었다. STX 공용 마크업은 둘을 **부모-자식**으로 넣는다(.intro-wrap > .join-wrap). 그래서 500px 카드 안에 1200px 패널이 들어가 **700px 가 밖으로 삐져나갔다** — 입력칸이 오른쪽으로 잘려 나가고 가로 스크롤바가 생긴다. 카드 폭과 무관하게 항상 깨진다 (리디자인 전 740px 시절에도 460px 넘쳤다 — 리디자인이 만든 버그가 아니라 드러낸 것). → 폭을 부모에 맞추고, 카드가 이미 제공하는 장식(민트 패널·흰 상자·배경사진)을 끈다. ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup .join-wrap { width: 100%; margin: 0; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; } body.skin-w08 .intro-popup .join-wrap::before { display: none; } body.skin-w08 .intro-popup .join-form { width: 100%; padding: 0 14px 8px; background: none; border-radius: 0; overflow: visible; } body.skin-w08 .intro-popup .join-form::before { display: none; } /*────────────────────────────────────────────────────────────────────────────── 8. 입력 행 — 스킨의 고정높이 flex 행을 공용 floating-label 계약에 맞춘다 🔴 w08 popup.css 는 `ul.intro-list > li {height:45px; display:flex}` 다(원본 퍼블리싱). 공용 auth-floating.css 는 li 를 **블록**으로 두고 입력칸 50px + 그 아래 `.field-hint` 를 전제한다. 둘이 부딪혀 ⒜ 입력칸(50px)이 행(45px)을 5px 삐져나오고 ⒝ `.field-hint` 가 **입력칸 옆**으로 밀려 글자가 겹쳤다("8자 이상…"이 칸 안 오른쪽에). → 비(非)중복확인 행만 블록으로 되돌린다. 중복확인 행은 flex 가 맞으므로(입력칸+버튼 가로배치) 고정높이만 푼다. 🔴 행을 블록으로 되돌리면 알약(배경·테두리)이 hint 까지 감싸므로, 알약을 **입력칸 자체**로 옮긴다. 라벨은 li 기준 absolute 라 행이 hint 만큼 길어지면 중앙이 어긋난다 → 입력칸 높이의 절반에 고정. ──────────────────────────────────────────────────────────────────────────────*/ body.skin-w08 .intro-popup ul.intro-list > li.floating-field:not(.check-list) { display: block; height: auto; background: none; border: none; box-shadow: none; } body.skin-w08 .intro-popup ul.intro-list > li.check-list { height: auto; } body.skin-w08 .intro-popup ul.intro-list > li.floating-field:not(.check-list) > input, body.skin-w08 .intro-popup ul.intro-list > li.floating-field:not(.check-list) > select { background: rgba(255,255,255,.92); border: 1px solid var(--dc-border); border-radius: 17px; box-shadow: 0 2px 3px rgba(20,60,62,.05); transition: border-color .2s ease, box-shadow .2s ease; } body.skin-w08 .intro-popup ul.intro-list > li.floating-field:not(.check-list) > input:focus, body.skin-w08 .intro-popup ul.intro-list > li.floating-field:not(.check-list) > select:focus { border-color: var(--dc-primary); box-shadow: 0 0 0 4px rgba(var(--dc-ring), .19); } /* 25px = 입력칸 높이(50px)의 절반 — base 규칙의 translateY(-50%) 와 합쳐 입력칸 중앙에 온다. */ body.skin-w08 .intro-popup ul.intro-list > li.floating-field:not(.check-list) > label { top: 25px; } body.skin-w08 .intro-popup ul.intro-list > li.floating-field > .field-hint { text-align: left; color: var(--dc-muted); } /* 🔴 빈