/* ============================================================
   SEVEN BET 홈 구조 오버라이드

   sg_color.css 가 '색'을 맡는다면 이 파일은 '구조'를 맡는다.
   하츠 원본 마크업을 그대로 두고 시안(SEVEN BET.dc.html)의 배치만 덮어쓴다.
   layout.tsx 에서 **가장 마지막에** 로드해야 base/max/min.css 를 이긴다.

   치수는 시안 실측값이다:
     좌측 nav 그리드 297x266(3열 6행, gap 1px) / 퀵타일 136x86 / 프로모 250x320
   ============================================================ */

/* ── 좌측 메뉴: 세로 리스트 → 3열 균등 그리드 (시안 navGrid 18칸) ──
   ⚠️ 반드시 **직계 자식(`> ul`)** 으로 한정할 것. 후손 선택자(`.snb_left ul`)로 두면
      같은 사이드바 안의 인기게임 목록(`.five_spo > #popular_games`)까지 3열 그리드가 되어
      한 줄짜리 항목이 1/3 폭으로 찌그러진다. */
.snb_left > ul {
    /* base.css 219행이 height:243px 로 고정한다. 6행 그리드는 그보다 높아서
       풀어주지 않으면 카지노/슬롯 배너 위로 넘쳐 겹친다. */
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding: 1px 0;
    margin: 0;
    width: 297px;
    background: #111;
    list-style: none;
}

.snb_left > ul li {
    display: flex;
    width: auto;
    margin: 0;
    padding: 0;
    float: none;      /* 원본이 float 로 2~3열을 흉내내던 것을 grid 로 대체 */
}

/* 그리드 칸을 꽉 채운다 — 원본의 고정폭(99px)/고정높이를 무효화 */
.snb_left ul li a,
.snb_left ul li span.mg_link {
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin: 0;
    padding: 0 2px;
    font-size: 12.5px;
    text-align: center;
    /* 시안 dark 타일 */
    background: linear-gradient(180deg, rgb(44, 44, 44), rgb(7, 7, 7));
    box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, .4);
    border-radius: 0;
    transition: filter .12s ease, transform .12s ease;
}

.snb_left ul li a:hover,
.snb_left ul li span.mg_link:hover {
    filter: brightness(1.18);
    transform: translateY(-1px);
}

/* 상단 3칸(충전·환전·문의)만 빨강 — sg_color.css 의 .btn_gray 규칙이 배경을 담당하고
   여기서는 그리드 칸 높이만 맞춘다(높이 61px 고정이면 그리드가 어긋난다). */
.snb_left ul li a.btn_gray {
    height: 44px;
    line-height: 44px;
    font-size: 12.5px;
}

/* ── 중앙 퀵타일: 원형 아이콘 슬라이더 → 사각 타일 마퀴 (시안 quickTilesLoop) ── */
.seven_quick {
    width: 100%;
    height: 97px;
    padding-top: 1px;
    overflow: hidden;
    display: flex;
}

.seven_quick_track {
    display: flex;
    flex-direction: row;
    height: 86px;
    width: max-content;
    animation: seven_marquee 22s linear infinite;
    will-change: transform;
}

/* 시안과 동일: 트랙의 절반(원본 세트 1벌 폭)만큼 이동하면 이음매 없이 반복된다.
   타일 1개 = 136px(내부 123 + 우측 여백 13) × 8개 = 1088px
   ⚠️ 게임 사용 설정으로 타일이 빠질 수 있어 이동 거리를 컴포넌트가 --seven-marquee-shift 로
      넘긴다(타일수 × 136px). 미지정이면 기존 8개 기준 1088px. */
@keyframes seven_marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--seven-marquee-shift, 1088px))); }
}

.seven_quick_track:hover { animation-play-state: paused; }

.seven_tile {
    width: 136px;
    height: 86px;
    padding-right: 13px;
    display: flex;
    flex-shrink: 0;
}

.seven_tile > a {
    flex: 1;
    background: linear-gradient(180deg, rgb(30, 30, 30), rgb(12, 12, 12));
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
}

.seven_tile img {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    transition: transform .22s cubic-bezier(0.2, 0, 0, 1);
}

.seven_tile span {
    font-size: 12px;
    color: #dcdce2;
    transition: opacity .15s ease;
}

/* 시안 hover: 아이콘이 내려오며 커지고 라벨이 사라진다 */
.seven_tile > a:hover img { transform: translateY(8px) scale(1.25); }
.seven_tile > a:hover span { opacity: 0; }

/* 최신 인기게임(#popular_games) 빈 상태 — 홈/원정 2칸 레이아웃이 아니므로
   메시지 한 줄이 행 전체 폭을 쓰고 가운데 정렬되게 한다(테이블의 colspan 격). */
.five_spo .five_game.no_data {
    cursor: default;
}

.five_spo .five_game.no_data .five_team_box {
    flex: 1;
    align-items: center;
}

/* ── 프로모 타일: 제목/부제를 hover 없이 항상 노출 (시안 promoTiles) ── */
.main_middle_box {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.main_middle_box > a {
    position: relative;
    flex: 1;
    height: 320px;
    border-radius: 10px 10px 0 0;
    border: 2px solid rgb(51, 0, 0);
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.main_middle_box > a:hover {
    border-color: var(--sb-accent, #ff3311);
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(255, 51, 17, .35);
}

/* 배경 인물 이미지 */
.main_middle_box > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* 원본은 이 블록을 hover 에서만 보여줬다(.hoverb). 시안은 항상 보이므로 상시 노출로 바꾸고
   하단 그라데이션을 깔아 글자 가독성을 확보한다. */
.main_middle_box a span.hoverb {
    position: absolute;
    inset: 0;
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* base.css 가 이 박스에 width/height:100% 를 주는데 기본 box-sizing 이 content-box 라
       padding-bottom 이 카드 밖으로 30px 삐져나갔다(= 버튼이 카드 하단에 붙고 그라데이션도 밀림).
       시안(inset:0)과 같은 결과를 내려면 border-box 로 고정해야 한다. */
    box-sizing: border-box;
    padding-bottom: 30px;
    gap: 12px;
    background: linear-gradient(180deg, transparent 68%, rgba(7, 7, 7, .5) 82%, rgba(7, 7, 7, .82));
    transform: none;
}

/* 원본 로고(.hoverb > img:first-child)는 시안에 없다 */
.main_middle_box a span.hoverb > img { display: none; }

.main_middle_box .mmb_in_ttl {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
    line-height: 1.1;
    /* base.css 의 `margin-top: 10px` 무력화 — 시안은 gap(12px)만으로 간격을 준다 */
    margin: 0;
}

.main_middle_box .mmb_in_sub {
    font-size: 12px;
    color: #e6e6ea;
    text-align: center;
    padding: 0 12px;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* '게임하러 가기' 버튼 — 시안은 이미지(promo/btn.png) 하나다
   시안 원본: <img src="promo/btn.png" style="height:56px; width:auto">
   → 높이 56px 고정, 폭은 이미지 비율(322x87)대로. aspect-ratio 로 재현한다.
   ⚠️ base.css 의 `.mmb_in_btn { margin-top:35%; padding:5px 10px; border-radius:20px }` 을
      모두 덮어야 한다. 특히 margin-top:35%(=타일 폭 250px 의 87.5px)를 남기면 버튼이
      아래로 밀리면서 제목/부제까지 위로 올라가 시안과 어긋난다. */
.main_middle_box .mmb_in_btn {
    display: block;
    height: 56px;
    aspect-ratio: 322 / 87;   /* btn.png 실측 비율 — 이미지 교체 시 함께 갱신 */
    flex-shrink: 0;
    background: url(/static/seven/promo/btn.png) center/contain no-repeat;
    text-indent: -9999px;   /* 이미지에 글자가 그려져 있어 텍스트는 숨긴다 */
    overflow: hidden;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 3px 6px rgba(255, 51, 17, .5));
    transition: transform .12s ease, filter .12s ease;
}

.main_middle_box > a:hover .mmb_in_btn {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 6px 12px rgba(255, 51, 17, .75));
}

/* ── 모바일 (≤767px) — 모바일 시안(SEVEN BET Mobile.dc.html) 기준 ────────── */
@media screen and (max-width: 767px) {
    /*
      좌측 메뉴(SNB) — 모바일도 **3열 그리드**다.
      ⚠️ 예전엔 여기서 `display:block` 으로 PC 그리드를 되돌렸는데, 그러면 항목이 세로로
         18줄 쌓여 300px 패널의 오른쪽 2/3 가 텅 빈 채 아래로 길게 늘어진다
         ("햄버거를 눌러도 메뉴가 이상하다"는 제보의 실체 — 열리긴 하지만 배치가 깨져 보였다).
         모바일 시안(SEVEN BET Mobile)도 360px 폭에서 3열이므로 그리드를 그대로 쓴다.
      치수는 시안 값: 칸 높이 41px / 라벨 11.5px.
    */
    .snb_left ul li a,
    .snb_left ul li span.mg_link { height: 41px; line-height: 41px; font-size: 11.5px; }
    .seven_quick { display: none; }

    /* 메뉴 그리드 15칸 — 원본은 타일 118px/라벨 14px 로 시안보다 크다.
       시안: 타일 88px / 아이콘 60px / 라벨 11px / gap 5 */
    .menumobile { gap: 5px; }

    .menumobile .card {
        height: 88px;
        border-radius: 6px;
        border: 1px solid #232323;
        background: linear-gradient(180deg, rgb(30, 30, 30), rgb(10, 10, 10));
        box-shadow: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* 아이콘 칸 — 원본의 radial 배경(원형 프레임)을 걷어내고 아이콘만 남긴다 */
    .menumobile .card .ball-area {
        height: auto;
        background: none;
        flex: 0 0 auto;
    }
    .menumobile .card .ball-area img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
    }

    /* 라벨 — 원본의 회색 그라데 바를 없애고 시안처럼 텍스트만 */
    .menumobile .card .title {
        height: auto;
        background: none;
        font-size: 11px;
        font-weight: 400;
        color: #dcdce2;
        text-shadow: none;
    }

    /* 배팅카트 토글 — PC 시안에는 베팅슬립이 있지만 모바일 시안에는 없다.
       (홈 배팅카트 노출을 위해 HOME_INJECT_STYLE 을 비운 것의 모바일 부작용을 여기서 막는다) */
    .bet_slip_toggle_btn { display: none !important; }
}

/* ── 공지/이벤트 제목바 (시안 data-dc-tpl="87" 블록) ──────────────
   시안은 47px 바 **하나**가 전체 폭을 차지하고 그 안 오른쪽 끝에 MORE 가 붙는다.
   하츠는 `.bbs_col_head`(flex, space-between, 47px) 안에 제목(.main_bbs_ttl)과
   더보기(.bbs_more)가 형제로 있어서, 제목에만 배경을 주면 글자 폭만큼만 칠해지고
   더보기는 바 바깥으로 밀려난다.
   → **배경을 부모(.bbs_col_head)로 올린다.** 그러면 마크업을 바꾸지 않고도
     '전체 폭 바 + 안쪽 오른쪽 MORE' 라는 시안 구조가 그대로 나온다. */
.main_bbs_pair .bbs_col_head {
    position: relative;
    height: 47px;
    border-radius: 5px 5px 0 0;
    background: var(--sb-hdr-grad);
    box-shadow: inset 0 1px 0 rgba(177, 172, 146, .5), 0 2px 6px rgba(0, 0, 0, .6);
    padding: 0 14px;
    gap: 8px;
    justify-content: flex-start;   /* MORE 는 absolute 라 space-between 이 필요 없다 */
    margin-bottom: 10px;
}

/* 제목은 이제 '바' 가 아니라 바 안의 텍스트다 — 배경·높이·여백을 걷어낸다 */
.main_bbs_pair .bbs_col_head .main_bbs_ttl {
    background: none;
    box-shadow: none;
    height: auto;
    line-height: 1;
    padding: 0;
    margin: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 시안 아이콘 26x26 — 원본의 FontAwesome 확성기 글리프를 이미지로 갈아끼운다 */
.main_bbs_pair .bbs_col_head .main_bbs_ttl i {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: url(/static/seven/icons/notice.png) center/contain no-repeat;
}
.main_bbs_pair .bbs_col_head .main_bbs_ttl i::before { content: ''; }   /* fa 글리프 제거 */
.main_bbs_pair .bbs_col_event .bbs_col_head .main_bbs_ttl i {
    background-image: url(/static/seven/icons/event.png);
}

/* 영문 소제목 — 시안 rgb(255,210,0) */
.main_bbs_pair .bbs_col_head .main_bbs_sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--sb-gold);
    white-space: nowrap;
}

/* MORE — 시안은 바 안쪽 오른쪽 12px 에 절대배치 */
.main_bbs_pair .bbs_col_head .bbs_more {
    position: absolute;
    right: 12px;
    font-size: 11.8px;
    color: #fff;
    cursor: pointer;
    transition: color .15s ease;
}
.main_bbs_pair .bbs_col_head .bbs_more:hover { color: var(--sb-gold); }

/* ── 좌측 카지노/슬롯 버튼 (시안 data-dc-tpl="26" 블록) ──────────────
   컨테이너(.snb_btn_img: 297 / space-between / #000)와 칸 폭(147)은 원본이 이미 시안과 같다.
   다른 건 셋뿐이라 그것만 뒤집는다:
     ① 이미지가 <img> → 시안은 background(cover)
     ② 국문 라벨이 `dspn`(display:none) → 시안은 항상 보임
     ③ 영문 라벨(Casino/Slot)이 없음 → 마크업에 .btn_img_sub 추가 */
.snb_btn_img a {
    position: relative;
    height: 80px;
    padding: 5px 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;      /* 시안: 텍스트 우측 정렬 */
    justify-content: center;
    padding-right: 14px;
    gap: 2px;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease;
}

.snb_btn_img a:nth-of-type(1) { background-image: url(/static/seven/btn_casino.png); }
.snb_btn_img a:nth-of-type(2) { background-image: url(/static/seven/btn_slot.png); }

.snb_btn_img a:hover {
    filter: brightness(1.18) saturate(1.1);
    transform: scale(1.03);
}

/* 원본 <img>(글자가 그려진 png)는 배경으로 대체됐으므로 숨긴다 */
.snb_btn_img a img { display: none; }

/* ⚠️ base.css:8544 `.snb_btn_img span` 이 두 라벨을 position:absolute + left:10/top:10 으로
   **같은 자리에 겹쳐** 놓는다(그래서 국문이 영문 뒤에 가려 안 보였다).
   static 으로 되돌려 위 flex 흐름(우측 정렬·세로 중앙·gap 2)에 태운다. */
.snb_btn_img a span {
    position: static;
    left: auto;
    top: auto;
    padding: 0;
    background: none;
}

/* 국문 — `dspn`(display:none, 명시도 0,1,0)을 0,2,1 로 이겨서 되살린다 */
.snb_btn_img a .btn_img_ttl {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    line-height: 1.2;
}

/* 영문 — 시안 rgb(255,210,0) */
.snb_btn_img a .btn_img_sub {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-gold);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    line-height: 1.2;
}

/* ── 사이드 배너 이미지 간격 ────────────────────────────────
   base.css 의 `.banner_box img` 는 `width:100%` 뿐이라 세로 간격이 없다. 하츠는 배너를 전부
   `<a>` 로 감싸 그 사이 공백으로 간격이 생겼지만, 세븐은 공지방처럼 **링크 없는 img 를 직접
   나열**하는 칸이 있어(JSX 는 형제 사이 개행 공백을 지운다) 그 배너들이 딱 붙는다.
   ⚠️ `.banner_mobile_contact`(모바일 홈 하단)는 grid + gap:8px 라 이 규칙이 필요 없다. */
.banner_box img {
    margin-bottom: 5px;
}

/* ── 모바일 상단 유저정보 바 좌우 여백 ────────────────────────
   `min.css` 의 `.mobile_user_info_box` 는 `justify-content: space-between` + `width:100%` 라
   '보유머니'와 '포인트'가 화면 양 끝에 딱 붙는다. 시안처럼 안쪽으로 들여 놓는다.

   ⚠️ `box-sizing: border-box` 를 함께 준다. 원본 CSS 에는 전역 `box-sizing` 선언이 없어서
      `width:100%` 에 padding 을 더하면 그만큼 넘쳐 가로 스크롤이 생긴다. */
.mobile_user_info_box {
    padding: 0 14px;
    box-sizing: border-box;
}

/* 모바일 하단 배너는 원본 GIF 높이(107px)에 맞춘다 — 데스크탑 사이드(87px)보다 크다.
   자리표시자가 원본보다 낮으면 아래 블록이 그만큼 올라와 시안과 어긋난다. */
.banner_mobile_contact .side-bn-ph {
    height: 107px;
}

/* ── 모바일 홈 세로 여백 정리 (≤767px) ──────────────────────────────────
   블록 사이 간격이 제각각이었다(실측 390px 뷰포트):
     · 유저정보바 → 배너슬라이더 : 25px  ← 비어 있는 `.mb_box` 가 min.css 의 `margin:10px 0` 만
                                          남기고 높이 0 으로 접혀 있었다(내용은 PC 전용)
     · 슬라이더 → 메뉴그리드      : 0px   ← 딱 붙음
     · 메뉴그리드 → 하단배너      : 0px   ← 딱 붙음
     · 하단배너4 → 하단배너2      : 27px  ← `.content` 와 `.main_btn_box2` 의 padding-bottom 이 겹침
   `.banner_mobile_contact` 가 이미 쓰는 gap(8px)으로 전 구간을 통일한다. */
@media screen and (max-width: 767px) {
    /* 모바일에선 내용이 없다. 마진만 남아 배너 위에 빈 띠를 만들고 있었다 */
    .mb_box:empty { display: none; }

    .mobile-slider { margin-bottom: 8px; }
    .menumobile { margin-bottom: 8px; }
    .banner_mobile_contact { margin-bottom: 8px; }

    /* 두 컨테이너의 padding-bottom 이 겹쳐 마지막 두 배너 사이만 27px 이 됐다 */
    .main_btn_box2,
    .main_btn_box2 .content { padding-bottom: 0; }

    /*
      하단 배너 2종 — 원본은 block 컨테이너에 inline `<a>` 라 간격이 줄바꿈 공백과
      baseline 여백에 좌우돼 위쪽 배너 묶음(grid)과 어긋났다. 같은 grid+gap 으로 맞춘다.
      padding-bottom 은 하단 고정 네비(80px)를 피하는 값 — 기존 30px 로는 마지막 배너가 가렸다.
    */
    .banner_box {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding-bottom: 92px;
    }
    .banner_box img {
        display: block;
        width: 100%;
        margin-bottom: 0;
    }
}

/* ── iOS 입력창 확대 방지 — 로그인 · 회원가입 창 ────────────────────────
   iOS Safari 는 input 의 font-size 가 **16px 미만이면 포커스 시 화면을 강제로 확대**한다.
   base.css 에 전역 `input[type="text"], input { font-size: 14px }` 가 있어서 로그인·가입
   칸을 누를 때마다 화면이 커지고, 창을 닫아도 원래 배율로 돌아오지 않았다.

   ⚠️ viewport meta 에 `maximum-scale=1, user-scalable=no` 를 넣는 방법은 쓰지 않는다 —
      핀치줌까지 봉쇄해 접근성을 해치고, iOS 10+ 는 그 값을 무시하기도 한다.
   ⚠️ `!important` 를 쓰는 이유: base.css 의 `input[type="text"]` 와 특정성이 같아서
      (둘 다 0,1,1) 스타일시트 로드 순서에 결과가 좌우된다. 확대는 눈에 띄는 UX 문제라
      순서에 기대지 않고 확실히 못 박는다. */
.pop_login_box input,
.pop_join_box input,
.pop_join_box select,
.pop_join_box textarea {
    font-size: 16px !important;
}

/* ── 모바일 홈 게스트 버튼 — 4개일 때 2×2 로 접기 ─────────────────────
   `.contents_join_box`(base.css 13839행)는 `flex-direction: row` + `flex: 1` 이라
   버튼 수가 늘면 각 버튼이 그만큼 좁아진다. 가입정책에서 기명·무기명을 **둘 다** 켜면
   버튼이 4개(로그인/회원가입/무기명가입/텔레그램)가 되는데, 360px 화면에서 버튼 하나가
   82px 로 줄어 아이콘(30px)을 빼면 라벨에 52px 밖에 남지 않는다. 그러면 '무기명가입'과
   '텔레그램 문의'가 두 줄로 접히면서 알약 밖으로 삐져나간다(실측).

   min-width 로 하한을 두고 wrap 을 허용하면, 3개일 때는 예전 그대로 한 줄(각 111px)이고
   4개일 때만 2×2 로 접힌다. 버튼 개수에 따라 클래스를 갈아끼우지 않아도 되고,
   가입정책 조합(둘 다 켬 / 하나만 켬)이 바뀌어도 자동으로 맞는다. */
.contents_join_box {
    flex-wrap: wrap;
}
.contents_join_box .login_btn,
.contents_join_box .join_btn,
.contents_join_box .sos_btn,
.contents_join_box .black_btn {
    /* 라벨(최장 '텔레그램 문의' ≈ 69px) + 아이콘 30px + 좌우 여백 */
    min-width: 105px;
}