@charset "utf-8";

/****************************************************************************************************************************************
hero section
*****************************************************************************************************************************************/
.hero {position: relative; margin:0; padding: 0; width: 100%;}
.hero-inner {position: relative; margin:0 auto; padding:0; width: 100%; height: 100%;}

/****************************************************************************************************************************************
pc-sec section
*****************************************************************************************************************************************/
.pc-sec {position: relative; margin:50px auto; padding:0; width: 100%;}
ul.pc-mainMenu {position: relative; margin:0 auto; padding:0; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; cursor: pointer;}
ul.pc-mainMenu > li {position: relative; transform-origin: 340px 160px; filter: brightness(1); transform: translateX(0px) rotateY(0deg) skew(0deg, 0deg); cursor: pointer;}

@media (hover: hover) and (pointer: fine) {
    ul.pc-mainMenu > li:hover {
                animation: heartbeat 0.7s both;
    }
}

/****************************************************************************************************************************************
main-border section
*****************************************************************************************************************************************/
.main-border {position: relative; margin:0 auto; padding:0; width: 100%;}
.mainBo-inner {position: relative; margin:0 auto; padding:0 15px; width: 1430px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px;}
.board-group {position: relative;}
/* 🔴 .board-hd 는 공용 폴백 페이지용 board.css(나중 로드)에도 있다.
   메인 3보드 헤더는 .mainBo-inner 스코프로 올려 로드 순서와 무관하게 이기게 한다. */
.mainBo-inner .board-hd {margin:0 auto; padding: 0 20px; width: 100%; height: 60px; line-height: 60px; text-align: left; font-size: 22px; color: #e7d9b8; background: linear-gradient(#5b4f3c 0%, #291f18 100%);}

.mainBo-con {margin:0 auto; padding:20px 30px; width:100%; height:320px; background: url('../img/main/bg_board.jpg') center top no-repeat; background-size: cover; overflow: hidden;}
/* 표가 패널 높이를 채우게 한다 — 원본은 5행 220px 고정이라 PC 는 아래가 비고(약 60px)
   모바일(≤1024, 패널 200px)은 넘쳐서 마지막 행이 잘렸다. 행 height 는 최소치로 동작해 늘어난다. */
.mainBo-con > table {margin:0 auto; padding:0; width: 100%; height: 100%;}
.mainBo-con > table th,
.mainBo-con > table td {padding:0 5px; height: 44px; font-weight:500;}
.mainBo-con > table th {width:74%; text-align: left; font-size: 16px; cursor: pointer;}
.mainBo-con > table th > span {display: block; max-width: 100%; text-align: left; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; overflow: hidden;}
.mainBo-con > table.no-date th {width: 100%;}
.mainBo-con > table td {text-align: right; width: 26%; font-size: 13px; color: #8d8d8d;}
.mainBo-con > table td.date-td {white-space: nowrap;}

/* 공지목록 페이지(notice.js)와 같은 표식 — 상단고정 핀 + 카테고리 배지.
   둘 다 inline-block 이라 제목과 한 줄에 흐르고 ellipsis 가 줄 전체에 걸린다. */
.notice-pin {display: inline-block; margin-right: 4px; font-size: 11px; color: #ef4444; vertical-align: middle;}
.notice-cat {display: inline-block; margin-right: 6px; padding: 0 6px; max-width: 84px; font-size: 11px; font-style: normal; line-height: 16px; color: #ffe6ac; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #7a6440; border-radius: 3px;}

ul.real-list {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center;}
ul.real-list > li {position: relative; margin:0; padding:0; width:100%; height: 44px; display: flex; align-items:center; justify-content: space-between; cursor: pointer;}
ul.real-list > li > span {flex: 1; text-align: left; font-size: 16px; color:#fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.real-list > li > span.amount {flex: 0 0 34%; text-align: right; color: #ffb100;}
ul.real-list > li > span.amount > b {color: #ffb100;}

/* 실시간 입출금 티커(공용 live-ticker.js) 행 대응.
   코어가 만드는 span 순서는 .tk-ico / 아이디 / .amount / .date 로 원본 정적 마크업과 다르다.
   금액 강조가 <b> 대신 .amount 자체 색이 되므로 위 amount 색도 골드로 올림. */
ul.real-list > li > span.tk-ico {flex: 0 0 22px; text-align: center; color: #ffb100;}
ul.real-list > li > span.date {flex: 0 0 22%; text-align: right; font-size: 13px; color: #8d8d8d;}
ul.real-list > li.tk-new {animation: tkNew 0.6s ease-out;}
@keyframes tkNew {
    from {opacity: 0; transform: translateY(-6px); background: rgba(255, 177, 0, 0.12);}
    to {opacity: 1; transform: translateY(0); background: transparent;}
}



/****************************************************************************************************************************************
mo-sec
*****************************************************************************************************************************************/
.mo-sec {display: none; position: relative;}

/* cate-list */
ul.cate-list {position: relative; margin:20px auto; padding:0; width:100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
ul.cate-list > li {position: relative; margin:0; padding:0; line-height: 35px; font-size: 13px; color: #ababab; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); background: linear-gradient(180deg, #646464 0%, #1e1e1e 100%); border-radius: 30px; cursor: pointer;}
ul.cate-list > li.active {color: #fff; background: linear-gradient(#f5c576 0%, #652b05 100%);}

/* main-game */
.main-game {display: none; position: relative; margin:0 auto; padding:15px 0; width:100%;}
.main-game.active {display: block;}

/* mainGame-tit */
.mainGame-tit {position: relative; margin:0 auto 20px auto; padding:0; width: 100%; height: 25px; display: flex; justify-content: space-between; align-items: center;}
.mgt{display: flex; align-items: center; justify-content: center; margin: 0 4vw; font-size:18px; font-weight: 500; color:#fff; white-space:nowrap;}
.mgt_line1{position: relative; height: 2px; width: 50vw; background:linear-gradient(90deg, #3d2a12 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #3d2a12 100%);}
.mgt_line1::before{content: ""; position: absolute; top: 50%; right:0px; transform: translate(50%,-50%); width: 8px; height: 8px; background:linear-gradient(90deg, #3d2a12 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #3d2a12 100%);}
.mgt_line2{position: relative; height: 2px; width: 50vw; background:linear-gradient(90deg, #3d2a12 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #3d2a12 100%);}
.mgt_line2::before{content: "";  position: absolute; top: 50%; left: 0px; transform: translate(-50%,-50%); width: 8px; height: 8px; background:linear-gradient(90deg, #3d2a12 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #3d2a12 100%);}

/* game-list */
ul.game-list {position: relative; margin:0 auto; padding:0; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
ul.game-list > li {position: relative; transform-origin: 340px 160px; filter: brightness(1); transform: translateX(0px) rotateY(0deg) skew(0deg, 0deg); cursor: pointer;}
ul.game-list > li > img {min-width: 100%;}

ul.slot-list,
ul.sport-list {grid-template-columns: repeat(1, 1fr);}


/****************************************************************************************************************************************
title_box
*****************************************************************************************************************************************/
.title_box {position: relative; margin:0; width:100%; height:150px; line-height:150px; padding:0 15px; text-align:center; background:url('../img/bg_title.jpg') center top no-repeat; background-size:cover;}
.title {font-size:40px; color:#ffd28b;}
/* 브랜드 배너(brand/<brand>/title-casino|slot.jpg)를 쓰는 테넌트는 이미지에 제목이 이미 그려져 있다 →
   오버레이 텍스트를 숨겨 겹침을 막는다. 기본 배경을 쓰는 테넌트에는 이 클래스가 붙지 않아 영향 없다. */
.title_box.has-brand-title .title {display:none;}

/* casino-list */
ul.casino-list {position: relative; margin:30px auto; padding:0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;}
ul.casino-list > li {position: relative; transform-origin: 160px 145px; filter: brightness(1); transform: translateX(0px) rotateY(0deg) skew(0deg, 0deg);cursor: pointer;}
ul.casino-list > li > img {min-width: 100%;}

/* 벤더 카드 이름(.game-tit) — 카드 이미지엔 이름이 없고(이름없이 재생성), 관리자 변경명(@v.Title)을
   좌상단 골드 한 줄 오버레이로 표시(관리자에서 게임사명 바꾸면 이미지 재작업 없이 즉시 반영).
   is-fallback(공용 로고만) 카드는 아래 별도 규칙(중앙 로고+이름)으로 처리. */
ul.casino-list > li,
ul.game-list > li {container-type: inline-size;}
ul.casino-list > li:not(.is-fallback) > .game-tit,
ul.game-list > li:not(.is-fallback) > .game-tit {
    display: block; position: absolute; left: 5%; top: 30%; z-index: 2;
    margin: 0; padding: 0; max-width: 90%; text-align: left;
    white-space: nowrap; font-size: 5.6cqw; font-weight: 800; line-height: 1.1;
    font-family: 'GmarketSans'; color: #ffd76a; letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.95);
    pointer-events: none;
}
/* 미매핑 벤더(.is-fallback) = W06 카드 아트가 없어 공용 투명 로고만 있는 벤더(카지노 8 + 슬롯 7).
   🔴 로고의 종횡비가 그대로 카드 높이가 되어 그리드가 들쭉날쭉했다
      (winfinity 980×96 → 108px / passo 88×80 → 258px / 정상 카드 249px).
   → li 자체를 정상 카드와 같은 320:290 비율의 카드 틀로 만들고 로고를 그 안에 담는다.
      배경은 실제 W06 카드에서 샘플링한 값(#0a0704 · #110a03 · #1b1511 + 금빛 먼지). */
ul.casino-list > li.is-fallback,
ul.game-list > li.is-fallback {
    aspect-ratio: 320 / 290;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px;
    background:
        radial-gradient(120% 90% at 12% 88%, rgba(255, 177, 0, 0.18) 0%, rgba(255, 177, 0, 0) 55%),
        radial-gradient(90% 70% at 88% 15%, rgba(187, 119, 59, 0.14) 0%, rgba(187, 119, 59, 0) 60%),
        linear-gradient(160deg, #0a0704 0%, #1b1511 55%, #0a0704 100%);
    border: 1px solid #7a6440;
    overflow: hidden;
}
ul.casino-list > li.is-fallback > img,
ul.game-list > li.is-fallback > img {
    /* 🔴 li > img 의 min-width:100% 무력화 — 로고가 셀 폭까지 늘어나던 원인 */
    min-width: 0;
    flex: 0 0 auto;
    /* 로고 종횡비가 10:1(winfinity 980×96)부터 1.1:1(passo 88×80)까지 극단적으로 갈린다.
       폭·높이 상한을 함께 주고 contain 으로 맞춰야 가로로 긴 로고가 납작해지지 않는다. */
    width: 80%;
    height: 46%;
    object-fit: contain;
}
ul.casino-list > li.is-fallback > .game-tit,
ul.game-list > li.is-fallback > .game-tit {
    display: block;
    max-width: 90%;
    font-size: 15px;
    font-family: 'GmarketSans';
    color: #ffe6ac;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 검색 필터로 걸러진 카드 */
ul.casino-list > li.is-filtered {display: none;}

/* slot-search — 원본은 핸들러 없는 입력칸 1개였다.
   게임팝업 검색(_GamePopup)과 같은 구성(아이콘 + 입력 + X + 카운터 + 0건안내)으로 확장.
   🔴 원본 배경 #002142(네이비)는 흑/금 팔레트와 어긋나 스킨 톤(#2c2c2c + 골드 보더)으로 맞춤. */
.slot-search {position: relative; margin:20px auto 0 auto; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;}
.slot-search-box {position: relative; display: inline-flex; align-items: center; width: 260px; max-width: 100%; height: 40px; background: #2c2c2c; border: 1px solid #7a6440; border-radius: 5px; transition: border-color 0.2s;}
.slot-search-box:focus-within {border-color: #ffb100;}
.slot-search-icon {flex: 0 0 auto; margin: 0 8px 0 12px; font-size: 14px; color: #8b8b8b;}
.slot-search-input {flex: 1 1 auto; min-width: 0; padding: 0; height: 100%; font-size: 15px; color: #fff; background: none; border: 0;}
.slot-search-input::placeholder {color: #8b8b8b;}
.slot-search-input:focus {outline: none;}
.slot-search-clear {flex: 0 0 auto; margin-right: 8px; width: 22px; height: 22px; font-size: 13px; line-height: 1; color: #ffb100; background: #3a3125; border: 0; border-radius: 50%; cursor: pointer;}
.slot-search-count {font-size: 14px; color: #8b8b8b; white-space: nowrap;}
.slot-search-empty {margin: 60px auto; width: 100%; text-align: center; font-size: 16px; color: #8b8b8b;}
/* 🔴 hidden 가드 — display 를 명시한 규칙이 hidden 속성을 이기는 것을 막는다 */
.slot-search-clear[hidden],
.slot-search-empty[hidden] {display: none !important;}

@media (hover: hover) and (pointer: fine) {
    ul.casino-list > li:hover {
                animation: heartbeat 0.7s both;
    }
}

@keyframes heartbeat {
    from {
            transform: translateX(0px) rotateY(0deg) skew(0deg,0deg);
            transform-origin: center center;
            animation-timing-function: ease-out;
            filter: brightness(1);
    }
    5% {
            transform: translateX(0px) rotateY(5deg) skew(3deg,0deg);
            animation-timing-function: ease-in;
            filter: brightness(1.5);
    }
}

/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 1460px) {
    ul.pc-mainMenu {gap: 20px;}
    .mainBo-inner {width: 100%; gap: 20px;}

    /* 카지노 */
    ul.casino-list {gap: 20px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 1024px) {
    .pc-sec {display: none;}
    .mo-sec {display: block;}

    .main-border {margin:20px auto; padding-bottom:90px;}
    .mainBo-inner {grid-template-columns: repeat(1, 1fr);}
    .board-group {width: 100%;}
    .mainBo-inner .board-hd {height: 46px; line-height: 46px; font-size: 16px;}
    .mainBo-con {padding: 10px 10px; height: 200px;}
    /* 패널 안 높이 180px 에 5행을 넣는다 — 44px 최소치를 낮추지 않으면 넘쳐서 마지막 행이 잘린다 */
    .mainBo-con > table th,
    .mainBo-con > table td {height: 30px;}
    .mainBo-con > table th {font-size: 15px;}
    .mainBo-con > table td {font-size: 12px;}
    .notice-cat {max-width: 64px;}

    /* 카지노 */
    ul.casino-list {padding-bottom:110px; grid-template-columns: repeat(3, 1fr);}
}/* 미디어쿼리문 끝 */

@media (max-width: 693px) {
    /* 카지노 */
    .title_box {height: 70px; line-height: 70px;}
    .slot-search {flex-wrap: wrap; gap: 8px;}
    .slot-search-box {width: 100%;}
    .slot-search-input {font-size: 16px;}   /* iOS 자동 확대 방지 */
    .title {font-size: 22px;}
     ul.casino-list {grid-template-columns: repeat(2, 1fr); gap: 10px;}
}/* 미디어쿼리문 끝 */
/****************************************************************************************************************************************
mainBo-4 — 메인 하단 **4보드** 구성 (Site:Brand:MainBoardVariant=ginza4 인 테넌트만 이 클래스가 붙는다)
  🔴 기존 .mainBo-inner(3칸 grid) 규칙을 건드리지 않는다. 크라운·쿨·팡팡이 그걸 쓴다.
     여기서는 .mainBo-4 가 함께 붙었을 때만 칸 수를 덮는다.
*****************************************************************************************************************************************/
.mainBo-inner.mainBo-4 {grid-template-columns: repeat(4, 1fr); gap: 24px;}

/* ② 월간 출금 TOP10 */
.mainBo-4 ul.rank-list {margin:0; padding:0; list-style:none;}
.mainBo-4 ul.rank-list > li {display:flex; align-items:center; gap:8px; height:30px; font-size:14px; color:#e7d9b8;}
.mainBo-4 ul.rank-list > li > .rk {flex:0 0 22px; text-align:center; font-weight:700; color:#c9a84c;}
.mainBo-4 ul.rank-list > li > .id {flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mainBo-4 ul.rank-list > li > .amount {flex:0 0 auto; font-weight:600;}

/* ③ 이벤트 카드 */
.mainBo-4 .event-con {display:flex; flex-direction:column; gap:8px;}
.mainBo-4 .event-card {display:block; flex:1 1 0; min-height:0; overflow:hidden; border-radius:6px; background:rgba(0,0,0,.35);}
.mainBo-4 .event-card > img {width:100%; height:100%; object-fit:cover; display:block;}
.mainBo-4 .event-card-title {display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:0 10px; font-size:14px; color:#e7d9b8; text-align:center;}
.mainBo-4 .event-empty {margin:0; padding:20px 0; text-align:center; color:#9c8f77;}

/* ④ 공지 + 텔레그램 (세로 2단) */
.mainBo-4 .board-group-split {display:flex; flex-direction:column; gap:10px;}
.mainBo-4 .board-group-split > .board-sub:first-child {flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
.mainBo-4 .board-group-split > .board-sub:first-child .mainBo-con {flex:1 1 auto; height:auto; min-height:0;}
.mainBo-4 .board-telegram {
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:0; padding:0 14px; width:100%; height:60px;
    font-size:16px; font-weight:600; color:#e7d9b8; cursor:pointer;
    background:linear-gradient(#5b4f3c 0%, #291f18 100%); border:none; border-radius:6px;
}
.mainBo-4 .board-telegram > i {font-size:20px; color:#58b3e0;}
@media (hover: hover) and (pointer: fine) { .mainBo-4 .board-telegram:hover {filter:brightness(1.15);} }

/* 좁은 화면: 4칸은 너무 좁다 → 2칸 2줄 */
/* ── 세로폭 축소 (업체요청 2026-10-12, PPT 3장) ──
   "실시간출금/월간출금TOP10/이벤트/공지사항·텔레그램 네모칸 세로폭 축소".
   🔴 상자만 줄이면 안 된다 — .mainBo-con 은 overflow:hidden 이라 줄이 잘려 나간다.
      상자(320→260) · 제목띠(60→48) · 각 줄 높이를 **같이** 줄여 줄 수를 그대로 유지한다.
        본문 가용 = 260 - 패딩40 = 220px
        월간 TOP10 : 10줄 × 22px = 220 ✔   실시간 출금 : 7줄 × 31px = 217 ✔
      칸 전체 높이 380 → 308px (약 19% 축소).
   🔴 .mainBo-4 는 ginza4 구성에만 붙는 클래스라 크라운(같은 W06)은 영향 없다.
      다만 .mainBo-con·.board-hd 는 공용이므로 반드시 .mainBo-inner.mainBo-4 로 한정할 것. */
.mainBo-inner.mainBo-4 .board-hd {height: 48px; line-height: 48px; font-size: 20px;}
.mainBo-inner.mainBo-4 .mainBo-con {height: 260px;}
.mainBo-inner.mainBo-4 .mainBo-con > table td,
.mainBo-inner.mainBo-4 .mainBo-con > table th {height: 31px;}
.mainBo-4 ul.rank-list > li {height: 22px; font-size: 13px;}

@media (max-width: 1230px) { .mainBo-inner.mainBo-4 {grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 767px)  { .mainBo-inner.mainBo-4 {grid-template-columns: 1fr;} }