/* ============================================================================
   W06 브랜드별 글꼴 오버라이드 — 레이아웃에서 **마지막에** 로드한다.

   🔴 W06 은 크라운·긴자 **공용 스킨**이다. 스킨 기본 글꼴(basic.css 의
      `*{font-family:"EsaManru",serif}` + GmarketSans 6규칙)을 직접 바꾸면 크라운까지 바뀐다.
      그래서 `body.brand-<브랜드>` 로 스코프한다(_Layout 이 브랜드 클래스를 붙인다).

   🔴 `body.brand-X *` 가 필요한 이유: 기본 규칙이 **전체선택자 `*`** 라 상속을 이긴다.
      `body.brand-X` 하나만 걸면 자식들은 여전히 `*` 의 EsaManru 를 쓴다.

   🔴 그런데 `*` 로 덮으면 **아이콘 폰트가 깨진다**(remixicon·Font Awesome 은 글리프를
      글꼴로 그린다 — 본문 글꼴을 씌우면 네모·엉뚱한 글자가 나온다).
      그래서 아이콘 요소를 `:not()` 으로 **매칭 자체에서 제외**한다.
      (제외된 요소는 이 규칙이 아예 안 붙으므로 아이콘 CSS 가 그대로 이긴다 — 우선순위 싸움이 아니다.)
      remixicon: `[class^="ri-"]` · `[class*=" ri-"]` / FA: `.fa` `.fas` `.far` `.fab` `.fa-*`
   ============================================================================ */

/* 긴자(ginza) — 업체요청 2026-10-07: 전 화면 Noto Sans KR.
   Noto Sans KR 자체는 basic.css 가 이미 구글에서 @import 하고 있다(추가 로드 없음). */
body.brand-ginza,
body.brand-ginza *:not([class*="ri-"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: 'Noto Sans KR', sans-serif;
}

/* ============================================================================
   긴자 — 상단 메뉴 (업체요청 2026-10-07, PPT 2장)
   ============================================================================ */

/* 🔴 데스크톱만. 모바일(≤1024px)은 스킨의 기존 `.order-1~6` 규칙이 지배하므로 건드리지 않는다
      (여기서 같이 바꾸면 모바일 세로 메뉴 순서까지 흔들린다). */
@media (min-width: 1025px) {
    /* 순서 — 시안: 충전·환전·카지노·슬롯·공지사항·고객센터·지인정산·이벤트·출석체크·포인트전환.
       🔴 `<li>` 에 data-nav 식별자를 새로 달아 지정한다(마크업은 공용이라 순서를 직접 못 바꾼다).
          목록에 없는 항목(스포츠·마이크로게이밍·로그아웃)은 뒤로 보낸다. */
    body.brand-ginza ul.menu > li[data-nav="charge"]      { order: 1; }
    body.brand-ginza ul.menu > li[data-nav="exchange"]    { order: 2; }
    body.brand-ginza ul.menu > li[data-nav="casino"]      { order: 3; }
    body.brand-ginza ul.menu > li[data-nav="slot"]        { order: 4; }
    body.brand-ginza ul.menu > li[data-nav="notice"]      { order: 5; }
    body.brand-ginza ul.menu > li[data-nav="customer"]    { order: 6; }
    body.brand-ginza ul.menu > li[data-nav="referral"]    { order: 7; }
    body.brand-ginza ul.menu > li[data-nav="event"]       { order: 8; }
    body.brand-ginza ul.menu > li[data-nav="attendance"]  { order: 9; }
    body.brand-ginza ul.menu > li[data-nav="point"]       { order: 10; }
    body.brand-ginza ul.menu > li[data-nav="sports"]      { order: 11; }
    body.brand-ginza ul.menu > li[data-nav="microgaming"] { order: 12; }
    body.brand-ginza ul.menu > li[data-nav="logout"]      { order: 13; }
}

/* 🔴 메뉴 글자색은 **바꾸지 않는다**. 시안(PPT 2장)의 빨간 글씨는 "이 색으로 해달라"가 아니라
      **순서·추가 항목을 눈에 띄게 적어 둔 주석**이었다(업체 확인 2026-10-07).
      한 번 빨강(#ff3b30)으로 넣었다가 되돌렸다 — 다시 넣지 말 것. */

/* ============================================================================
   긴자 — 로그인/추천인 팝업에 CI 로고 (업체요청 2026-10-07, PPT 1장)
   "로그인창을 키우고 로고를 넣어달라" + "모든 로고 적용영역에 전달한 로고로 교체".

   🔴 로고 표시 자체는 CSS 가 아니라 ConfigMap 의 `Site__Brand__ShowLoginLogo=true` 가 켠다
      (user3.env). 공용 파셜 _LoginPopup 이 그 값으로 `.intro-logo` 블록을 렌더한다.
   🔴 W06 스킨에는 `.intro-logo` 규칙이 **하나도 없다** — 켜기만 하면 에셋 원본 폭(560px)이
      그대로 나와 패널(폼 컬럼 300px)을 넘치고 `overflow:hidden` 에 잘린다. 그래서 여기서 크기를 준다.
   🔴 크라운도 같은 W06 을 쓰므로 반드시 `body.brand-ginza` 스코프 (크라운은 ShowLoginLogo 미설정).

   창 높이는 **직접 지정하지 않는다** — `.intro-wrap` 은 `height:auto` 라 로고 블록이
   들어간 만큼 알아서 늘어난다. 데스크톱 기준 약 360px → 약 516px (시안의 "+45%" 와 일치).
   (세로만 늘고 가로 760px 는 그대로 — 시안 요구와 같다.) */
body.brand-ginza .intro-popup .intro-logo {
    position: relative;
    margin: 0 auto 18px auto;
    padding: 0;
    width: 100%;
    text-align: center;
}
body.brand-ginza .intro-popup .intro-logo > img {
    display: inline-block;
    width: 190px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* 좁은 화면에서는 패널 자체가 420px 로 줄어드니 로고도 같이 줄인다. */
@media (max-width: 470px) {
    body.brand-ginza .intro-popup .intro-logo > img { width: 150px; }
    body.brand-ginza .intro-popup .intro-logo { margin-bottom: 14px; }
}

/* ============================================================================
   긴자 — 헤더 로고 확대 (업체요청 2026-10-08 PPT "로고크기 약간만 더 키워주세요")
   ============================================================================
   🔴 스킨 기본 상한은 layout.css 의 `.logo > img {max-height:102px; max-width:390px}` 인데
      **크라운과 공용**이라 거기서 올리면 크라운 헤더까지 커진다 → 브랜드 스코프로 덮는다.
   🔴 가로형 로고(768×204, 비율 3.76)는 **높이 상한이 먼저 걸린다**(102/204=0.500 < 390/768=0.508).
      그래서 max-height 만 올리면 곧 가로 상한에 막힌다 — **둘을 같이** 올려야 실제로 커진다.
      96/204=0.471 < 366/768=0.477 → 362×96.
   🔴 **2026-10-12 업체 재요청으로 축소** — "로고 이미지를 조금 줄여달라"(PPT 1장).
      10-08 에 키운 444×118 → **362×96**(약 -19%). 스킨 기본(384×102)보다도 살짝 작다.
      같은 자리를 두 번 조정했으므로, 또 요청이 오면 **이 값 하나만** 고칠 것(중복 규칙 금지).
   🔴 데스크톱만. 모바일(≤1024)은 `.top-notice`·`.before-tnb` 가 로고 66px 을 전제로
      `top:80px/112px` 절대배치라 건드리지 않는다. */
@media (min-width: 1025px) {
    body.brand-ginza .logo > img { max-height: 96px; max-width: 366px; }
}

/* ============================================================================
   긴자 — 메인 히어로 배너를 아래 카드와 같은 컨테이너에 맞춤
   (업체요청 2026-10-08 PPT: A 영역이 B·C 와 좌우가 맞아야 한다)
   ============================================================================
   🔴 스킨 원본은 히어로를 **전체폭**으로 깐다(`.hero-inner{width:100%}`). 크라운 배너는 그 전제로
      만들어져 괜찮지만, 긴자 배너는 고정 비율 이미지라 넓은 화면에서 혼자 끝까지 늘어나
      아래 `.container`(1430px 중앙)와 좌우가 어긋났다(실측 1898px 화면에서 히어로만 L0 W1898).
   🔴 수치는 `.container` 와 **같은 값**을 쓴다(layout.css:106 width:1430 / padding:0 15px,
      그리고 106행과 짝인 1460px 미디어쿼리에서 100%). 둘이 갈라지면 다시 어긋난다. */
body.brand-ginza .hero-inner { width: 1430px; padding: 0 15px; }
@media (max-width: 1460px) {
    body.brand-ginza .hero-inner { width: 100%; }
}

/* 🔴 모바일만 좌우 여백 제거 — 업체요청 2026-10-26 "모바일에서 배너가 작게 보인다".
   실측(360px 폭, 기존 공용 배너 1920x480): 배너가 330x82.5 로 화면 높이의 10% 뿐이었다.
   여백 30px 을 걷어 전체폭으로 깔면 360 폭이 되고, 전달받은 배너 비율(1280x362)과 합쳐
   82.5px → 101.8px 로 커진다. **이 이상은 가로폭이 화면에 묶여 있어 비율이 한계**다
   (더 키우려면 세로가 긴 모바일 전용 이미지가 필요 — 업체 회신 대기).
   위 1460px 규칙과 분리한 건 태블릿~소형 데스크톱에서는 .container 와 좌우를 맞춰야 하기 때문이다. */
@media (max-width: 1024px) {
    body.brand-ginza .hero-inner { padding: 0; }
}

/* ============================================================================
   긴자 — 모바일 단일 통합 메뉴 (업체요청 2026-10-26, 센텀식)
   ============================================================================
   통합 드로어(.mo-leftMenu)를 하나만 쓰므로, 좌측 아이콘(.mo-gamebar)을 햄버거로 바꾸고
   우측 메뉴 아이콘(.mo-bar)은 숨긴다. 🔴 W06 공용이라 body.brand-ginza + 모바일에만 적용
   (크라운·쿨·팡팡은 2드로어 그대로). 통합 드로어 렌더 자체는 UnifiedMobileMenu 플래그가 가른다. */
@media (max-width: 1024px) {
    body.brand-ginza .mo-bar { display: none !important; }
    body.brand-ginza .mo-gamebar > img { display: none; }
    body.brand-ginza .mo-gamebar::before {
        content: ""; display: block; width: 28px; height: 22px; margin: 9px auto;
        background:
            linear-gradient(#e5c06a, #e5c06a) left top    / 100% 3px no-repeat,
            linear-gradient(#e5c06a, #e5c06a) left center / 100% 3px no-repeat,
            linear-gradient(#e5c06a, #e5c06a) left bottom / 100% 3px no-repeat;
    }
}

/* ============================================================================
   긴자 — 모바일 상단 정보/로그인 바 위치 + 언어 드롭다운 (업체요청 2026-10-26)
   ============================================================================
   🔴 긴자는 NoticeBelowHeader=true 라 헤더 안 .top-notice 가 없다 → 스킨 기본 top:112px 절대배치가
      로고 아래에 빈 밴드(≈76~112)를 남긴다("위 빈 영역만큼 이동"). 그 자리로 끌어올리고 헤더 높이도 줄인다.
   🔴 로그인 후 유저정보(.pc-tnb-info)는 기본이 2열 래핑(li width 50%) → 3항목이 2줄로 쪼개진다.
      긴자는 한 줄(nowrap + flex)로 정렬("한줄에 정렬해주세요").
   🔴 우측 .mo-bar(≡)를 숨겼으므로(통합 메뉴) 언어 드롭다운을 그 자리(far-right)로 옮겨 로고와 안 겹치게. */
@media (max-width: 1024px) {
    body.brand-ginza .before-tnb { top: 76px; }
    body.brand-ginza .pc-tnb { top: 76px; }
    body.brand-ginza header { min-height: 112px; }
    body.brand-ginza header:has(.pc-tnb) { min-height: 118px; }
    body.brand-ginza ul.pc-tnb-info { flex-wrap: nowrap; gap: 3px; }
    body.brand-ginza ul.pc-tnb-info > li { width: auto; flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
    body.brand-ginza .mo-lang-dropdown { right: 12px; }
    /* 🔴 통합 메뉴로 우측 .mo-bar(≡)를 숨기면 .hd-top(justify:space-between)에서 로고가 우측으로 밀려
       언어 국기와 겹친다 → 로고를 절대 중앙배치해 양끝(햄버거·국기)과 분리한다. */
    body.brand-ginza .hd-top > .logo { position: absolute; left: 50%; transform: translateX(-50%); }

    /* 🔴 하단바 순서: 충전·환전·[홈]·고객센터·로그아웃 (업체요청 2026-10-26: 로그아웃·고객센터 자리 변경).
       충전/환전/홈 은 order 0(DOM 순서) 유지, 고객센터·로그아웃만 뒤로 정렬해 둘을 맞바꾼다. 홈은 3번째=중앙 유지. */
    body.brand-ginza .mo-ft-menu > li[data-nav="customer"] { order: 4; }
    body.brand-ginza .mo-ft-menu > li.btn-logout,
    body.brand-ginza .mo-ft-menu > li.hd-login { order: 5; }
}

/* ============================================================================
   홈런(homerun) — 게임 그림 크게 (업체요청 2026-10-22: "유저페이지 게임이미지 크기를 크게")
   🔴 공용 스킨이라 body.brand-homerun 으로만 덮는다. 카드 비율·이름 오버레이는 그대로 두고 칸 수만 줄인다.
   - 카지노·슬롯 업체 카드: PC 4칸→3칸(약 320→450px), 태블릿 3칸→2칸. 휴대폰은 이미 2칸이라 간격만 줄인다.
   - 게임 목록 팝업: 폭 1200→1400px, 6칸→4칸, 태블릿 4칸→3칸, 휴대폰 3칸→2칸. 게임명 글자도 12→15px(휴대폰 13px).
   ============================================================================ */
body.brand-homerun ul.casino-list {grid-template-columns: repeat(3, 1fr);}
body.brand-homerun .game-popup-inner {max-width: 1400px;}
body.brand-homerun .game-popup-list > li {width: calc(100% / 4 - 11.25px);}
/* 타일이 1.8배 커져 기본 12px 게임명이 상대적으로 너무 작다 → 함께 키운다(가드 game-popup-name-selector: 타일을 꾸미면 게임명도) */
body.brand-homerun .game-popup-list > li > .game-name {padding: 10px; font-size: 15px;}
@media (max-width: 1024px) {
    body.brand-homerun ul.casino-list {grid-template-columns: repeat(2, 1fr);}
    body.brand-homerun .game-popup-list > li {width: calc(100% / 3 - 10px);}
}
@media (max-width: 693px) {
    body.brand-homerun ul.casino-list {gap: 8px;}
}
@media (max-width: 640px) {
    body.brand-homerun .game-popup-list > li {width: calc(100% / 2 - 7.5px);}
    body.brand-homerun .game-popup-list > li > .game-name {padding: 8px; font-size: 13px;}
}