/* 마이크로게이밍 전용 탭 — 메뉴 로고(.mg-logo) + /Microgaming 페이지(.microgaming-page). 전 스킨 공용. */

/* 로고: 투명 SVG 의 알파(모양)만 오려서 currentColor 로 채운다 → 메뉴 글자색·호버색·밝은/어두운 배경을 자동으로 따라간다. */
.mg-logo {
    display: inline-block;
    height: 1.85em;           /* 메뉴 글자(1em)보다 크게 — 메뉴 칸이 넉넉해서 1.1em 은 로고가 너무 작아 보였다 */
    aspect-ratio: 603 / 152;   /* SVG viewBox(실제 로고 영역) 비율 */
    background-color: currentColor;
    -webkit-mask: url(/img/common/microgaming-logo.svg) no-repeat center / contain;
            mask: url(/img/common/microgaming-logo.svg) no-repeat center / contain;
    vertical-align: middle;
}
/* 원래 색(초록) 그대로 — 어두운 배경에서만 쓴다 */
.mg-logo--color {
    background: url(/img/common/microgaming-logo.svg) no-repeat center / contain;
    -webkit-mask: none;
            mask: none;
}
/* 스크린리더 전용 텍스트 — 스킨 자체 .sr-only 와 충돌하지 않도록 mg- 접두어 */
.mg-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* /Microgaming 페이지 */
/* 로고 + 서브탭 한 띠 — PC: 한 줄(로고 왼쪽, 탭 오른쪽) / 모바일: 두 줄(윗줄 로고, 아랫줄 탭 반반). 색은 스킨과 무관한 자체 값이라 밝은 스킨에서도 같다. */
.microgaming-page .mg-band {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: #0f1b14; border-radius: 10px; min-height: 56px; padding: 8px 20px; margin: 0 0 16px;
    box-sizing: border-box;
}
.microgaming-page .mg-band-logo { height: 30px; width: auto; flex: 0 0 auto; }
.microgaming-page .mg-tabs { display: flex; gap: 8px; margin: 0; }
.microgaming-page .mg-tab {
    cursor: pointer; font: inherit; font-size: 15px; line-height: 1;
    padding: 10px 20px; border-radius: 20px; color: #fff;
    background: #2b302d; border: 1px solid #4a514c;
}
.microgaming-page .mg-tab.is-active { background: #18db72; border-color: #18db72; color: #062b16; font-weight: 600; }
.microgaming-page .mg-panel[hidden] { display: none; }
.microgaming-page .mg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }   /* 카드가 1개뿐이라 왼쪽에 작게 붙어 보이지 않도록 가운데 */
.microgaming-page .mg-list > li {
    cursor: pointer; width: 360px; max-width: 100%; border-radius: 10px; overflow: hidden;
    background: #1b201d; color: #fff; border: 1px solid #4a514c;
}
.microgaming-page .mg-list > li:hover { border-color: #18db72; }
.microgaming-page .mg-list .mg-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.microgaming-page .mg-list .mg-card-head img { height: 28px; width: auto; }
.microgaming-page .mg-list .mg-card-tit { margin: 0; font-size: 14px; }
.microgaming-page .mg-list .mg-card-banner { display: block; position: static; width: 100%; height: auto; }
.microgaming-page .mg-empty { padding: 40px 0; text-align: center; opacity: .7; }
@media (max-width: 600px) {
    .microgaming-page .mg-list > li { width: 100%; }
    .microgaming-page .mg-band { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
    .microgaming-page .mg-band-logo { height: 26px; }
    .microgaming-page .mg-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    /* 라벨이 길다("마이크로게이밍 그랜드 카지노") — 반반 칸에서 두 줄로 접히게 허용하고 가운데 정렬 */
    .microgaming-page .mg-tab { font-size: 13px; padding: 9px 8px; line-height: 1.25; text-align: center; word-break: keep-all; text-wrap: balance; }   /* 어절 단위로 접어 "카지 / 노" 처럼 한 글자만 떨어지지 않게 */
}

/* 🔴 이름 주의: .mg-card 는 ST10/venus/dragon 메인이 이미 쓰는 클래스(min-height 220px)라 충돌한다 → mg-vtile.
   이미지 카드 자리(W06 모바일 게임 드로어 등) — 배너 이미지가 없는 스킨에서 로고를 카드처럼 보여준다 */
.mg-vtile {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 64px; box-sizing: border-box;
    background: #0f1b14; border-radius: 6px;
}
.mg-vtile .mg-logo { height: 32px; }
.mg-vtile--tile { aspect-ratio: 330 / 200; min-height: 0; }
/* 타일형(hangang 모바일): 다른 타일(이미지+이름+바로가기)과 같은 구조 — 로고 / 이름 / 하단 입장 줄 */
.mg-vtile--tile { flex-direction: column; gap: 4px; padding: 10px 6px 24px; position: relative; overflow: hidden; border: 1px solid #5b2a8f; background: linear-gradient(#10261b, #0b1510); }
.mg-vtile--tile .mg-logo { height: auto; width: 76%; aspect-ratio: 603 / 152; }
.mg-vtile-name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; text-align: center; }
.mg-vtile-go { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; font-size: 11px; text-align: center; color: #fff; background: linear-gradient(90deg, #5b2a8f, #8b3fd6); }
.mg-vtile--gnb { width: 140px; min-height: 36px; }
.mg-vtile--gnb .mg-logo { height: 22px; }

/* 슬롯 게임 목록(인라인) */
.microgaming-page .mg-slot-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 12px; }
.microgaming-page .mg-slot-count { font-size: 13px; opacity: .7; }
.microgaming-page .mg-search {
    width: 240px; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: #fff;
    padding: 8px 12px; border-radius: 8px; background: #2b302d; border: 1px solid #4a514c;
}
.microgaming-page .mg-status { padding: 24px 0; text-align: center; opacity: .7; }
.microgaming-page .mg-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.microgaming-page .mg-games > li {
    position: relative; cursor: pointer; overflow: hidden; border-radius: 10px; aspect-ratio: 3 / 4;
    background: #1b201d; border: 1px solid #4a514c;
}
.microgaming-page .mg-games > li[hidden] { display: none; }
.microgaming-page .mg-games > li:hover { border-color: #18db72; }
.microgaming-page .mg-game-thumb { display: block; position: static; width: 100%; height: 100%; object-fit: cover; }
.microgaming-page .mg-game-name {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 8px; text-align: center; font-size: 13px; line-height: 1.3; color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .75));
}
@media (max-width: 600px) {
    .microgaming-page .mg-games { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
    .microgaming-page .mg-slot-bar { justify-content: space-between; }
    .microgaming-page .mg-search { width: 60%; }
}

/* 본문 래퍼(페이지 자체 div) — 컨테이너가 없는 레이아웃(99casino)에서도 폭이 화면 전체로 퍼지지 않게 한다.
   레이아웃의 PageClass 요소(같은 .microgaming-page)에는 걸리지 않도록 .mg-wrap 에만 적용. */
.mg-wrap { box-sizing: border-box; max-width: 1400px; margin: 0 auto; }
body.skin-99casino .mg-wrap { padding: 20px; }

/* 메인 카탈로그 탭(ST10 계열 .cate-list)은 제목 글자가 커서 em 기준이면 로고가 과하게 커진다(PC 270×65) → 고정 높이 */
.cate-link .mg-logo { height: 52px; }   /* PC 제목 줄(2.5rem×1.5=60px) 안에 들어가므로 탭 높이는 그대로 */
@media (max-width: 767px) { .cate-link .mg-logo { height: 27px; } }   /* 모바일 제목 줄(1.1rem×1.5≈26px) 높이를 넘지 않게 — 3개 탭 높이 통일 */

/* 가독성: 스킨마다 본문 글자색이 다르다(W15 는 어두운 글자색을 물려줘 어두운 배경 위에서 안 보였다).
   → 페이지 위에 직접 놓이는 문구(개수/상태/빈 목록)는 자체 반투명 어두운 알약 + 밝은 글자로 어떤 배경에서도 읽히게 한다.
   카드/탭/검색창은 위에서 자체 배경·글자색을 가진다. */
.microgaming-page .mg-slot-count,
.microgaming-page .mg-status,
.microgaming-page .mg-empty {
    display: inline-block; width: fit-content; padding: 6px 14px; border-radius: 12px; opacity: 1;
    color: #eef2ee; background: rgba(0, 0, 0, .55);
}
.microgaming-page .mg-status,
.microgaming-page .mg-empty { display: block; margin: 24px auto; text-align: center; }
.microgaming-page .mg-search::placeholder { color: #9aa39d; opacity: 1; }
/* 🔴 위 규칙들이 display 를 지정하므로 UA 의 [hidden]{display:none} 이 덮인다 → 숨김 상태(빈 상태 바/검색결과없음/슬롯바)가 항상 보이던 회귀(ST02 실측).
   hidden 속성은 항상 우선한다. */
.microgaming-page [hidden] { display: none !important; }