/* TERRA CASINO 메인 — 제작사 최종 시안(2026-09-22) 이식. 클래스/keyframes/변수 terra- 스코프. */ .terra-header *,.terra-hero-area *,.terra-footer *{box-sizing:border-box} /* ── W05 공용 layout.css 의 header 태그 규칙(width:1528px · ≤1380px 에서 position:fixed·height:69px) 무력화. terra 헤더는 자체 폭·높이·배경을 쓰므로, 공용 CSS 무수정(타 테넌트 무영향) 위해 여기서 방어 오버라이드. ── */ .terra-header{width:100%!important;max-width:none!important;position:relative!important;height:auto!important;top:auto!important;z-index:auto!important;margin:0 auto!important} @media(max-width:1380px){ .terra-header{position:relative!important;height:auto!important;top:auto!important;z-index:auto!important} body.brand-tera .container{margin-top:0!important} } :root{--terra-gold:#d6ad60;--terra-ink:#11151b}.terra-header{background:#27272b url('header-bg.png') center center/cover no-repeat;border-bottom:1px solid #8b785b}.terra-header-inner{max-width:1460px;min-height:230px;margin:auto;padding:15px 26px 16px;position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.terra-logo{display:block;width:min(540px,55vw);height:auto;mix-blend-mode:screen;object-fit:contain;margin:8px auto 2px}.terra-account{position:absolute;right:26px;top:16px;display:flex;gap:12px}.terra-btn{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:9px 15px;background:#15191e;border:1px solid var(--terra-gold);border-radius:6px;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}.terra-account .terra-btn{min-width:103px}.terra-account .terra-login{background:linear-gradient(130deg,#fff0b9,#d7a84f,#ffe4a0);color:#1c1508}.terra-nav{width:100%;display:flex;justify-content:space-between;align-items:end;gap:20px}.terra-nav-group{display:flex;gap:10px;flex-wrap:wrap}.terra-nav-right{justify-content:flex-end}.terra-hero-area{position:relative;isolation:isolate;background:#111d22;min-height:max(1550px,150vw)}.terra-hero-area::before{content:'';position:absolute;inset:0;z-index:-1;background:url('main-bg-v2.jpg') center top/contain no-repeat;pointer-events:none}.terra-container{max-width:1120px;margin:auto;padding:26px 20px 65px}.terra-hero-video{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#050505;border-radius:12px;border:1px solid #927a51}.terra-chips{display:flex;justify-content:center;gap:clamp(28px,6vw,110px);align-items:center;margin:30px auto 34px}.terra-chips{position:relative;z-index:2;isolation:isolate}.terra-chips a{position:relative;z-index:2;display:block;flex:0 0 auto}.terra-chip{width:min(260px,39vw);display:block;aspect-ratio:1;object-fit:contain;border-radius:50%;mix-blend-mode:normal;opacity:1;filter:drop-shadow(0 5px 12px rgba(0,0,0,.65));transition:transform .2s}.terra-chip:hover{transform:scale(1.04)}.terra-providers{background:#13161ce8;border:1px solid #313944;border-radius:14px;padding:20px;margin-bottom:45px}.terra-providers img{width:100%;height:auto;display:block;border-radius:7px}.terra-provider-note{font-size:12px;color:#c9c9c9;margin:10px 2px 0}.terra-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}.terra-panel{border:1px solid #39506a;background:#14263bea;border-radius:9px;overflow:hidden}.terra-panel h3{font-size:14px;margin:0;padding:14px 16px;border-bottom:1px solid #39506a}.terra-panel table{width:100%;border-collapse:collapse;font-size:12px}.terra-panel td{padding:10px 14px;border-bottom:1px solid #ffffff15}.terra-panel td:nth-child(2){text-align:right;font-weight:700}.terra-panel td:last-child{text-align:right;color:#a8b6c7}.terra-footer{background:#0d1622;border-top:1px solid #75613b;padding:25px 20px 38px}.terra-footer-inner{max-width:1120px;margin:auto;display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}.terra-footer strong{font-size:22px;color:#f4d48e}.terra-footer p,.terra-footer small{font-size:12px;color:#acb4be}.terra-footer-links{display:flex;gap:28px;flex-wrap:wrap;font-size:13px}.terra-footer-links a{display:block;margin:7px 0}.terra-notice{max-width:1120px;margin:0 auto;padding:0 20px 25px;font-size:12px;color:#f0d9a2}.terra-preview-label{font-size:11px;color:#c1ad86;text-align:right;margin-top:8px}@media(max-width:850px){.terra-header-inner{min-height:215px;padding:14px 12px}.terra-logo{width:min(470px,72vw);margin-top:45px}.terra-account{right:12px;top:10px}.terra-account .terra-btn{min-width:0}.terra-nav{gap:12px}.terra-nav-group{gap:5px}.terra-btn{font-size:11px;padding:8px;min-height:34px}.terra-container{padding:15px 12px 35px}.terra-chips{gap:18px}.terra-stats{grid-template-columns:1fr}.terra-providers{padding:8px}.terra-hero-area{min-height:max(1100px,150vw)}}@media(max-width:480px){.terra-header-inner{min-height:245px}.terra-logo{width:94%;margin-top:45px}.terra-nav{align-items:stretch;flex-direction:column}.terra-nav-group,.terra-nav-right{justify-content:center}.terra-account .terra-btn{font-size:11px}.terra-chips{margin:15px auto 20px}.terra-footer-inner{display:block}} /* 동영상 아래 신규 문구: 첫 방문 시 멀리서 다가와 제자리에 멈춤 */ .terra-intro-copy{position:relative;z-index:2;max-width:1040px;margin:0 auto;padding:58px 20px 52px;text-align:center;isolation:isolate;perspective:1000px;text-shadow:0 3px 14px rgba(0,0,0,.92),0 1px 3px #000} .terra-intro-copy::before{content:"";position:absolute;inset:12px 0;z-index:-1;background:radial-gradient(ellipse at center,rgba(6,13,19,.83),rgba(6,13,19,.55) 52%,transparent 78%);pointer-events:none} .terra-intro-copy p{margin:0;line-height:1.4;letter-spacing:.025em;transform-origin:center center;animation:terra-approachText 1.55s cubic-bezier(.19,.75,.25,1) both} .terra-intro-welcome{font-size:clamp(19.55px,2.975vw,35.7px);font-weight:800;color:#ffe2a0;letter-spacing:.065em!important;animation-delay:.12s!important} .terra-intro-korean{margin-top:17px!important;font-size:clamp(18.7px,2.72vw,31.45px);font-weight:750;color:#fff1d5;animation-delay:.72s!important} .terra-intro-premium{margin-top:6px!important;font-size:clamp(26.35px,4.505vw,54.4px);font-weight:900;letter-spacing:.045em!important;color:#ffdc85;animation-delay:1.24s!important;text-shadow:0 3px 15px #000,0 0 20px rgba(214,173,96,.35)} .terra-intro-invite{margin-top:16px!important;font-size:clamp(18.7px,2.635vw,31.45px);font-weight:750;color:#fff1d5;animation-delay:1.85s!important} @keyframes terra-approachText{0%{opacity:0;transform:translateZ(-480px) scale(.35);filter:blur(8px)}65%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translateZ(0) scale(1);filter:blur(0)}} @media(max-width:600px){.terra-intro-copy{padding:38px 10px 35px}.terra-intro-korean{margin-top:12px!important}.terra-intro-invite{margin-top:12px!important}} @media(prefers-reduced-motion:reduce){.terra-intro-copy p{animation:none;opacity:1;transform:none;filter:none}} /* 문장 순차 등장: 모든 문장이 도착한 뒤 3초 유지하고 처음부터 반복 */ .terra-intro-copy p{animation:none!important;opacity:0;transform:none;filter:blur(5px)} @media(prefers-reduced-motion:reduce){.terra-intro-copy p{opacity:1;transform:none;filter:none}} /* 2026-09-22: 원본 실버 로고·다크 메탈 배경 및 상단 버튼 색상만 수정 */ .terra-header{background:#111 url('header-bg.png') center center/cover no-repeat;border-bottom-color:#88858a} .terra-header-inner{min-height:255px;padding:7px 26px 10px;justify-content:flex-end} .terra-logo{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:auto;height:226px;max-width:43vw;object-fit:contain;margin:0;mix-blend-mode:normal} .terra-account{top:12px;right:26px} .terra-btn{background:linear-gradient(145deg,#242424,#0b0b0d);border:1px solid #aaa7a5;color:#f5f2ee;box-shadow:inset 0 1px 0 #ffffff18,0 2px 5px #0008} .terra-account .terra-login{background:linear-gradient(125deg,#f1f0ee,#b8b7b5 48%,#e4e3e1);color:#171717;border-color:#d0cecb} .terra-chip{mix-blend-mode:normal;opacity:1;filter:drop-shadow(0 5px 12px rgba(0,0,0,.65))} @media(max-width:850px){.terra-header-inner{min-height:250px;padding:7px 12px 10px}.terra-logo{top:7px;height:211px;max-width:56vw;margin:0}.terra-account{right:12px;top:10px}} @media(max-width:480px){.terra-header-inner{min-height:285px}.terra-logo{top:43px;height:192px;max-width:70vw;margin:0}.terra-nav{position:relative}.terra-account{top:8px}} /* 모바일 전용: 로고와 버튼 영역 분리. 데스크톱 스타일 변경 없음. */ @media(max-width:600px){ .terra-header-inner{height:auto!important;min-height:0!important;padding:10px 10px 15px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:0!important} .terra-account{position:relative!important;top:auto!important;right:auto!important;left:auto!important;align-self:flex-end!important;order:0!important;margin:0 0 6px!important;gap:8px!important} .terra-account .terra-btn{min-height:33px!important;padding:7px 11px!important;font-size:11px!important} .terra-logo{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;order:1!important;display:block!important;width:auto!important;height:auto!important;max-width:min(84vw,345px)!important;max-height:310px!important;object-fit:contain!important;margin:0 auto 12px!important;flex-shrink:0!important} .terra-nav{order:2!important;position:relative!important;width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:9px!important;margin:0!important} .terra-nav-group,.terra-nav-right{width:100%!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:7px!important} .terra-nav .terra-btn{min-height:34px!important;padding:8px 10px!important;font-size:11px!important;white-space:nowrap!important} } /* ── 프로바이더 롤링 (관리자 노출 카지노/슬롯 벤더, 마퀴 자동 롤링) ── */ .terra-prov-head{display:flex;align-items:center;gap:10px;margin-bottom:16px} .terra-prov-head h3{font-size:clamp(18px,2.4vw,26px);font-weight:800;color:#ffe2a0;margin:0} .terra-prov-viewport{overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .terra-prov-track{display:flex;gap:16px;width:max-content;animation:terra-prov-roll 45s linear infinite} .terra-prov-track:hover{animation-play-state:paused} @keyframes terra-prov-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .terra-prov-card{flex:0 0 auto;width:clamp(140px,15vw,180px);cursor:pointer;border:1px solid #313944;border-radius:12px;overflow:hidden;background:#0f1319;position:relative;transition:transform .18s,border-color .18s} .terra-prov-card:hover{transform:translateY(-4px);border-color:var(--terra-gold)} .terra-prov-card img{width:100%;height:clamp(150px,18vw,210px);object-fit:cover;display:block} .terra-prov-name{margin:0;padding:10px 8px;text-align:center;font-size:13px;font-weight:700;color:#f4ead2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .terra-prov-cat{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:5px;color:#111} .terra-prov-cat-casino{background:linear-gradient(120deg,#ffe4a0,#d7a84f)} .terra-prov-cat-slot{background:linear-gradient(120deg,#a9d4ff,#5aa0e6);color:#0a1a2a} .terra-prov-fallback{width:100%;height:auto;display:block;border-radius:7px} @media(max-width:600px){.terra-prov-card{width:clamp(120px,38vw,150px)}.terra-prov-card img{height:clamp(140px,42vw,180px)}} @media(prefers-reduced-motion:reduce){ .terra-prov-track{animation:none;flex-wrap:wrap;justify-content:center} .terra-prov-card[aria-hidden="true"]{display:none} } /* ===================================================================== 업체 수정요청 (PPT 2026-09-24) — 전부 .brand-tera 스코프. 🔴 W05 는 테라(zenith-user2) 와 mnt(몽골) 가 공유하는 스킨이다. 스코프를 빼면 mnt 화면이 같이 바뀐다 — 어떤 규칙도 body.brand-tera 밖으로 내보내지 말 것. ===================================================================== */ /* ── ⑤ 뒷배경 — **전 화면 재적용** (업체 3차 요청 2026-09-29) ── 이 자리는 세 번 뒤집혔다. 다음 사람이 헷갈리지 않게 경위를 남긴다. 1차(9/24) 카지노/슬롯 body 배경을 카지노룸 사진(casino-bg.jpg)으로 덮음 2차(9/24) 업체 "뒷배경은 변경 전으로" → 오버라이드 삭제, 공용 body-bg.png 로 원복 3차(9/29) 업체가 새 사진(casino-bg-v3.jpg)을 보내며 **"바디 전체"** 재적용 요청 🔴 3차는 **메인을 뺀 나머지**다(사용자 확정). 같은 날 반영한 제작사 B 시안의 메인 배경 (full-bg.jpg)은 **그대로 둔다** — 아래 .page-main 규칙이 이 body 규칙을 덮는다 (`body.brand-tera.page-main` 0,3,0 > `body.brand-tera` 0,2,0). 즉 메인 = full-bg.jpg(B 시안), 그 외 전 화면 = casino-bg-v3.jpg. 자산은 casino-bg.jpg(1차) · full-bg.jpg(B 시안) 둘 다 지우지 않고 남긴다 — 또 뒤집힐 때를 위해. 🔴 W05 는 mnt(몽골)와 공유하는 스킨이다. 반드시 body.brand-tera 스코프를 유지할 것. cover/fixed 는 공용 layout.css 의 body 규칙(center no-repeat fixed)과 같은 성격으로 맞췄다. */ body.brand-tera{background:#55524c url('casino-bg-v3.jpg') center center/cover no-repeat fixed} /* ── ③-2 갈색 배경의 위치 (업체 재요청 2026-09-24 2차) ── 1차에서는 게이트 "오버레이"(화면 전체)를 갈색 이미지로 깔았다 → 업체 재요청: **뒷배경(오버레이)은 변경 전으로 되돌리고, 갈색은 로그인창 "안"에 넣어달라.** 그래서 오버레이 배경 오버라이드는 삭제한다 — 공용 auth-popup.css 의 `background: var(--intro-overlay-bg, rgba(0,0,0,0.7))` 가 그대로 살아나 뒤 메인이 비친다(= 변경 전 모습). 갈색은 아래 .intro-inner 로 옮긴다. 🔴 오버레이에 배경을 다시 걸지 말 것 — 되돌림이 무효가 된다(회귀 가드가 검사한다). */ /* 로그인창(팝업 컨테이너) 안쪽 배경 = 업체 제공 갈색. 게이트(홈 자동노출)든 헤더 로그인버튼으로 연 팝업이든 같은 창이므로 .terra-login-gate 를 요구하지 않는다 — 두 경로에서 창 모양이 달라지면 그게 더 어색하다. 회원가입/추천인코드 탭도 같은 컨테이너를 쓴다. 이미지가 세로형(1440x2560)이라 cover 로 가운데를 쓰고, 로드 실패 시를 위해 평균색(#5c3e23)을 깔아둔다. 🔴 컨테이너만 칠하면 화면상 아무것도 안 바뀐다 — W05 popup.css 가 그 위의 패널들 (.intro-wrap #202020, .join-wrap #202020+테두리)을 칠해 컨테이너를 100% 덮기 때문이다(실측). 그래서 패널을 함께 비운다. 안 비우면 회원가입 탭은 .join-wrap 의 위쪽 여백(50px)에만 갈색이 띠처럼 보여서 오히려 잘못 만든 것처럼 보인다(렌더로 확인). 바깥 테두리(.intro-wrap 의 1px #fdf6b0)는 창 프레임이라 그대로 둔다. */ body.brand-tera .intro-popup .intro-inner { background: #5c3e23 url('gate-bg.jpg') center center / cover no-repeat !important; } body.brand-tera .intro-popup .intro-wrap { background: transparent !important; } body.brand-tera .intro-popup .join-wrap { background: transparent !important; border-color: transparent !important; /* 창 테두리는 바깥 .intro-wrap 하나로 충분하다 */ } /* 제목 띠(#252d37)도 비운다 — 갈색 위 회색 띠는 덧댄 것처럼 보인다. 글자는 그대로 둔다 (아래 ③-4 에서 "로그인" 탭 글자만 따로 지운다 — 회원가입은 뭘 하는 화면인지 알아야 한다). */ body.brand-tera .intro-popup .intro-tit { background: transparent !important; } /* ── ③-4 로그인 탭 제목 (업체 재요청: "로그인" 글씨 삭제 · 로고 확대) ── 제목 텍스트만 지우고 로고는 키운다. 로고는 공용 shared-bridge.css 의 .intro-tit::before(배경이미지)라 제목 요소를 지우면 로고까지 사라진다 → 요소는 남기고 글자만 font-size:0 으로 없앤다. 제목 띠 배경(#252d37)도 지운다 — 갈색 위에 회색 띠가 남으면 덧댄 것처럼 보인다. 🔴 .login-form 한정이다. 회원가입(.join-form) 제목은 "회원가입" 글자가 있어야 뭘 하는 화면인지 알 수 있다. */ body.brand-tera .intro-popup .login-form .intro-tit { margin: 0 auto 14px !important; padding: 26px 25px 4px !important; font-size: 0 !important; /* "로그인" 글씨 삭제 (::before 는 높이 기준이라 영향 없음) */ line-height: 0 !important; } /* 로고 확대 — 58px → 132px (팝업 폭 안에서 contain 이라 비율 유지) */ body.brand-tera .intro-popup .login-form .intro-tit::before { height: 132px !important; margin: 0 auto !important; } /* ── ③-1 게이트에서는 닫기(X) 를 감춘다 — 로그인/회원가입 외 이탈 경로 제거 ── */ body.brand-tera .intro-popup.terra-login-gate .intro-closeBtn { display: none !important; } /* ── ③-3 로고 ── 브랜드 로고가 가로형(600x190) → 신규 방패형(560x567, 거의 정사각) 으로 바뀌었다. 푸터는 .ft-con > img{width:100%} 라 그대로 두면 로고가 기둥처럼 커진다 → 상한을 건다. (로그인팝업은 height:58px + contain 이라 비율만 지키면 되므로 추가 규칙 불필요) */ body.brand-tera .ft-con > img { width: auto !important; max-width: 190px !important; height: auto !important; } /* ── ② 모바일 헤더 재배치 (요청 3건) ── 현재: [로그인·회원가입] / [로고] / [카지노·슬롯·쪽지함] / [충전·환전·포인트·공지·고객센터] 요청: 로고 40% 축소 · 카지노/슬롯/쪽지함을 좌측 위로 · 충전/환전/포인트를 그 자리로 결과: [카지노·슬롯·쪽지함 | 로그인·회원가입] / [로고(축소)] / [충전·환전·포인트·공지·고객센터] DOM 은 건드리지 않는다 — .terra-nav 를 display:contents 로 풀어 두 그룹을 헤더 직계로 올린 뒤 order 로만 재배치한다(데스크톱·mnt 무영향). */ @media (max-width: 600px) { body.brand-tera .terra-header-inner { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; row-gap: 7px !important; column-gap: 6px !important; } /* .terra-nav 를 레이아웃에서 제거 → 자식 두 그룹이 헤더의 플렉스 아이템이 된다 */ body.brand-tera .terra-nav { display: contents !important; } /* 1행 좌 — 카지노·슬롯·쪽지함 */ body.brand-tera .terra-nav-group:not(.terra-nav-right) { order: 0 !important; width: auto !important; flex: 0 1 auto !important; justify-content: flex-start !important; } /* 1행 우 — 로그인·회원가입 */ body.brand-tera .terra-account { order: 1 !important; margin: 0 0 0 auto !important; align-self: center !important; } /* 2행 — 로고: 기존 max-width min(84vw,345px)/max-height 310px 의 40% */ body.brand-tera .terra-header-inner > a { order: 2 !important; flex: 1 0 100% !important; text-align: center !important; } body.brand-tera .terra-logo { max-width: min(34vw, 138px) !important; max-height: 124px !important; margin: 2px auto 4px !important; } /* 3행 — 충전·환전·포인트·공지사항·고객센터 (카지노 줄이 비운 자리) */ body.brand-tera .terra-nav-right { order: 3 !important; flex: 1 0 100% !important; width: 100% !important; } } /* ── ③-5 로그인창 2단 배치 (업체 재요청 2026-09-25: 로고 좌측 크게 · 입력폼 우측) ── 시안: [ 로고(크게) | 아이디·비밀번호·로그인·회원가입 ] 좌우 2단. .login-form 의 자식이 정확히 3개(제목=로고 / 입력목록 / 버튼)라 그 자체를 그리드로 만들면 마크업 수정 없이 배치가 된다 — 로그인 팝업은 여러 스킨 공용이라 DOM 은 건드리지 않는다. 🔴 .login-form 한정이다. 회원가입(.join-form)은 입력칸이 많아 2단으로 쪼개면 무너진다. 🔴 데스크톱(≥720px)에서만 2단. 모바일은 기존 세로배치(로고 위 · 폼 아래)를 그대로 둔다 — 좁은 폭에서 2단으로 나누면 양쪽 다 못 쓸 만큼 좁아진다. */ @media (min-width: 720px) { /* 창을 2단이 들어갈 만큼 넓힌다(공용 기본 600px) */ body.brand-tera .intro-popup .intro-inner { width: min(920px, 94vw) !important; } /* 🔴 회원가입·추천인코드 탭은 같은 컨테이너를 쓴다 — 넓어진 창에서 입력칸이 920px 로 늘어나면 보기 싫으므로 기존 폭으로 되돌려 가운데 정렬한다(로그인 탭만 2단이라는 뜻). */ body.brand-tera .intro-popup .join-wrap, body.brand-tera .intro-popup .code-wrap { max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; } /* 🔴 로그인 탭이 패널 폭을 쓰게 만든다 — 이게 없으면 2단이 의도대로 안 나온다. 부모 `.intro-wrap` 이 `display:flex` 라서 `.login-wrap` 은 **flex 아이템 = shrink-to-fit** 이다. 즉 창(`.intro-inner`)을 920px 로 넓혀도 폼은 **내용 고유폭(약 591px)** 에 머문다. 게다가 그 고유폭은 fr 비율에서 거꾸로 산출된다(입력칸 고유폭 361px ÷ 6.5 × 10 + 간격·패딩) → **좌측 비율을 줄이면 폼 전체가 같이 좁아지고, 좌측 열은 그 35% = 194px 밖에 안 남는다.** 로고(`::before`)는 `background … / contain` 이라 높이·폭 중 좁은 쪽에 맞으므로 194px 열에서는 `height:286px` 를 적어놔도 **194px 로 줄어든다**(위아래 빈칸만 남음). 실측(Playwright, 1440px): width 지정 없을 때 폼 591px · 좌측 열 194px · 로고 194x197 → `width:100%` 지정 후 폼 920px · 좌측 열 309px · 로고 282x286(의도한 크기). ⚠️ 이래서 이 레이아웃은 CSS 만 읽고 판단하면 안 된다 — `docs/guides/테라_로그인_렌더검증.md` 참고. */ body.brand-tera .intro-popup .login-wrap { width: 100% !important; } /* 열 비율 5 : 5 (업체 최종 지정 — 3.5:6.5 도 보고 반반으로 확정). 🔴 `minmax(0, …)` 를 쓴다. 맨 `1fr` 은 자동 최소치가 min-content 라서 한쪽 내용이 넓으면 열이 밀려 비율이 깨진다 — 0 을 최소로 박아 지정 비율을 그대로 지킨다. */ body.brand-tera .intro-popup .login-form { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-items: center !important; column-gap: 16px !important; padding: 14px 10px 6px !important; } /* 좌측 열 = 로고. 제목 요소는 글자가 이미 font-size:0 이라 사실상 로고 상자다(③-4 참조). 두 행(입력목록·버튼)에 걸쳐 세로 가운데. */ body.brand-tera .intro-popup .login-form .intro-tit { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; margin: 0 !important; padding: 0 !important; } /* 로고. ::before 는 공용에서 `display:block` + `background … / contain` 이라 상자 폭 = 좌측 열 폭이고, 실제 그림은 그 안에 비율유지로 들어간다 → **높이와 열 폭 중 좁은 쪽**이 크기를 정한다. 로고는 560x567(거의 정사각)이라 높이 286px 를 채우려면 폭이 약 283px 필요하다. 위 `.login-wrap{width:100%}` 덕에 좌측 열이 442px(= (920 - 패딩20 - 간격16) x 50%) 이므로 높이가 기준이 된다 — 실측 282x286. 🔴 좌측 비율을 줄이거나 width:100% 를 빼면 열 폭이 기준이 되어 **286px 를 적어놔도 로고가 조용히 작아진다**(3.5:6.5 일 때 실제로 그랬다 — 좌측 열 309px 까지는 버티지만 width:100% 가 없으면 194px 로 떨어져 로고가 194x197 이 됐다). 둘 중 하나를 건드리면 반드시 렌더로 재측정할 것. ※ 5:5 에서는 좌측 열 442px 로 여유가 커서 로고를 더 키울 수도 있다(현재는 업체 확인 전이라 286px 유지). `30vw` 는 좁은 데스크톱(720~950px)에서 열 폭을 넘지 않게 하는 상한이다. */ body.brand-tera .intro-popup .login-form .intro-tit::before { height: min(286px, 30vw) !important; /* ③-4 의 132px → 좌측 열에서 크게 */ margin: 0 auto !important; } /* 우측 열 = 입력폼 + 버튼 */ body.brand-tera .intro-popup .login-form .intro-list { grid-column: 2 !important; grid-row: 1 !important; padding: 0 !important; } body.brand-tera .intro-popup .login-form .intro-btns { grid-column: 2 !important; grid-row: 2 !important; margin: 12px 0 0 !important; padding: 0 0 6px !important; } } /* ══════════════════════════════════════════════════════════════════════════ 제작사 최종 B 시안(2026-09-29 전달 ZIP) 반영 — 영상 아래 칩 · 문구 위치·크기 · 전체 배경 ──────────────────────────────────────────────────────────────────────── 1) 섹션 순서(영상 → 칩 → 문구)는 Main/Index.cshtml 마크업에서 바꿨다. 2) 환영문구 4줄 크기는 위 규칙에서 시안 값(기존 ×0.85)으로 교체했다. 3) 전체 배경(full-bg) — 🔴 **메인 페이지에만** 건다(사용자 결정 2026-09-29). 업체가 2026-09-24 에 "뒷배경은 변경 전으로" 요청해 **카지노/슬롯 body 배경을 공용으로 원복**해 둔 상태이고 회귀 가드(tests/terra-ui-requests.test.js)가 그걸 지킨다. `body.brand-tera` 를 직접 겨냥하면 그 원복이 무효가 되므로, 메인 전용 클래스(`body.page-main`, W05 _Layout 이 Main 컨트롤러에서만 붙인다)를 함께 요구해 **카지노/슬롯은 그대로 두고** 메인만 시안 배경으로 만든다. 자산은 시안의 full-bg.png(3.2MB) 를 JPEG(296KB)로 변환해 쓴다 — 투명픽셀 0 이라 알파가 필요 없다. 4) 시안은 배경 한 장이 헤더~푸터를 관통하므로 그 구간 배경을 메인에서만 투명 처리한다. ══════════════════════════════════════════════════════════════════════════ */ /* 메인 전용 배경 — 제작사 B 시안(2026-09-29). 위 body.brand-tera(casino-bg-v3)를 덮는다. 3차 요청이 "메인을 뺀 나머지"라 이 규칙이 메인을 지켜준다. 아래 투명 처리와 한 세트다. */ /* 🔴 PC 메인 배경 — 업체 전달 가로 이미지(2026-10-04). 이전 full-bg.jpg 는 **941x1672 세로형**을 `100% 100%` 로 늘려 써서 PC(1920x1080)에서 가로가 **3.16배** 늘어났다("눌린다" 신고). `cover` 로 비율을 유지한다 — 모니터 비율이 달라 가장자리는 잘리지만 늘어나지 않는다. `fixed` 는 shorthand 안에 **반드시 같이** 쓴다. shorthand 는 attachment 를 scroll 로 되돌리는데, 그러면 공용 basic.css 의 `html,body{height:100%}` 때문에 화면 아래부터 바탕색만 남는다(배경 끊김 재발). 아래에 별도 `background-attachment:fixed` 규칙이 또 있지만, 순서가 바뀌어도 깨지지 않게 여기에도 둔다. */ body.brand-tera.page-main{background:#111 url('pc-bg-v1.jpg') center center / cover no-repeat fixed} body.brand-tera.page-main .terra-header{background:transparent!important} body.brand-tera.page-main .terra-hero-area{background:transparent!important} body.brand-tera.page-main .terra-hero-area::before{display:none!important} body.brand-tera.page-main .terra-footer{background:transparent!important} /* 🔴 하단 빈 공간 제거(업체 신고 2026-09-29). `.terra-hero-area` 에는 시안에서 온 `min-height:max(1550px,150vw)` 가 있다. 시안은 히어로 배경 그림 (main-bg)을 그 영역 안에 깔아 두려고 높이를 확보한 것인데, 지금은 배경이 **페이지 전체 한 장(full-bg)** 이라 그 높이가 하는 일이 없다. 그대로 두면 **화면이 넓을수록**(150vw) 내용보다 영역이 커져서 입출금 현황판과 푸터 사이에 빈 공간이 생긴다(1900px 화면에서 약 650px). → 메인에서만 내용 높이를 따르게 한다. 카지노/슬롯 등 다른 페이지엔 이 영역 자체가 없다. */ body.brand-tera.page-main .terra-hero-area{min-height:0!important} /* 영상 영역만 아래로 — 상단 배경 그림과 겹치지 않게(시안 동일) */ body.brand-tera.page-main .terra-hero-area .terra-container > section:first-child{padding-top:44px} /* ══════════════════════════════════════════════════════════════════════════ 2026-10-04 테라 PPT 2건 🔴 이 파일 규칙은 전부 body.brand-tera 스코프여야 한다 — W05 는 mnt(몽골)와 공유하는 스킨이고 terra-ui-requests.test.js 가 그 스코프를 강제한다. ══════════════════════════════════════════════════════════════════════════ */ /* ④ 메인 배경이 아래쪽에서 끊기는 문제 (PPT 4장) 원인: W05 공용 basic.css 가 `html,body{height:100%}` 라 **body 상자 높이 = 뷰포트 높이**다. 위의 page-main 배경은 `background-size:100% 100%`(스크롤 첨부)라 그 상자에만 그려지고 아래로는 바탕색 #111 만 남는다. 실측(1600x1000): 문서 3075px / body 1000px → 정확히 1000px 지점에서 끊겼다. 🔴 size 를 cover 로 바꾸거나 body 높이를 푸는 방법은 각각 그림이 더 늘어나거나 레이아웃이 흔들린다. 첨부만 fixed 로 바꾸면 기준 영역이 **뷰포트**가 되어 스크롤해도 항상 꽉 찬다 — 첫 화면 모습은 그대로다. W05 공용 body(layout.css)와 메인 외 테라 페이지(body.brand-tera)도 이미 fixed 라 스킨 관례와 같다. */ body.brand-tera.page-main{background-attachment:fixed} /* ⑤ 보유머니 / 포인트 표시 (PPT 5장) 테라 전용 헤더 분기에는 잔액 표시가 아예 없었다(mnt 용 기존 W05 헤더에만 있었다). */ /* PC — 파트너 버튼 오른쪽. 같은 줄 terra-btn 들과 높이·테두리를 맞춘다. */ body.brand-tera .terra-wallet{display:inline-flex;align-items:center;gap:14px;margin-left:6px;padding:9px 16px; background:#15191e;border:1px solid var(--terra-gold);border-radius:6px; font-size:13px;font-weight:700;white-space:nowrap} body.brand-tera .terra-wallet > span{display:inline-flex;align-items:center;gap:6px} body.brand-tera .terra-wallet em{font-style:normal;font-weight:500;color:#c9b996} body.brand-tera .terra-wallet b{color:#f4d48e} body.brand-tera .terra-wallet-mo{display:none} /* 모바일 — 로고 "CASINO" 줄 양옆(업체 지정). 🔴 전환점은 위 모바일 헤더 재배치와 **같은 600px** 이어야 한다. 다른 값을 쓰면 601~850px 구간에서 헤더는 PC 배치인데 지갑만 모바일 배치가 되어 어긋난다. 🔴 절대배치 전용 — 흐름(flow)에 끼우면 메뉴 두 줄이 통째로 아래로 밀린다(렌더 대조로 확인). 로고 좌우가 비어 있어 글자가 로고를 가리지 않는다. 터치를 가로채지 않도록 pointer-events 를 끈다. */ @media (max-width: 600px) { body.brand-tera .terra-wallet{display:none} /* 🔴 기준은 **로고 앵커**다(헤더 전체가 아니라). 헤더 기준 top:46% 로 뒀더니 방패 한가운데에 떠서 업체가 "원하는 위치가 아니다"라고 신고했다(2026-10-04). 로고 기준이면 로고 크기가 바뀌어도 따라온다. */ body.brand-tera .terra-header-inner > a{position:relative} /* 로고 이미지(1242x1266) 안에서 "— CASINO —" 띠는 세로 **93.9%** 지점이다(픽셀 분석). 🔴 앵커 상자에는 로고의 상하 여백(margin 2px/4px)이 포함돼 이미지보다 6px 크다 → 앵커 기준으로는 **91.1%** 가 그 줄이다(실측: 앵커 130px, 이미지 124px). 로고 여백을 바꾸면 이 값도 같이 봐야 한다. 글자 **중앙**을 그 줄에 맞춘다 — translateY(-50%) 라 글자 높이가 바뀌어도 줄에 계속 붙는다. */ /* 🔴 세로 2줄 → **가로 1줄**(머리글자 + 숫자). 업체 요청이 "숫자 앞에 M/P" 라 글자가 숫자 왼쪽에 와야 한다. 가로 1줄이면 높이가 줄어 CASINO 줄을 덜 가린다. */ body.brand-tera .terra-wallet-mo{display:flex;flex-direction:row;align-items:baseline;gap:3px; position:absolute;top:91.1%;transform:translateY(-50%);z-index:2; font-size:11px;line-height:1.3;white-space:nowrap;pointer-events:none} /* 🔴 화면 끝(left/right:6px)이 아니라 **로고 바로 옆**에 붙인다 — 업체 요청 2026-10-04 ("지금은 너무 떨어져 있다"). 로고는 전체폭 앵커 안에서 가운데 정렬이므로 중앙(50%)에서 로고 반폭만큼 벌린 뒤 6px 만 띄운다. 로고 반폭 = min(17vw, 61px): 보통은 max-height:124px 가 걸려 폭이 약 122px 로 고정되고 (1242/1266 비율), 320px 급 좁은 기기에서만 max-width:34vw 가 먼저 걸린다. 두 경우를 min() 이 함께 덮는다. 🔴 "— CASINO —" 띠는 로고 폭의 96% 를 차지한다(픽셀 분석) — 글자 옆 = 사실상 로고 옆이다. */ body.brand-tera .terra-wallet-mo.is-left{right:calc(50% + min(17vw, 61px) + 6px);left:auto} body.brand-tera .terra-wallet-mo.is-right{left:calc(50% + min(17vw, 61px) + 6px);right:auto} /* 색은 업체 요청대로 **노랑 단색**. 로고·배경이 어두워 그림자 한 겹만 깔아 또렷하게 한다. 머리글자와 숫자를 같은 색으로 둔다(요청: "심플하게"). */ body.brand-tera .terra-wallet-mo em, body.brand-tera .terra-wallet-mo b{color:#ffd400;text-shadow:0 1px 2px rgba(0,0,0,.85)} body.brand-tera .terra-wallet-mo em{font-style:normal;font-weight:700} body.brand-tera .terra-wallet-mo b{font-size:12px} } /* ④-보완 푸터 가독성 (업체 확인 2026-10-04) 배경을 fixed 로 바꿔 아래까지 이어지면서, 메인에서 투명 처리된 푸터 문구가 밝은 배경 위에 놓여 전보다 읽기 어려워졌다(이전에는 배경이 끊긴 자리의 단색 바탕 덕에 또렷했다). 🔴 배경을 다시 가리면 "끊긴다"는 원래 신고로 되돌아간다 — 그래서 **반투명 막**만 얹는다. 투명도는 배경 무늬가 비치는 선(0.55)으로 두어 시안의 "한 장으로 관통" 느낌을 유지한다. 🔴 **대상은 `.terra-footer` 가 아니다.** 그 클래스는 시안 HTML 에만 있던 이름이고 실제 푸터 파셜 (W05 공용 `_Footer.cshtml`)은 `