/* [2026-09-20] 웹폰트: Noto Sans JP 를 직접 불러온다 (가변 폰트, 굵기 100~900 전 구간).
   이유: 지금까지는 PC 에 설치된 폰트에 의존해서, Noto 가 없는 Windows 는 Meiryo(Regular·Bold 두 가지뿐)로 그려졌다.
         그래서 굵기 600·900 이 전부 Bold 로 뭉개지고 PC 마다 화면이 달랐다.
   ※ @import 는 CSS 규칙상 파일의 다른 규칙보다 앞에 있어야 동작한다 → 이 줄만 맨 위에 둔다. 아래 기존 내용은 그대로.
   ※ display=swap: 폰트를 받는 동안은 기존 폰트로 먼저 보여 주고, 받으면 바꾼다(글자가 안 보이는 시간 없음).
   ※ 구글 폰트 서버에 접속할 수 없는 환경에서는 예전처럼 설치된 폰트로 나온다(화면이 깨지지는 않음). */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* MOMO base — 다크 테마 변수 + 공통 컴포넌트
   2026-09 업체 요청으로 라이트(흰 바탕) → 다크(어두운 바탕 + 골드 포인트)로 전환.
   골드 계열(--gold*, --lg-*, --grad-gold-*)은 라이트 때 값 그대로. 바탕·선·글자만 바꿈.
   톤은 네이비(어두운 블루). 처음엔 game.css의 보라 기운 검정(#17131c)에 맞췄으나
   업체 요청으로 블루 쪽으로 이동 — game.css는 아직 보라 톤 그대로임(별도 작업 필요). */
:root {
  --bg: #0e1220;          /* 페이지 바탕 */
  --panel: #141a2b;       /* 카드·모달·인풋 */
  --panel-2: #1b2337;     /* 패널 위에 한 단 더 떠 있는 면 (호버·고스트 버튼) */
  --panel-3: #232d45;     /* 호버 한 단 더 */
  --line: #26304a;
  --bg-rgb: 14, 18, 32;   /* 베일·오버레이용 rgba() 재료 */
  /* 사이드바: 위 검정 → 아래 다크 블루 세로 그라데이션 (모바일 드로어도 동일) */
  --grad-sidebar: linear-gradient(180deg, #0a0c13 0%, #0f1424 45%, #152040 100%);
  --text: #ede6d8;        /* 따뜻한 오프화이트 — 순백은 골드와 붙으면 차갑게 보임 */
  --text-muted: #9a9187;
  --text-faint: #6b645c;  /* 푸터 서브·플레이스홀더 */
  --gold: #b49a5a;
  --gold-deep: #96793a;
  --gold-soft: rgba(227, 183, 87, .14); /* 골드 틴트 배경 (선택 칩·태그) */
  --gold-edge: rgba(227, 183, 87, .42); /* 골드 틴트 테두리 */
  --on-gold: #241705;     /* 금 채움(알약·버튼·원판) 위 글자·아이콘. 흰 글자는 램프 밝은 쪽(#fddb9c)에서 묻힘 */
  --accent: #c9a961;

  /* ── MOMO 로고 골드 램프 ──────────────────────────────────────────────
     momo-logo-square.webp에서 실제 픽셀 추출(hue 25~55°·채도 18%↑, 19,400px).
     명도 분위별 대표색이라 로고와 같은 계조를 그대로 재현한다.
     핵심: 밝아질수록 hue가 32°(구릿빛) → 48°(레몬금)로 이동 —
     이 hue drift가 금속 골드의 정체라서, 2스톱 단색 그라데이션으론 안 나온다.  */
  --lg-shadow:    #5a3307; /* hue 32  lum 19% */
  --lg-deep:      #a86f18; /* hue 36  lum 38% */
  --lg-mid-dark:  #cf9a36; /* hue 39  lum 51% */
  --lg-mid:       #e3b757; /* hue 41  lum 62% */
  --lg-light:     #f3d479; /* hue 45  lum 71% */
  --lg-highlight: #f8eab2; /* hue 48  lum 84% */
  --lg-cream:     #fdf4dd; /* (라이트 시절 패널 배경용 — 다크에선 미사용, 램프 보존용으로 유지) */

  /* 채움용 골드 램프 — 왼쪽 진한 금 → 오른쪽 밝은 금, **한 방향**.
     디자인 시안(photo_2026-08-09_21-48-46.jpg)의 ホーム 활성 알약 실측:
       x 0% #c08f26 · 24% #d6a94e · 50% #e9c073 · 75% #f6d18e · 100% #fddb9c
     세로 단면은 평평(#fcda9b 고정) → 순수 가로 그라데이션.
     ※ 이전 버전은 어두움→시인밴드→어두움의 금속 질감이었으나 반려됨.
        시안은 반사 하이라이트 없이 매끈하게 흐르는 쪽. */
  --grad-gold-metal: linear-gradient(90deg,
    #c08f26 0%, #d6a94e 24%, #e9c073 50%, #f6d18e 75%, #fddb9c 100%);

  /* 섹션 타이틀·유저박스·읽기전용 필드 공통 — 어두운 금박 판에 밝은 금 글자.
     라이트 시절엔 연한 금박(#f8f2dc→#d5b15d) 위 어두운 글자(#513601)였으나
     다크 전환으로 컨셉을 뒤집음: 검정에 금가루 섞인 판 + 골드 램프 밝은 쪽 글자. */
  --grad-gold-plate-dark: linear-gradient(135deg,
    #2c2318 0%, #251d14 45%, #1d1710 100%);
  --gold-line: var(--gold-edge); /* 어두운 금박 판의 테두리 */
  --gold-ink:  var(--lg-light);  /* 어두운 금박 판 위 글자 */
  /* 원형/아이콘용 — 좌상단 하이라이트에서 우하단 그림자로 떨어지는 도금 톤 */
  --grad-gold-plate: linear-gradient(135deg,
    var(--lg-highlight) 0%, var(--lg-light) 22%, var(--lg-mid) 50%, var(--lg-mid-dark) 74%, var(--lg-deep) 100%);
  --danger: #d24a43;
  --sidebar-w: 300px;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(0,0,0,.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Noto Sans JP', 'Noto Sans KR', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  /* 콘텐츠 영역 블루 필터: 우상단에서 번지는 푸른 빛 + 아래로 갈수록 가라앉는 네이비.
     평면 단색이면 사이드바 그라데이션과 따로 놀아서 같은 공간감으로 묶는다. */
  background:
    radial-gradient(1400px 900px at 78% -10%, rgba(52, 84, 160, .22) 0%, rgba(52, 84, 160, 0) 60%),
    linear-gradient(180deg, #0f1424 0%, var(--bg) 55%, #0b0e1a 100%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* 다크 필수: 브라우저 기본 input 글자색이 검정이라 어두운 바탕에서 안 보임 */
input, textarea, select { font-family: inherit; color: var(--text); color-scheme: dark; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
ul { list-style: none; }

/* ── 스크롤바: 테마 골드 톤 (사이드바는 main.css에서 숨김 유지) ── */
html { scrollbar-color: var(--gold) var(--bg); } /* Firefox */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 5px;
  border: 2px solid var(--bg); /* 트랙 색 테두리로 얇아 보이게 */
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 14px; font-weight: 600;
  padding: 9px 22px; transition: filter .15s, background .15s;
}
.btn-gold { background: var(--grad-gold-metal); color: var(--on-gold); }
.btn-gold:hover { filter: brightness(1.08); }
.btn-outline { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.btn-outline:hover { background: var(--panel-3); border-color: var(--text-muted); }

/* ── 스플래시 (betgoat pulsate 참조) ── */
.page-splash {
  position: fixed; inset: 0; z-index: 9999999;
  display: flex; background: var(--bg);
  transition: opacity .4s ease;
}
.page-splash.fade-out { opacity: 0; pointer-events: none; }
.no-splash .page-splash { display: none; } /* 이번 세션에 이미 본 경우 (index.html head 스크립트) */

/* katsuwin 로더 기법: 정지 로고 + 링 2장이 서로 반대 방향·다른 속도로 회전 */
.splash-loader { position: relative; margin: auto; width: 340px; height: 340px; }
.splash-loader .loader-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.splash-loader .ring1 { animation: ring-spin 1.5s linear infinite; }
.splash-loader .ring2 { animation: ring-spin-rev 2.4s linear infinite; }
.page-splash .splash-logo {
  position: absolute; inset: 0; margin: auto;
  width: 210px; height: auto;
  animation: logo-breathe 2s ease-in-out infinite;
}
@keyframes ring-spin     { to { transform: rotate(360deg); } }
@keyframes ring-spin-rev { to { transform: rotate(-360deg); } }
@keyframes logo-breathe {
  0%, 100% { transform: scale(1);    opacity: .92; }
  50%      { transform: scale(1.05); opacity: 1; }
}
@media (max-width: 576px) {
  .splash-loader { width: 230px; height: 230px; }
  .page-splash .splash-logo { width: 140px; }
}
@keyframes pulsate {
  0%   { transform: scale(.8);  opacity: 0; }
  50%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(.8);  opacity: 0; }
}

/* ── 게임 카드 + 로딩 연출 (Wonder 그리드 / betgoat placeholder) ── */
/* 게임 그리드: 1열 최대 5개 (카지노·슬롯 공통).
   콘텐츠 컨테이너가 1200px로 묶여서(main.css .content) 6개는 카드가 187px까지 쪼그라듦 → 5개로. */
.game-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
@media (max-width: 1500px) { .game-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1200px) { .game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .game-grid { grid-template-columns: repeat(2, 1fr); } }

.game-card { cursor: pointer; min-width: 0; } /* min-width:auto면 긴 게임명(nowrap)이 그리드 열을 강제 확장 */
.game-card .thumb {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
  background: #0f131f; /* Wonder placeholder 검정 카드 */
}
.game-card .thumb::before {
  /* 로딩 중 로고 pulsate (betgoat) — 의도된 연출이므로 유지 */
  content: ''; position: absolute; inset: 0;
  background: url('../images/logo/momo-logo-square.webp') center / 96px no-repeat;
  filter: grayscale(1) brightness(2.2);
  opacity: 0; animation: pulsate 2s ease-out infinite;
}
.game-card .thumb img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s ease;
}
.game-card.loaded .thumb::before { animation: none; opacity: 0; }
.game-card.loaded .thumb img { opacity: 1; }
/* 호버 시 PLAY 버튼 (Wonder식) */
.game-card .thumb .g-hover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .2s ease;
}
.game-card:hover .thumb .g-hover { opacity: 1; }
.g-play {
  padding: 9px 28px; border-radius: 999px;
  background: var(--grad-gold-metal); color: var(--on-gold);
  font-size: 14px; font-weight: 700; letter-spacing: .08em;
  transform: translateY(8px); transition: transform .2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.game-card:hover .g-play { transform: translateY(0); }

.game-card .thumb .g-badge {
  position: absolute; z-index: 2; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--on-gold);
  background: linear-gradient(135deg, #f3d479, #cf9a36); /* 골드 (HOT 등) — 어두운 글자용으로 밝은 램프 */
}
.game-card:hover .thumb img { transform: scale(1.04); transition: opacity .45s ease, transform .3s ease; }
.game-card .g-name {
  margin-top: 9px; font-size: 15px; font-weight: 600;
  text-align: center; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 폭을 넘는 긴 이름은 "…" */
}
.game-card .g-provider {
  margin-top: 2px; font-size: 12px; letter-spacing: .02em;
  color: var(--lg-mid); text-align: center; /* 게임사명은 골드 포인트 — 회색이면 다크 바탕에 묻힘 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 호버 시 말줄임을 풀고 전체 이름을 카드 폭 밖으로 펼친다.
   width:max-content로 글자 길이만큼 넓히고 left/translate로 카드 중앙에 다시 맞추므로
   짧은 이름은 위치·모양이 그대로고, 긴 이름만 양옆 카드 위로 튀어나온다.
   레이아웃 높이는 한 줄 그대로라 카드가 흔들리지 않는다.
   text-shadow는 옆 카드 글자와 겹쳤을 때 가독성용(바탕색 글로우). */
.game-card:hover { position: relative; z-index: 1; } /* hs-nav(z-index 3)보다는 아래 */
.game-card:hover .g-name {
  position: relative; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: none;
  overflow: visible; text-overflow: clip;
  text-shadow: 0 0 4px var(--bg), 0 0 8px var(--bg), 0 0 14px var(--bg);
}
/* 모바일 2열은 카드가 170px 안팎이라 한 단계 낮춰 잘림을 줄인다 */
@media (max-width: 700px) {
  .game-card .g-name { font-size: 14px; }
  .game-card .g-provider { font-size: 11.5px; }
}