/* ═══════════════════════════════════════════════════════════════
   블랙크라운 회원화면 전용 스킨  (bcskin 2026-09-21)

   style.css **뒤에** 얹어서 모양만 바꾼다.
   ★기존 요소는 지우지 않고 숨기기만 한다 — JS 가 아래를 참조하기 때문:
      #hero-particles  user.js:1209 (캔버스를 찾는다)
      #gem-deco        user.js:1491/1606/1623 (tilt 클래스를 붙인다)
      #hdr-auth        user.js:352 renderHeader() 가 통째로 다시 그린다
   지우면 화면이 깨지거나 로그인 후 버튼이 사라진다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 페이지 배경: 은빛 물결 ── */
body {
  background: #050506 url('/user/images/bc/bg-waves.webp?v=trim2') center center / cover no-repeat fixed;
}

/* ── 헤더 ──
   style.css 는 header 64px / .hero margin-top 64px / .navbar top 64px 로 물려 있다.
   높이를 바꾸면 세 곳을 같이 바꿔야 본문이 안 밀린다. */
header {
  height: 78px !important;
  padding: 0 38px !important;
}
.hero   { margin-top: 78px !important; }
/* ★메뉴바가 스크롤을 따라 내려온다는 지적(2026-09-21).
   style.css 에서 .navbar 가 position:sticky; top:64px 로 돼 있어 화면 위에 달라붙는다.
   게다가 헤더는 스크롤하면 숨겨져서(header.hidden) 메뉴바만 허공에 뜬다.
   -> 달라붙지 않게 제자리에 둔다. */
.navbar { position: static !important; top: auto !important; }
.hdr-right { gap: 16px !important; }

.logo .bc-logo-txt { display: none !important; }
.logo .bc-logo-img {
  /* ★그림의 투명 여백(위아래 23%)을 잘라낸 판으로 바꿨다.
     같은 height 라도 실제 글자·왕관이 훨씬 커 보인다.
     시안은 로고가 화면 폭의 21%, 전에는 8% 밖에 안 됐다. */
  /* 사장님이 여백 없는 판으로 새로 줌: 비율 5.43 (전 3.28).
     height 70px 이면 폭 380px = 화면의 20% 로 시안(21.5%)과 거의 같다. */
  height: 54px; width: auto; display: block;   /* 2026-09-21 너무 커서 줄임 (폭 293px = 화면의 15.5%) */
}

/* ── 로그인 / 회원가입 버튼을 이미지로 ──
   ★로그인하면 renderHeader() 가 이 자리를 충전·환전·마이페이지로 다시 그린다.
     그래서 onclick 이 정확히 로그인/회원가입인 버튼만 고른다.
     (그렇게 안 하면 로그인 후 '마이페이지' 버튼에 로그인 그림이 붙는다) */
header .btn-ghost[onclick="openModal('login')"],
header .btn-filled[onclick="openModal('register')"] {
  width: 108px; height: 37px;     /* 비율 2.92 유지하며 줄임 */
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0 !important;
  color: transparent !important;
  box-shadow: none !important;
  transition: transform .15s ease, filter .15s ease;
}
header .btn-ghost[onclick="openModal('login')"]     { background-image: url('/user/images/bc/btn-login.webp?v=nm5'); }
/* 시안에선 회원가입 버튼이 로그인보다 크다 */
header .btn-filled[onclick="openModal('register')"] { width: 147px !important; height: 37px !important; }  /* 비율 3.97 유지하며 줄임 */
header .btn-filled[onclick="openModal('register')"] { background-image: url('/user/images/bc/btn-signup.webp?v=nm5'); }
header .btn-ghost[onclick="openModal('login')"]:hover,
header .btn-filled[onclick="openModal('register')"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
  background-color: transparent !important;
}

/* ── 히어로: 별자리 배경 -> 메인 배너 + 타이틀 이미지 ── */
.hero {
  position: relative;
  /* ★사장님 요청: 그림이 잘리지 말고 전체가 나오게 -> cover 가 아니라 contain.
     대신 배너 칸(폭 100%)보다 그림이 납작해서 좌우에 빈 곳이 생긴다.
     ★그 빈 곳은 **같은 그림을 꽉 채운(cover) 한 장을 뒤에 깔아** 메운다.
       단색이나 그라데이션으로 메우면 색이 미묘하게 달라 띠처럼 보였다. */
  background: #14100c url('/user/images/bc/hero-banner.webp?v=w2560') center center / cover no-repeat;
  /* ★배너 높이
     처음엔 aspect-ratio 1142/374 만 줬더니 1894 화면에서 621px = 화면의 65% 를 먹었다.
     (시안 스크린샷은 세로로 긴 그림이라 29% 로 보였던 것)
     그래서 max-height 를 줬더니 이번엔 **aspect-ratio 가 비율을 지키려고 폭을 1348px 로 줄여**
     오른쪽에 검은 여백이 생겼다.
     -> aspect-ratio 를 쓰지 않고 폭 100% + 높이 고정. 배경이 cover 라 위아래만 조금 잘린다
        (잘리는 곳은 천장 여백과 바닥이라 인물·타이틀은 그대로). */
  width: 100%;
  height: min(52vh, 540px);
  min-height: 240px;
  padding: 0;
  overflow: hidden;
}
/* ★새 배너는 배너 칸과 비율이 같다(그림 3.765 : 칸 3.77)
   -> 잘림도 여백도 없어서 흐린 뒤판(::before/::after)이 더 이상 필요 없다. 걷어냈다. */

/* ★★원래 히어로에 있던 것들을 숨긴다 — 안 숨기면 별자리 배경과 글자가 배너를 덮는다.
   (2026-09-21 뒤판을 걷어내면서 이 줄까지 같이 지웠다가 배너가 안 보였다)
   지우지 않고 숨기기만 하는 이유: user.js:1209 가 #hero-particles 캔버스를 찾는다. */
.hero #hero-particles,
.hero .hero-bg,
.hero .hero-grid,
.hero .hero-divider,
.hero .hero-h1,
.hero .hero-sub { display: none !important; }

.hero .hero-body {
  position: absolute; inset: 0;
  padding: 0; margin: 0;
  display: block;
}
/* ★타이틀 로고 자리 (2026-09-21 새 배너 2560x680 기준으로 실측해서 맞춤)
   배너 그림을 밝기로 훑어 '비어 있는 검은 대리석 벽'을 찾았다:
     가로 52~70% (그보다 왼쪽은 인물·왕좌, 70~75% 는 밝은 기둥, 90%대는 GOOD PEOPLE 글귀)
     세로 20~80%
   -> 그 칸의 한가운데(가로 61%, 세로 50%)에 로고를 놓는다. */
.bc-hero-title {
  position: absolute;
  left: 61%;
  top: 36%;        /* 2026-09-21 두 번째 요청으로 더 위로 */
  transform: translate(-50%, -50%);
  width: 21%;
  max-width: 460px;
  max-height: 56%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── 게임 탭: 이모지 버튼 -> 이미지 버튼 ── */
.g-tab.toggle-btn {
  /* 시안은 탭 버튼이 화면 폭의 19.6%, 왕관이 4.5% (실측) — 그보다 조금 더 크게 */
  width: min(34vw, 420px);
  aspect-ratio: 3 / 1;
  height: auto;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none !important;
  opacity: .5;
  transition: opacity .2s ease, transform .2s ease;
}
.g-tab.toggle-btn .tab-icon,
.g-tab.toggle-btn .text-panel { display: none !important; }
.g-tab.toggle-btn[data-side="left"]  { background-image: url('/user/images/bc/btn-live.webp'); }
.g-tab.toggle-btn[data-side="right"] { background-image: url('/user/images/bc/btn-slot.webp'); }
.g-tab.toggle-btn.active { opacity: 1; }
.g-tab.toggle-btn:hover  { opacity: 1; transform: translateY(-2px); }

/* ── 탭 가운데 장식: 보석 -> 왕관 ──
   JS 가 tilt-left / tilt-right 클래스를 붙이므로 그 회전은 살려 둔다 */
#gem-deco {
  width: 108px; height: 72px;
  background: url('/user/images/bc/crown-emblem.webp?v=trim2') center / contain no-repeat;
  border: none !important;
  box-shadow: none !important;
  transition: transform .25s ease;
}
#gem-deco i { display: none !important; }
#gem-deco.tilt-left  { transform: rotate(-9deg) translateX(-3px); }
#gem-deco.tilt-right { transform: rotate(9deg)  translateX(3px); }

/* ── 섹션 제목: 오른쪽 보석을 왕관으로 (LIVE CASINO ♛) ── */
.sec-title-center i.sec-title-icon:last-of-type::before {
  content: "\f521";               /* Font Awesome 6 : fa-crown */
  font-weight: 900;
}
.sec-title-text { letter-spacing: .32em; }

/* ── 하단 4칸 ──
   ★처음엔 panel-frame.webp 를 border-image 로 16px 두께로 썼더니 틀이 안 맞았다.
     시안을 확대해 보니 **얇은 은색 선 + 둥근 모서리 + 제목줄 아래 구분선**이 전부다.
     이미지 없이 CSS 테두리로 하는 게 시안과 더 똑같다. */
.info-box {
  background: rgba(10,10,12,0.88) !important;
  border: 1px solid rgba(198,203,212,0.45) !important;
  border-image: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.info-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(198,203,212,0.32) !important;
}

/* ═══ 게임사 카드 ═══
   ★사장님 지시(2026-09-21): **배경만** 바꾼다. 여자 사진·로고 위치·테두리는 기존 그대로.
     (앞서 내가 여자 사진을 숨기고 로고를 위로 올렸던 것을 전부 되돌렸다)
   카드 배경은 user.js:2776 이 인라인 style 로 넣으므로 !important 로 그 한 줄만 덮는다. */
.live-thumb {
  background-image: url('/user/images/bc/card-bg-bc.webp?v=fit6') !important;
  /* ★카드 그림칸을 배경 그림 비율에 맞춘다(2026-09-21 사장님 요청).
     그림 1385x1136 = 1.219 인데 칸이 1:1 이라 좌우가 18% 잘렸다.
     칸을 같은 비율로 만들면 잘림도 여백도 없다.
     (전에는 그림 위아래를 늘려 정사각으로 만들었는데, 이제 원본 그대로 쓴다) */
  aspect-ratio: 1385 / 1136;
  flex: 0 0 auto !important;
}

/* ── 본문 폭 ──
   style.css 의 .main-wrap 은 max-width:1280px 라 1894 화면에서 68% 만 쓴다.
   시안은 콘텐츠가 화면의 97% 를 쓴다(시안 스크린샷이 1142px 화면이라 제한에 안 걸렸던 것).
   -> 넓은 화면에서도 시안과 같은 비례가 되게 넓힌다.
   ※ 게임사 카드 자체는 사장님 지시로 **건드리지 않는다**(2026-09-21). */
.main-wrap { max-width: min(94vw, 1760px) !important; }

/* ═══ 게임 영역 배경: 시안처럼 은빛 물결이 보이게 ═══
   #game-section-wrapper 는 인라인 style 로 금색 방사 그라데이션이 박혀 있다 */
/* ★배경이 게임 영역에서 끊기던 문제:
   아래쪽 .info-section 과 .partners 가 각자 배경(그라데이션+격자)을 깔아서 body 배경을 가리고 있었다.
   -> 셋 다 투명으로 만들어 body 의 은빛 물결이 맨 밑까지 비치게 한다. */
#game-section-wrapper,
.info-section,
.partners {
  background: transparent !important;
}
/* live-section 위에 깔린 격자무늬 제거 (시안엔 없다) */
#live-section > div[style*="linear-gradient"],
#slot-section > div[style*="linear-gradient"] { display: none !important; }

/* ── 좁은 화면 ── */
@media (max-width: 900px) {
  header { height: 74px !important; padding: 0 16px !important; }
  .hero   { margin-top: 74px !important; }
  .logo .bc-logo-img { height: 56px; }
  header .btn-ghost[onclick="openModal('login')"],
  header .btn-filled[onclick="openModal('register')"] { width: 74px; height: 28px; }
  #gem-deco { width: 76px; height: 52px; }
}
@media (max-width: 600px) {
  header { height: 56px !important; padding: 0 12px !important; }
  .hero   { margin-top: 56px !important; }
  /* 배너가 너무 납작해지지 않게 인물 쪽을 잘라내고 높이를 확보한다 */
  /* 모바일은 화면이 좁아 contain 으로 하면 그림이 너무 납작해진다 -> 인물 쪽을 보여주고 좌우를 자른다 */
  .hero { height: 26vh; min-height: 170px;
          background: #1c1813 url('/user/images/bc/hero-banner.webp?v=hd2') 62% center / cover no-repeat !important; }
  .bc-hero-title { left: 50%; transform: translate(-50%, -50%); width: 64%; max-height: 62%; }
  .logo .bc-logo-img { height: 28px; }
  header .btn-ghost[onclick="openModal('login')"],
  header .btn-filled[onclick="openModal('register')"] { width: 64px; height: 26px; }
  .g-tab.toggle-btn { width: 42vw; }
  #gem-deco { width: 58px; height: 40px; }
  /* 4칸은 이제 얇은 선이라 모바일에서 따로 줄일 게 없다 */
}

/* ═══════════════════════════════════════════════════════════════
   모달(회원가입/로그인/마이페이지)이 화면보다 길 때  (2026-09-21)

   [증상] 모바일에서 회원가입을 누르면 상자가 371x1417 인데 화면이 844 라
          위로 286px 잘리고 아래로 286px 넘쳤다. 제목과 첫 칸이 안 보이고
          **스크롤도 안 돼서 볼 방법이 없었다.**
   [원인] .modal-overlay 가 `display:flex; align-items:center` 인데 overflow 가 없다.
          flex 가운데 정렬은 내용이 넘치면 **위쪽으로도 밀려나가** 잘린다.
          .modal-box 에도 max-height 가 없다.
   [고치는 법] 바깥에 세로 스크롤을 주고, 정렬을 위쪽 기준으로 바꾼 뒤
          상자에 margin:auto 를 준다 -> 짧으면 가운데, 길면 위에서부터 스크롤.
   ※ 데스크톱(1894x960)에서도 상자가 874px 라 화면이 조금만 낮아지면 같은 문제가 났다.
     그래서 모바일 전용이 아니라 공통으로 고친다.
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  overflow-y: auto;
  align-items: flex-start !important;
  padding: 18px 10px;
  -webkit-overflow-scrolling: touch;
}
.modal-overlay > .modal-box {
  margin: auto;            /* 짧으면 세로 가운데, 길면 위부터 */
  max-height: none;
}

/* 모바일에선 여백·글자를 줄여 전체 높이를 낮춘다 */
@media (max-width: 600px) {
  .modal-box { padding: 18px 14px !important; }
  #modal-register .modal-box { width: 96vw !important; max-width: 96vw !important; }
  #modal-register input,
  #modal-register select {
    padding: 9px 10px !important;
    font-size: 0.86rem !important;
  }
  #modal-register .reg-msg { min-height: 11px !important; font-size: 0.66rem !important; margin-top: 1px !important; }
  #modal-register label { font-size: 0.74rem !important; }
}


/* ════ 모바일 럜딩 (bcmob 2026-09-22) — 스크린샷 레이아웃 ════ */
.bc-mnav { display: none; }
@media (max-width: 600px) {
  header, .navbar { display: none !important; }
  .hero { margin-top: 0 !important; height: 30vh !important; min-height: 200px !important;
          background: #14100c url('/user/images/bc/hero-banner.webp?v=hd2') left center / cover no-repeat !important; }
  .hero .bc-hero-title { left: 70% !important; top: 50% !important; transform: translate(-50%,-50%) !important;
                         width: 48% !important; max-height: 72% !important; }

  .bc-mnav { display: block; padding: 12px 12px 2px; }
  .bc-mnav-auth { display: flex; gap: 10px; margin-bottom: 12px; }
  .bc-mauth { flex: 1; height: 52px; border-radius: 10px; font-size: 1.02rem; font-weight: 800;
              letter-spacing: .04em; cursor: pointer; border: 1px solid rgba(198,203,212,.5); }
  .bc-mauth.login  { background: #0d0d10; color: #e8e8ea; }
  .bc-mauth.signup { background: linear-gradient(#ececed,#c7c8ce); color: #14110c; border-color: transparent; }

  .bc-mnav-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
                  background: rgba(198,203,212,.26); border: 1px solid rgba(198,203,212,.4);
                  border-radius: 12px; overflow: hidden; }
  .bc-mtile { background: #0b0b0e; display: flex; flex-direction: column; align-items: center;
              justify-content: center; gap: 7px; padding: 15px 3px; cursor: pointer; }
  .bc-mtile i { font-size: 1.22rem; color: #d7dae0; }
  .bc-mtile span { font-size: .76rem; color: #cfd2d8; font-weight: 600; white-space: nowrap; }
  .bc-mtile:active { background: #17171b; }

  /* LIVE / SLOT: 작은 토글 -> 풀폭 세로 스택 큰 버튼 */
  .game-tabs-inner { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
  #gem-deco { display: none !important; }
  .g-tab.toggle-btn { width: 100% !important; max-width: none !important; height: 78px !important;
                      aspect-ratio: auto !important; opacity: 1 !important; }
}


/* bcmob 히어로 v2 (2026-09-22): 시안 크롭 그대로 (여자 왼쪽+로고 오른쪽) */
@media (max-width: 600px) {
  .hero { margin-top: 0 !important; width: 100% !important; aspect-ratio: 860 / 500 !important;
          height: auto !important; min-height: 0 !important;
          background: #14100c url('/user/images/bc/hero-mobile-bc.webp?v=1') center top / cover no-repeat !important; }
  .hero .bc-hero-title { display: none !important; }
}


/* bcmob 라이브/슬롯 버튼 확대 (2026-09-22): 풀폭 + 이미지 3:1 비율 그대로 */
@media (max-width: 600px) {
  .game-tabs-inner { gap: 4px !important; }
  .g-tab.toggle-btn { width: 100% !important; height: auto !important;
                      aspect-ratio: 700 / 233 !important; background-size: contain !important;
                      opacity: 1 !important; }
}