/* ============================================================
   반응형 규칙 일괄 관리 (이 파일이 항상 마지막에 로드됨)
   - 1200px 이상(데스크톱): 아무것도 건드리지 않음 (완전 불변)
   - 768~1199px(태블릿) / 767px 이하(모바일) / 430px 이하(소형)
   ⚠ 주의: --reel-row(54px)와 릴/심볼 줄 높이는 JS(ROW_H=54)와
     맞물려 있으므로 어떤 breakpoint에서도 절대 변경 금지
   ============================================================ */

/* ============================================================
   1199px 이하 : 1열 스택 레이아웃
   ============================================================ */
@media (max-width: 1199px) {

  /* ---------- 페이지 전체 가로 오버플로 금지 ---------- */
  html, body { overflow-x: hidden; }
  img, svg, canvas, video { max-width: 100%; }

  /* ---------- 고정 폭 컨테이너 유동화 ---------- */
  .gg-header-in, .gg-nav-in {
    width: auto; max-width: 1060px; padding-inline: 12px;
  }
  .gg-footer { width: auto; max-width: 1060px; padding-inline: 12px; }
  .gg-page-single { width: auto; padding-inline: 12px; }

  /* ---------- 네비게이션: 가로 스크롤 (스크롤바 숨김) ---------- */
  .gg-nav-in {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gg-nav-in::-webkit-scrollbar { display: none; }
  .gg-nav-item { flex: 0 0 auto; padding: 0 16px; }

  /* ---------- 메인: 완전 1열 (표시 순서 고정) ---------- */
  .gg-main {
    width: auto; max-width: 640px;
    margin: 14px auto 0;
    display: flex; flex-direction: column; gap: 12px;
    padding-inline: 12px;
  }
  /* 3컬럼 래퍼를 해체해서 카드들이 gg-main의 직접 자식처럼 배치되게 */
  .gg-col, .gg-col.gg-col-auto { display: contents; height: auto; min-height: 0; }
  .gg-main .gg-card, .gg-main .gg-slot {
    width: 100%; min-width: 0;
    flex: 0 0 auto;
    height: auto;
  }
  /* 표시 순서: 슬롯머신 → 최근당첨 → 내정보 → 출석체크 → 미션 → 잭팟 → 확률 → 안내 → 충전 */
  .gg-main .gg-slot    { order: 1; }
  .gg-main .gg-recent  { order: 2; }
  .gg-main .gg-me      { order: 3; }
  .gg-main .gg-att     { order: 4; }
  .gg-main .gg-mission { order: 5; }
  .gg-main .gg-jackpot { order: 6; }
  .gg-main .gg-prob    { order: 7; }
  .gg-main .gg-guide   { order: 8; }
  .gg-main .gg-charge  { order: 9; }

  /* 카드 고유 높이감 유지 */
  .gg-me { min-height: 252px; }
  .gg-mission { min-height: 170px; }

  /* ---------- 하단(상점 · 미니게임): 1열 ---------- */
  .gg-bottom {
    width: auto; max-width: 640px; height: auto;
    margin: 12px auto 0;
    display: flex; flex-direction: column; gap: 12px;
    padding-inline: 12px;
  }
  .gg-bottom .gg-card { width: 100%; min-width: 0; height: auto; }
  .gg-mini-grid { grid-auto-rows: 56px; }

  /* ---------- 포인트 상점: 카드 내부만 가로 스크롤 캐러셀 ---------- */
  .gg-shop { overflow: hidden; }
  .gg-shop-hint { display: inline; }
  .gg-shop-scroll {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y;
    margin-inline: -18px;           /* 카드 패딩(18px)까지 좌우로 확장 */
    scrollbar-width: none;
  }
  .gg-shop-scroll::-webkit-scrollbar { display: none; }
  .gg-shop-items {
    display: flex; width: max-content; gap: 12px;
    grid-template-columns: none;
    padding: 4px 18px 10px;
  }
  .gg-shop-item {
    flex: 0 0 min(72vw, 220px);
    scroll-snap-align: start;
  }

  /* ---------- 관리자/거래 테이블: 표 내부만 가로 스크롤 ---------- */
  .gg-table { overflow-x: auto; }
  .gg-table .gg-tr { min-width: 820px; }

  /* ---------- 랭킹 페이지 ---------- */
  .gg-rk-grid { grid-template-columns: minmax(0, 1fr); }
  /* 랭킹표는 3컬럼뿐이라 가로 스크롤 없이 그대로 (관리자 표 규칙 무시) */
  .gg-rk-table .gg-tr { min-width: 0; }

  /* ---------- 슬롯 캐비닛 여백 (레버가 밖으로 안 나가게) ---------- */
  .gg-slot { padding: 20px 18px 24px; }
  .gg-slot-frame { padding: 20px 44px 26px 20px; }
}

/* ============================================================
   767px 이하 : 모바일 — 8px spacing 시스템
   ============================================================ */
@media (max-width: 767px) {

  /* ---------- 헤더: 2단 허용 + 압축 ---------- */
  .gg-header-in {
    height: auto; min-height: 0;
    flex-wrap: wrap; row-gap: 8px;
    padding: 10px 12px;
  }
  .gg-logo { gap: 8px; }
  .gg-logo-img { width: 36px; height: 36px; }
  .gg-logo-title { font-size: 19px; white-space: nowrap; }
  .gg-header-right { gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .gg-profile-chip { height: 40px; padding: 0 12px 0 5px; gap: 6px; }
  .gg-profile-chip .gg-avatar { width: 30px; height: 30px; }
  .gg-profile-chip .gg-nick {
    max-width: 64px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 13px;
  }
  .gg-points-chip { height: 36px; padding: 0 10px; font-size: 14px; border-radius: 12px; }
  .gg-points-chip .gg-coin { width: 18px; height: 18px; }
  #gg-logout-btn { height: 30px; padding: 0 10px; font-size: 12px; }

  /* ---------- 카드 공통 ---------- */
  .gg-main .gg-card, .gg-bottom .gg-card { padding: 16px; border-radius: 18px; }

  /* ---------- 슬롯머신 (8px spacing 시스템) ---------- */
  .gg-slot { min-height: 0; padding: 18px 16px 22px; }
  .gg-slot-title { font-size: clamp(24px, 7vw, 30px); letter-spacing: 1px; gap: 8px; }
  .gg-slot-title .gg-s-ico { width: 34px; height: 34px; }
  /* 제목 → 오리 8px, 오리 → 릴 14px (마스코트는 96px 정수 배율 유지) */
  .gg-slot-duck-wrap { margin: 8px auto 14px; }
  .gg-slot-frame { padding: 16px 40px 22px 14px; }
  .gg-reels { gap: 8px; }
  /* 릴 → 베팅 16px, 베팅 제목 → 칩 10px, 칩 → START 14px */
  .gg-slot-bet { margin-top: 16px; padding: 14px 12px 16px; gap: 10px; }
  .gg-chip-row { gap: 12px; }
  .gg-chip {
    width: clamp(52px, 16vw, 62px);
    height: clamp(52px, 16vw, 62px);
    font-size: 13px;
  }
  .gg-start-btn { width: 100%; min-height: 64px; }
  .gg-start-btn b { font-size: clamp(18px, 5.5vw, 22px); }

  /* ---------- 출석체크: 요일 7개 한 줄 ---------- */
  .gg-att-days {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px; justify-items: center;
  }

  /* ---------- 상점 캐러셀: 카드 패딩(16px)에 맞춰 bleed 조정 ---------- */
  .gg-shop-scroll { margin-inline: -16px; }
  .gg-shop-items { padding: 4px 16px 10px; }

  /* ---------- 관리자 회원 관리: 모바일 카드형 ----------
     가로 스크롤 없이 한 화면에서 바로 포인트 지급/회수 가능 */
  .gg-admin-users { overflow-x: visible; }
  .gg-admin-users .gg-tr.gg-tr-head { display: none !important; }
  .gg-admin-users .gg-tr {
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 10px;
    padding: 14px 14px 13px;
  }
  /* 1: 아이디 · 2: 닉네임 · 3: 상태 · 4: 권한 · 5: 포인트 · 6: 지급/회수 · 7: 관리(운영자만) */
  .gg-admin-users .gg-tr > span:nth-child(1) { grid-column: 1; grid-row: 2; font-size: 11.5px; color: var(--tx-sub); }
  .gg-admin-users .gg-tr > span:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 900; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gg-admin-users .gg-tr > span:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  .gg-admin-users .gg-tr > span:nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end; }
  .gg-admin-users .gg-tr > span:nth-child(5) { grid-column: 1 / -1; grid-row: 3; font-size: 15px; }
  .gg-admin-users .gg-tr > span:nth-child(5)::after { content: " DC"; font-size: 11px; font-weight: 800; color: var(--tx-sub); }
  .gg-admin-users .gg-tr > span:nth-child(6) { grid-column: 1 / -1; grid-row: 4; }
  .gg-admin-users .gg-tr > span:nth-child(6) .gg-mini-input { flex: 1; min-width: 0; width: auto; }
  .gg-admin-users .gg-tr > span:nth-child(7) { grid-column: 1 / -1; grid-row: 5; }
  .gg-admin-users .gg-tr > span:nth-child(7) .gg-select { flex: 1; min-width: 0; }

  /* ---------- 랭킹 페이지 (모바일) ---------- */
  .gg-rk-hero-title { font-size: 22px; }
  .gg-rk-tab { height: 36px; padding: 0 13px; font-size: 12px; }
  /* TOP3: 2위·1위·3위 한 줄 유지, 아바타는 화면에 맞춰 축소 */
  .gg-rk-top3-card { padding: 20px 10px 16px; }
  .gg-rk-top3 { gap: 4px; }
  .gg-rk-top-avatar { width: clamp(56px, 19vw, 84px) !important; height: clamp(56px, 19vw, 84px) !important; }
  .gg-rk-podium.is-first .gg-rk-top-avatar { width: clamp(68px, 23vw, 96px) !important; height: clamp(68px, 23vw, 96px) !important; }
  .gg-rk-top-empty { width: clamp(56px, 19vw, 84px); height: clamp(56px, 19vw, 84px); }
  .gg-rk-top-name { font-size: 12px; }
  .gg-rk-podium.is-first .gg-rk-top-name { font-size: 14px; }
  .gg-rk-top-dc { font-size: 11px; }
  .gg-rk-top-dc.is-gold { font-size: 13px; }
  /* 표: 순위 / 아바타+닉네임 / 포인트 3개만 (좁은 컬럼) */
  .gg-rk-tr { grid-template-columns: 44px minmax(0, 1fr) 104px; padding: 11px 10px; }
  .gg-rk-cell-dc { font-size: 12px; }

  /* ---------- 푸터: 세로 정렬 ---------- */
  .gg-footer { height: auto; flex-direction: column; gap: 6px; padding-block: 14px; }
  .gg-footer-links { position: static; }
}

/* ============================================================
   430px 이하 : 소형 모바일
   ============================================================ */
@media (max-width: 430px) {
  .gg-main, .gg-bottom { padding-inline: 10px; gap: 10px; }
  .gg-header-in { padding: 8px 10px; }
  .gg-logo-sub { display: none; }
  .gg-profile-chip .gg-lv { display: none; }
  .gg-nav-item { padding: 0 12px; font-size: 13px; }

  .gg-main .gg-card, .gg-bottom .gg-card { padding: 14px; }
  .gg-slot { padding: 16px 12px 20px; }
  .gg-slot-frame { padding: 14px 38px 20px 12px; }
  .gg-chip-row { gap: 10px; }

  .gg-shop-scroll { margin-inline: -14px; }
  .gg-shop-items { padding: 4px 14px 10px; }
  .gg-shop-item { flex-basis: min(68vw, 200px); }
}