/* ============================================================
   반응형 규칙 일괄 관리 (이 파일이 항상 마지막에 로드됨)
   - 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; }

  /* ---------- 메뉴는 전부 하단바로 ----------
     보유 금액이 길어지면(예: 63,000,000 DC) 헤더가 옆으로 밀려서
     오른쪽 끝 햄버거가 화면 밖으로 나가 버렸다.
     좁은 화면에서는 상단 네비·햄버거를 아예 쓰지 않고 하단바 하나로 모은다. */
  .gg-nav { display: none; }
  .gg-nav-burger { display: none; }
  .gg-bottomnav { display: flex; }
  body { padding-bottom: 68px; }          /* 하단바 자리 */

  /* 헤더가 절대 화면을 넘지 않게.
     양보하는 순서: 로고 → 닉네임 → (금액은 끝까지 그대로) */
  .gg-header-in { gap: 8px; min-width: 0; }
  .gg-logo { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .gg-logo-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gg-header-right { min-width: 0; flex: 0 1 auto; }
  .gg-profile-chip { min-width: 0; flex: 0 1 auto; }   /* 금액이 아주 길면 닉네임이 양보한다 */
  .gg-points-chip { flex: 0 0 auto; }     /* 보유 금액은 줄이지 않는다 */
  #gg-logout-btn { flex: 0 0 auto; }

  /* ---------- 네비게이션: 가로 스크롤 (스크롤바 숨김) ---------- */
  .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-jackpot { order: 3; }
  .gg-main .gg-me      { order: 4; }
  .gg-main .gg-att     { order: 5; }
  .gg-main .gg-mission { 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; }

  /* ---------- 홈 (태블릿 768~1199: 데스크톱 구조 유지 · 간격 축소) ---------- */
  .gg-home { width: auto; margin: 14px 12px 0; gap: 14px; }
  .gg-home-row1 { grid-template-columns: 262px minmax(0, 1fr); gap: 14px; }
  .gg-home-row2 { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 14px; }
  .gg-home-row3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gg-home-hero-art { height: 92%; }
  .gg-home-games { gap: 12px; }

  /* ---------- 슬롯 캐비닛 여백 (레버는 absolute — 본체 정렬 불변) ---------- */
  .gg-slot { padding: 14px 16px 18px; }
}

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

  /* ---------- 헤더: 시안처럼 1줄 (로고 | 프로필·포인트·햄버거) ---------- */
  .gg-header-in {
    height: 58px; min-height: 0;
    flex-wrap: nowrap; gap: 6px;
    padding: 0 10px;
  }
  .gg-logo { gap: 6px; flex: none; }
  /* 로고 오리 그림을 뺐으므로 모바일에서도 글자를 보여준다 (작게) */
  .gg-logo-title { font-size: 16.5px; letter-spacing: -0.6px; white-space: nowrap; }
  .gg-logo-sub { display: none; }
  .gg-header-right { gap: 5px; margin-left: auto; flex-wrap: nowrap; }
  .gg-profile-chip { height: 32px; padding: 0 8px 0 4px; gap: 4px; }
  .gg-profile-chip .gg-avatar { width: 23px; height: 23px; }
  .gg-profile-chip .gg-nick {
    max-width: 48px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 11px;
  }
  .gg-profile-chip .gg-lv { display: none; }
  .gg-points-chip { height: 32px; padding: 0 8px; font-size: 11.5px; border-radius: 10px; white-space: nowrap; }
  .gg-points-chip .gg-coin { width: 14px; height: 14px; }
  .gg-points-chip small { font-size: 10px; }
  /* 모바일 로그아웃 버튼: 보유포인트 옆 */
  #gg-logout-btn { display: inline-flex; height: 30px; padding: 0 9px; font-size: 11px; white-space: nowrap; }

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

  /* ============================================================
     홈 — 모바일 전용 레이아웃 (2번 시안)
     ============================================================ */
  /* 헤더: 메뉴는 하단바가 전부 맡는다 (햄버거·상단 네비 사용 안 함) */
  .gg-nav-burger { display: none; }
  .gg-nav { display: none; }
  .gg-nav.is-open .gg-nav-in {
    height: auto; flex-direction: column; align-items: stretch; gap: 0; overflow: visible;
  }
  .gg-nav.is-open .gg-nav-item { padding: 12px 16px; border-bottom: 1px solid #eef4fb; border-left: 3px solid transparent; }
  .gg-nav.is-open .gg-nav-item.is-active { border-bottom-color: #eef4fb; border-left-color: var(--blue); }
  .gg-bottomnav { display: flex; }
  body { padding-bottom: 68px; }   /* 하단 네비 자리 */
  /* 운영진은 '관리자' 까지 5칸이라 좁은 화면에서 글자를 조금 줄인다 */
  .gg-bottomnav.is-5 a, .gg-bottomnav.is-5 .gg-bn-games { font-size: 9.5px; letter-spacing: -.3px; gap: 2px; }
  .gg-bottomnav.is-5 a img, .gg-bottomnav.is-5 .gg-bn-games img { width: 21px; height: 21px; }
  /* 6칸(운영진: 홈·게시판·랭킹·상점·게임·관리자) — 글자와 아이콘을 한 단계 더 줄여 넘치지 않게 */
  .gg-bottomnav.is-6 a, .gg-bottomnav.is-6 .gg-bn-games { font-size: 9px; letter-spacing: -.5px; gap: 1px; padding: 0 2px; }
  .gg-bottomnav.is-6 a img, .gg-bottomnav.is-6 .gg-bn-games img { width: 19px; height: 19px; }
  .gg-bottomnav.is-6 a span, .gg-bottomnav.is-6 .gg-bn-games span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 7칸(운영진: 홈·게시판·랭킹·상점·게임·확성기·관리자) */
  .gg-bottomnav.is-7 a, .gg-bottomnav.is-7 .gg-bn-games { font-size: 8.5px; letter-spacing: -.6px; gap: 1px; padding: 0 1px; }
  .gg-bottomnav.is-7 a img, .gg-bottomnav.is-7 .gg-bn-games img { width: 18px; height: 18px; }
  .gg-bottomnav.is-7 a span, .gg-bottomnav.is-7 .gg-bn-games span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* 히어로 (2번 시안) */
  .gg-home-hero { height: clamp(168px, 46vw, 208px); }
  /* 배너 슬라이드: 모바일은 가로가 짧아 4:1 배너가 많이 잘리므로
     핵심(제목 + 참여하기 버튼)이 있는 왼쪽을 기준으로 보여준다.
     배너별로 모바일 초점만 달리하려면 --hero-focus-m 을 주면 된다 (2026-08-17). */
  .gg-hero-photo { object-position: var(--hero-focus-m, var(--hero-focus, 0% 50%)); }
  .gg-hero-dots { right: 12px; bottom: 10px; padding: 5px 8px; gap: 6px; }
  .gg-hero-dot { width: 7px; height: 7px; }
  .gg-hero-dot.is-on { width: 17px; }
  .gg-home-hero-txt { padding: 20px 0 0 16px; }
  .gg-home-hero-welcome { font-size: 11px; margin-bottom: 5px; letter-spacing: 1.5px; }
  .gg-home-hero-title { font-size: clamp(21px, 6vw, 34px); margin-bottom: 6px; }
  .gg-home-hero-sub { font-size: clamp(10px, 2.8vw, 11.5px); margin-bottom: 12px; }
  .gg-home-hero-btn { height: 38px; padding: 0 14px; font-size: 12.5px; gap: 7px; }
  .gg-home-hero-btn img { width: 24px; height: 24px; }
  .gg-home-hero-btn:hover { transform: none; filter: none; }
  .gg-home-hero-art { top: auto; transform: none; bottom: 2px; height: auto; width: min(56%, 400px); }

  /* ---------- 덕플라이 전광판 배너 (모바일) ----------
     가로가 짧아 3:1 배너가 좌우로 잘리므로, 주인공 오리가 있는 오른쪽을 기준으로 보여준다.
     문구는 왼쪽에 작게 두어 주인공을 가리지 않는다. */
  .df-hero-bg { object-position: 72% 50%; }
  .df-hero-scrim {
    background: linear-gradient(90deg,
      rgba(4, 24, 58, .88) 0%,
      rgba(4, 24, 58, .74) 30%,
      rgba(4, 24, 58, .34) 52%,
      rgba(4, 24, 58, 0) 68%);
  }
  .df-hero-txt { width: 58%; min-width: 0; padding: 16px 0 0 16px; }
  .df-hero-kicker { font-size: 10px; letter-spacing: 1.2px; margin-bottom: 5px; }
  .df-hero-title { font-size: clamp(24px, 7.4vw, 38px); margin-bottom: 6px; }
  .df-hero-sub {
    font-size: clamp(10.5px, 3vw, 12.5px); margin-bottom: 12px;
    word-break: keep-all;              /* 한글이 낱말 단위로 줄바꿈되게 */
    /* 두 줄까지만 — 넘치면 잘라서 버튼이 밀려나지 않게 */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .df-hero-btn { height: 38px; padding: 0 18px; font-size: 13px; gap: 6px; }
  .df-hero-btn::before { font-size: 10px; }
  .df-hero-btn:hover { transform: none; filter: none; }

  /* 바로가기: 2행 × 3열 */
  .gg-home-quick { grid-template-columns: repeat(3, 1fr); padding: 10px 8px; }
  .gg-home-quick-item { padding: 16px 4px 14px; }
  .gg-home-quick-item:hover { background: transparent; }
  .gg-home-quick-item:nth-child(3n) { border-right: none; }
  /* 6칸이라 모바일에서는 3 + 3 으로 두 줄이 된다 — 첫 줄 아래에만 구분선 */
  .gg-home-quick-item:nth-child(-n+3) { border-bottom: 1px solid #eef4fb; }
  .gg-home-quick-item img { height: 44px; }
  .gg-home-quick-name { font-size: 12.5px; }
  .gg-home-quick-sub { font-size: 10px; }

  /* 내 정보: 가로형 (2번 시안) */
  .gg-home-row1 { grid-template-columns: minmax(0, 1fr); }
  .gg-home-me2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: #f2f8fe; }
  .gg-home-me-title { display: none; }
  .gg-home-me-avatar { width: 82px; height: 82px; margin: 0; order: 1; }
  .gg-home-me-id { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; min-width: 0; order: 2; flex: 1; }
  .gg-home-me-name { font-size: 15px; }
  .gg-home-me-name .gg-lv { background: #fff; }
  .gg-home-me-id .lbl { font-size: 10px; }
  .gg-home-me-id .pts { font-size: 18px; }
  .gg-home-me-actions { display: flex; flex-direction: column; gap: 7px; order: 3; }
  .gg-home-me-actions .gg-btn { height: 32px; padding: 0 14px; font-size: 11.5px; }
  /* 우편 알림 — 충전 버튼을 가리지 않도록 아바타 왼쪽 위로 이동 */
  .gg-home-me2 .gg-mail-corner { top: 12px; right: auto; left: 8px; }
  /* 확성기 아이콘 — 모바일에서는 종 «오른쪽» (2026-08-18) */
  .gg-home-me2 .gg-mega-corner { top: 12px; right: auto; left: 54px; }
  /* (총 게임 횟수 · 총 당첨 금액 칸 제거) */

  /* 출석: 7칸 유지 · 안내바 숨김 */
  .gg-home-att-note { display: none; }
  .gg-home-att-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .gg-home-att-day { padding: 8px 1px 7px; gap: 4px; border-radius: 10px; }
  .gg-home-att-day .d { font-size: 9.5px; }
  .gg-home-att-day .r { font-size: 8.5px; letter-spacing: -.3px; }
  .gg-home-att-day img { height: 22px; }
  .gg-home-att-day.is-done::after { top: 2px; right: 2px; width: 13px; height: 13px; font-size: 8px; }
  .gg-home-att-btn { height: 46px; font-size: 14px; }

  /* 미션 + 잭팟: 2열 (미션이 왼쪽 — 2번 시안) */
  .gg-home-row2 { grid-template-columns: 1.15fr 1fr; gap: 8px; }
  .gg-home-row2 > .gg-card:first-child { order: 2; }   /* 잭팟 → 오른쪽 */
  .gg-home-row2 > .gg-card { padding: 11px; }
  .gg-home-ms-head { flex-wrap: wrap; row-gap: 4px; }
  .gg-home-ms-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 5px; row-gap: 4px; padding: 8px 0 7px; }
  .gg-home-ms-name { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gg-home-ms-name small { margin-left: 3px; font-size: 9.5px; }
  .gg-home-ms-reward { font-size: 10px; white-space: nowrap; }
  /* 홈 카드는 폭이 좁아 진행중/완료 배지를 생략 (미션 페이지에서는 그대로 보임) */
  .gg-home-row2 .gg-home-ms-badge { display: none; }
  /* 진행중/완료 배지는 숨기지만 "보상받기" 버튼은 모바일에서도 반드시 보여야 함.
     폭이 좁으니 미션명을 한 줄 통째로 쓰고, 보상액+버튼을 그 아래 줄에 둔다 (이름 잘림 방지) */
  /* 홈 카드: 폭이 좁으니 미션명을 한 줄 통째로 쓰고 보상액+버튼을 아랫줄에 (이름 잘림 방지) */
  .gg-home-row2 .gg-home-ms-row { row-gap: 3px; }
  .gg-home-row2 .gg-home-ms-name { grid-column: 1 / -1; }
  .gg-home-row2 .gg-home-ms-reward { text-align: left; }
  .gg-home-ms-claim { justify-self: end; font-size: 10.5px; padding: 4px 10px; border-radius: 8px; }
  .gg-home-ms-bar { height: 5px; }
  /* 미션 페이지는 폭이 넉넉하므로 한 줄 유지 (이름 | 보상 | 버튼) */
  .gg-ms-page .gg-home-ms-row { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; padding: 11px 0 10px; }
  .gg-ms-page .gg-home-ms-name { font-size: 12.5px; }
  .gg-ms-page .gg-home-ms-name small { font-size: 11px; margin-left: 6px; }
  .gg-ms-page .gg-home-ms-reward { font-size: 12px; }
  .gg-ms-page .gg-home-ms-claim, .gg-ms-page .gg-home-ms-badge { font-size: 11.5px; padding: 5px 11px; }
  .gg-ms-guide { font-size: 11.5px; padding: 9px 11px; }
  .gg-ms-reset { font-size: 10.5px; }

  /* ---------- 홈 하단(상점·미니게임): 모바일 1열 + 카드 내부 캐러셀 유지 ---------- */
  .gg-home-bottom { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* 상점 캐러셀 규칙은 .gg-bottom 안에 있을 때만 적용돼 있었으므로 홈에서도 동작하도록 */
  .gg-home-bottom .gg-card { padding: 16px; border-radius: 18px; }

  /* ---------- 오리레이스 사이드 카드: 모바일 1열 ---------- */
  .dr-side { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }

  /* ---------- 효과음 버튼 (모바일: 살짝 작게) ---------- */
  .gg-sfx-btn { width: 28px; height: 28px; font-size: 13px; top: 8px; right: 8px; }

  /* ---------- New 뱃지 (모바일) ---------- */
  .gg-new-badge { height: 14px; padding: 0 5px; font-size: 8.5px; }
  .gg-bottomnav .gg-new-badge { top: 3px; right: calc(50% - 22px); }
  .gg-home-quick-item .gg-new-badge { top: 5px; right: 6px; height: 15px; font-size: 9px; }

  /* ---------- 관리자 → 보상 설정 ---------- */
  .rw-days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; }
  .rw-num { width: 100%; min-width: 0; }
  .rw-day-lbl { width: 42px; font-size: 11.5px; }
  .rw-box-head, .rw-box-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 9px 11px; }
  .rw-cycle { grid-column: 1 / -1; text-align: left; font-size: 10.5px; }
  .rw-rest { width: 100%; }
  .rw-ms-row { flex-wrap: wrap; }
  .rw-ms-name { flex: 1 1 100%; }
  .rw-ms-row .rw-num { flex: 1 1 auto; }
  .gg-home-jp-panel { min-height: 140px; margin-top: 10px; }
  .gg-home-jp-amt { font-size: clamp(15px, 4.5vw, 20px); margin-top: 10px; }
  .gg-home-jp-who { font-size: 21px; margin-top: 4px; }
  .gg-home-jp-time { font-size: 9.5px; }
  .gg-home-jp-crown { width: 30px; height: 25px; top: -13px; }

  /* 인기게임: 가로 스크롤 캐러셀 (페이지는 밀리지 않음) */
  .gg-home-row3 { grid-template-columns: minmax(0, 1fr); }
  .gg-home-games {
    display: flex; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px 8px;
  }
  .gg-home-games::-webkit-scrollbar { display: none; }
  .gg-home-game { flex: 0 0 168px; scroll-snap-align: start; }
  .gg-home-game:hover { transform: none; box-shadow: 0 6px 16px rgba(96, 143, 214, .18); }
  .gg-home-games-arrow { display: flex; }
  .gg-home-games-arrow.is-left { left: -6px; }
  .gg-home-games-arrow.is-right { right: -6px; }

  /* 공지: 2열 (시안) */
  .gg-home-nt-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .gg-home-nt-row { font-size: 11px; padding: 10px 0; gap: 6px; }
  .gg-home-nt-row small { font-size: 10px; }
  .gg-home-nt-grid .gg-home-nt-row:nth-last-child(-n+2) { border-bottom: none; }

  /* 친구초대: 높이 축소 */
  .gg-home-invite { padding: 13px 16px; gap: 12px; }
  .gg-home-invite-duck { width: 52px; }
  .gg-home-invite-txt b { font-size: 14px; }
  .gg-home-invite-txt span { font-size: 11px; }
  .gg-home-invite-btn { height: 36px; padding: 0 20px; font-size: 13px; }
  .gg-home-invite-art { display: none; }

  /* Footer: 간단 */
  .gg-home-footer-links { display: none; }
  .gg-home-footer-bottom { flex-direction: column; gap: 10px; align-items: center; }

  /* ---------- 슬롯머신 (8px spacing 시스템) ---------- */
  .gg-slot { min-height: 0; padding: 12px 12px 16px; border-width: 5px; border-radius: 28px; }
  /* 헤더: 좁은 화면에선 세로 스택 — 잭팟줄 → 로고 (고무오리는 숨김) */
  .gg-slot-head {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; height: auto; min-height: 0; margin-bottom: -4px; padding-top: 4px;
  }
  .gg-slot-jp { position: static; justify-content: center; }
  .gg-slot-jp-amt { position: relative; left: auto; bottom: auto; }
  .gg-slot-logo { position: static; transform: none; }
  .gg-slot-rduck { position: static; }
  .gg-slot-jp-duck { width: 48px; height: 48px; }
  .gg-slot-jp-amt { font-size: 12px; padding: 6px 10px 6px 18px; }
  .gg-slot-logo { width: min(76vw, 252px); }
  .gg-slot-rduck { display: none; }
  .gg-reel-nums { gap: 8px; margin-bottom: 8px; }
  .gg-slot-frame { padding: 12px 12px 16px; }
  .gg-reels { gap: 8px; }
  /* 좁은 릴에선 확대 배율 축소 (중심 고정 — 당첨선 정렬 불변) */
  .gg-reel-window { transform: scale(1.12); }
  .gg-payline { left: -20px; right: -20px; }
  .gg-payline::before, .gg-payline::after { font-size: 24px; }
  .gg-slot-lever { right: -10px; top: 24px; height: 190px; transform: scale(.85); transform-origin: top right; }
  /* 릴 → 베팅 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: 68px; }
  .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; }

  /* ---------- 관리자 회원 관리: 모바일 카드형 ----------
     가로 스크롤 없이 한 화면에서 바로 포인트 지급/회수 가능 */
  /*  한 회원 = 카드 한 장. 위 두 줄은 "누구인지", 아래 두 줄은 "무엇을 할지".
        1줄 ─ 닉네임 ................. 상태
        2줄 ─ 아이디 ................. 권한
        3줄 ─ 보유 포인트 ............ 기록 보기
        4줄 ─ 지급 / 회수 / 🎁  (한 줄 가득)
        5줄 ─ 권한 바꾸기 · 정지 · 강퇴 (운영자만)                     */
  .gg-admin-users { overflow-x: visible; }
  .gg-admin-users .gg-tr,
  .gg-admin-users.is-admin .gg-tr {
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px 10px;
    padding: 13px 13px 12px;
  }
  /* 카드형에서는 표 머리글이 필요 없다 (위 규칙보다 뒤에 둬야 가려진다) */
  .gg-admin-users .gg-tr.gg-tr-head,
  .gg-admin-users.is-admin .gg-tr.gg-tr-head { display: none !important; }
  /* 1: 아이디 · 2: 닉네임 · 3: 상태 · 4: 권한 · 5: 포인트 · 6: 기록 · 7: 지급/회수 · 8: 관리(운영자만) */
  .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: 14.5px; }
  .gg-admin-users .gg-tr > span:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  /* 상태 칸은 배지 + 경과 시간 두 줄이라 오른쪽으로 맞춘다 */
  .gg-admin-users .u-status-cell { align-items: flex-end; margin-top: 0; }
  .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; grid-row: 3; font-size: 16px; text-align: left !important;
  }
  .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: 2; grid-row: 3; justify-self: end; }
  /* 지급/회수 줄 — 입력칸이 남는 자리를 다 먹고 버튼은 제 크기를 지킨다 */
  .gg-admin-users .gg-tr > span:nth-child(7) {
    grid-column: 1 / -1; grid-row: 4;
    display: flex; gap: 6px; align-items: center;
    padding-top: 9px; border-top: 1px dashed #e8f0fa;
  }
  .gg-admin-users .gg-tr > span:nth-child(7) .gg-mini-input { flex: 1 1 0; min-width: 0; width: auto; }
  .gg-admin-users .gg-tr > span:nth-child(7) .gg-btn { flex: 0 0 auto; height: 34px; }
  .gg-admin-users .gg-tr > span:nth-child(8) {
    grid-column: 1 / -1; grid-row: 5;
    display: flex; gap: 6px; align-items: center;
  }
  .gg-admin-users .gg-tr > span:nth-child(8) .gg-select { flex: 1 1 0; min-width: 0; }
  .gg-admin-users .gg-tr > span:nth-child(8) .gg-btn { flex: 0 0 auto; height: 34px; }

  /* 전체 회원 일괄 도구 — 버튼이 화면 밖으로 나가지 않게 감싸 내린다 */
  .gg-admin-bulk { width: 100%; }
  .gg-admin-bulk-lab { width: 100%; }
  .gg-admin-bulk .gg-mini-input { flex: 1 1 90px; width: auto; }
  /* 버튼이 글자보다 작아지지 않게 — 좁으면 줄여서 찌그러뜨리지 말고 다음 줄로 내린다 */
  .gg-admin-bulk .gg-btn { flex: 1 1 auto; min-width: max-content; }

  /* ---------- 랭킹 페이지 (모바일) ---------- */
  .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: 8px 10px; }
  .gg-rk-cell-user { gap: 8px; }
  /* 좁은 화면에서는 아바타를 조금 줄여 닉네임 자리를 확보한다 */
  .gg-rk-row-avatar { width: 36px !important; height: 36px !important; }
  .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-home { padding-inline: 8px; gap: 10px; }
  .gg-home-row2 { gap: 6px; }
  .gg-slot { padding: 10px 10px 14px; }
  .gg-slot-frame { padding: 10px 10px 14px; }
  .gg-slot-lever { right: -7px; transform: scale(.78); transform-origin: top right; }
  .gg-slot-jp-duck { width: 40px; height: 40px; }
  .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); }
}

/* ============================================================
   서버 점검 모드 — 태블릿 / 모바일
   ============================================================ */
@media (max-width: 767px) {
  .gg-maint { padding: 18px 14px; min-height: 100svh; }
  .gg-maint-card { padding: 30px 20px 24px; border-radius: 16px; }
  .gg-maint-duck { width: 88px; height: 88px; }
  .gg-maint-title { font-size: 18.5px; }
  .gg-maint-msg { font-size: 13px; }
  .gg-maint-btns .gg-btn { flex: 1 1 132px; }

  .gg-maint-bar {
    gap: 8px;
    padding: 8px 12px;
    font-size: 11.5px;
    text-align: center;
  }
  .gg-maint-bar-btn { height: 24px; padding: 0 12px; font-size: 11px; }

  .gg-maint-state { padding: 14px; }
}

@media (max-width: 430px) {
  .gg-maint-card { padding: 26px 16px 22px; }
  .gg-maint-duck { width: 78px; height: 78px; }
  .gg-maint-title { font-size: 17px; }
  .gg-maint-btns { flex-direction: column; }
  .gg-maint-btns .gg-btn { flex: none; width: 100%; }   /* 세로 배치에서 버튼이 늘어나지 않도록 */
}

/* 서버 점검 — 자동 해제 시간 입력 (모바일) */
@media (max-width: 767px) {
  .gg-maint-when-input { width: 100%; }
  .gg-maint-bar-sub { display: none; }   /* 배너 줄수 줄이기 (모바일) */
  .gg-maint-eta { flex-direction: column; gap: 5px; padding: 11px 12px; }
  .gg-maint-eta-when { font-size: 13.5px; }
}

/* ============================================================
   오리 레이스 — 태블릿 / 모바일
   (레인 높이 64px 는 오리 스프라이트 정렬과 맞물려 있어 유지)
   ============================================================ */
@media (max-width: 1199px) {
  .dr-page { padding-inline: 12px; }
  .dr-card { padding: 18px 16px 16px; }
  .dr-stats { width: 100%; }
  .dr-stat { flex: 1 1 92px; min-width: 0; }
}

@media (max-width: 767px) {
  .dr-head { gap: 12px; margin-bottom: 14px; }
  .dr-title { font-size: 19px; }
  .dr-sub { font-size: 11.5px; }
  .dr-title-duck { width: 44px; height: 38px; }

  .dr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dr-stat { padding: 8px 10px; }
  .dr-stat b { font-size: 14px; }

  .dr-track { border-radius: 12px; }
  .dr-count { font-size: 44px; }
  .dr-autostart { top: 6px; right: 8px; padding: 4px 10px; font-size: 11px; }

  .dr-bottom { flex-direction: column; align-items: stretch; gap: 10px; }
  .dr-actions { justify-content: center; }
  .dr-actions .dr-btn { flex: 1 1 auto; }
  .dr-status { justify-content: center; }

  .dr-admin { gap: 6px; padding: 10px; }
  .dr-admin .dr-btn { flex: 1 1 auto; height: 32px; padding: 0 10px; font-size: 12px; }

  .dr-guide { font-size: 11.5px; line-height: 1.85; }
  .dr-pop { padding: 20px 16px 16px; }
}

@media (max-width: 430px) {
  .dr-card { padding: 14px 12px 14px; }
  .dr-title { font-size: 17.5px; }
  /* 레이스 아바타: 모바일에서는 조금 작게 (레인 높이 안에 닉네임까지 들어가야 함) */
  .dr-duck-img { width: 36px; height: 36px; margin-left: 3px; }
  .dr-avatar-shadow { width: 21px; margin-left: -10.5px; }
  /* 다리·발도 오리 크기(44→36px)에 맞춰 같은 비율로 축소 */
  .dr-avatar-legs { width: 21px; height: 5px; margin-left: -10.5px; bottom: 5px; }
  .dr-avatar-legs i { width: 1.8px; height: 3.4px; bottom: 2px; }
  .dr-avatar-legs i > b { width: 8.2px; height: 3.8px; margin-left: -4.1px; bottom: -3.2px; }
  .dr-avatar-legs i:nth-child(1) { left: 4.7px; }
  .dr-avatar-legs i:nth-child(2) { right: 4.7px; }
  .dr-label { font-size: 11px; top: 36px; }
  .dr-bubble { font-size: 11px; padding: 3px 7px; }
  .dr-count { font-size: 38px; }
}

/* ============================================================
   내 정보 — 기록 메뉴 (태블릿 / 모바일)
   ============================================================ */
@media (max-width: 1199px) {
  .pf-page { padding-inline: 12px; }
}

@media (max-width: 767px) {
  .pf-top { gap: 12px; flex-wrap: wrap; }
  /* 좁은 화면에서는 충전·교환 버튼을 아래 줄에 가로로 꽉 채운다 */
  .pf-actions { width: 100%; margin-left: 0; margin-top: 4px; }
  .pf-duck { width: 64px; height: 64px; }
  .pf-nick { font-size: 15.5px; }
  .pf-sub { font-size: 11.5px; }
  .pf-points { font-size: 17px; }

  .pf-subtabs { gap: 5px; padding-bottom: 10px; }
  .pf-subtab { height: 31px; padding: 0 11px; font-size: 11.5px; }
  .pf-subtab img { width: 16px; height: 16px; }

  .pf-sum-item { flex-basis: calc(50% - 4px); padding: 9px 11px; }
  .pf-sum-item b { font-size: 14px; }

  .pf-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-game { padding: 13px 10px 11px; }
  .pf-game-plays { font-size: 19px; }
  .pf-game-stats span { font-size: 11px; }

  .pf-when { font-size: 11.5px; }
}

@media (max-width: 430px) {
  .pf-games { grid-template-columns: minmax(0, 1fr); }
  .pf-sum-item { flex-basis: 100%; }
}

/* 회원 기록 모달 — 모바일 */
@media (max-width: 767px) {
  .rc-modal-back { padding: 12px 10px; }
  .rc-modal { max-height: 92vh; border-radius: 16px; }
  .rc-modal-head { padding: 14px 14px 12px; }
  .rc-modal-title { font-size: 15px; }
  .rc-modal-body { padding: 12px 14px 16px; }
}

/* ============================================================
   DUCK HIGH & LOW — 시안 모바일 배치
   ============================================================ */
@media (max-width: 1199px) {
  .gg-hl { width: auto; margin: 12px 12px 0; }
  .hl-grid { grid-template-columns: minmax(0, 1fr); }
  .hl-side { gap: 12px; }
}
@media (max-width: 767px) {
  .gg-hl { margin: 10px 10px 0; }
  .hl-page { padding: 10px; border-radius: 16px; }

  /* 상단: 로고 한 줄 → 보유 포인트 한 줄 (시안 모바일과 동일) */
  .hl-top { flex-wrap: wrap; gap: 8px; padding: 4px 4px 10px; }
  .hl-top-duck { width: 34px; height: 36px; }
  .hl-title { font-size: 19px; }
  .hl-desc { display: none; }
  .hl-bgm { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; }
  .hl-purse {
    order: 3; width: 100%; min-width: 0; margin-left: 0;
    padding: 8px 8px 8px 12px; gap: 9px; border-radius: 14px;
  }
  .hl-purse-coin { width: 22px; height: 22px; }
  .hl-purse-label { display: none; }
  .hl-purse-val { font-size: 15px; }
  .hl-purse-btn { height: 27px; padding: 0 11px; font-size: 15px; border-radius: 9px; }

  /* 씬: 모바일 전용 크롭 (왜곡·빈틈 없이 오리를 크게) */
  .hl-scene {
    aspect-ratio: 630 / 364;
    background-image: url("../../assets/highlow/scene-mo.webp");
    background-size: 100% 100%;
  }
  .hl-dice { left: 42.7%; top: 34.1%; width: 20.5%; height: 34.6%; }
  .hl-streak { left: 2.5%; top: 4%; width: 33%; }
  .hl-streak-b { display: none; }              /* 모바일 시안엔 없음 */
  .hl-bubble { left: auto; right: 2.5%; top: 44%; width: 33%; }
  .hl-guide, .hl-arrow { display: none; }      /* 모바일 시안엔 없음 */

  /* LOW / HIGH : 씬 아래 한 줄 (320px 에서도 유지) */
  .hl-picks { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px 10px 0; }
  .hl-pick { position: relative !important; left: auto !important; top: auto !important;
             width: auto !important; height: auto !important; min-width: 0;
             aspect-ratio: 120 / 140; }
  .hl-pick-duck { width: 80% !important; bottom: 5% !important; }
  .hl-pick-radio { left: 6%; top: 4.5%; }

  /* 씬 내부 글자 크기 */
  .hl-streak { border-radius: 9px; }
  .hl-streak-t { font-size: 8.5px; }
  .hl-streak-v { font-size: 11.5px; gap: 2px; margin-top: 1px; }
  .hl-streak-v i { font-size: 11px; }
  .hl-streak-bt { font-size: 8px; }
  .hl-streak-bv { font-size: 8.5px; margin-top: 1px; }
  .hl-bubble { font-size: 8.5px; border-radius: 9px; line-height: 1.5; }
  .hl-bubble::after { left: -6px; border-width: 5px; border-left: none; }
  .hl-pick { border-radius: 11px; }
  .hl-pick-radio { width: 11px; height: 11px; border-width: 1.5px; }
  .hl-pick.is-on.is-low  .hl-pick-radio { box-shadow: inset 0 0 0 2px #4a97f2; }
  .hl-pick.is-on.is-high .hl-pick-radio { box-shadow: inset 0 0 0 2px #f3b63c; }
  .hl-pick-name { font-size: 15px; letter-spacing: .5px; }
  .hl-pick-nums { font-size: 18px; letter-spacing: 1px; top: 27%; }
  /* 올인 버튼은 항상 베팅 칩과 같은 크기로 (모바일에서는 칩이 줄어드니 함께 줄인다) */
  .hl-allin {
    width: calc((100% - 16px) / 3); height: 38px; margin: 8px auto 9px;
    font-size: 13px; gap: 4px; border-radius: 10px;
  }
  .hl-allin small { font-size: 10px; }
  .hl-pick.is-on { transform: translateY(-2px) scale(1.03); }
  .hl-pick.is-on::after { font-size: 9.5px; padding: 2px 7px; right: 5%; top: 4%; }
  .hl-guide { font-size: 8.5px; border-radius: 9px; line-height: 1.55; }
  .hl-guide b { font-size: 9.5px; }
  .hl-arrow { font-size: 11px; }

  /* 베팅 · 굴리기 */
  .hl-play { padding: 10px 10px 12px; }
  .hl-bet-label { font-size: 12px; margin-bottom: 8px; }
  /* 칩 6개 — 좁은 화면에서도 3개씩 두 줄 (칸 너비는 화면에 맞춰 나눠 갖는다) */
  .hl-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hl-chip { width: 100%; min-width: 0; height: 38px; font-size: 13px; gap: 4px; border-radius: 10px; }
  .hl-chip img { width: 15px; height: 15px; }
  .hl-chip small { font-size: 10px; }
  .hl-roll { width: 100%; height: 44px; font-size: 15.5px; margin-top: 11px; }
  .hl-hint { font-size: 10.5px; }

  /* 최근 결과: 가로 목록 (시안 모바일) */
  .hl-recent { margin: 0 10px 12px; padding: 10px 10px 11px; }
  .hl-recent-h { font-size: 12px; margin-bottom: 3px; }
  .hl-recent-note { display: block; margin-top: 2px; font-size: 9.5px; }
  /* 가로 스크롤 박스라서 위로 튀어나온 "최신" 말풍선이 잘렸다.
     위쪽에 자리를 만들어 말풍선이 박스 안에 들어오게 한다. */
  /* (2026-08-25) 바카라 최근 결과와 같은 규격 — 모바일은 3칸 그리드 (.bcr-rec-grid 와 동일) */
  .hl-recent-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 0 2px; }
  .hl-recent-item { min-height: 124px; padding: 11px 2px 12px; border-radius: 12px; }
  .hl-recent-face { width: 34px; height: 34px; border-width: 1.5px; }
  .hl-recent-face i { width: 5px; height: 5px; }
  .hl-recent-lab { margin-top: 8px; font-size: 13px; }
  .hl-recent-tag { font-size: 8.5px; padding: 2px 6px; top: -8px; }
  .hl-recent-pick { margin-top: 8px; padding-top: 7px; font-size: 10.5px; }
  .hl-recent-net { margin-top: 8px; font-size: 12px; }
  .hl-recent-net.is-long { font-size: 9.5px; letter-spacing: -.4px; }
  .hl-recent-badge { margin-top: 5px; padding: 2px 4px; font-size: 8px; letter-spacing: -.2px; }
  .hl-recent-dash { font-size: 17px; }
  .hl-recent-none { margin-top: 5px; font-size: 10px; }

  /* 사이드 카드 */
  .hl-card { padding: 11px 12px 12px; border-radius: 14px; }
  .hl-card-h { font-size: 12.5px; margin-bottom: 9px; }
  .hl-stat { font-size: 12px; }
  .hl-rules li { font-size: 11.5px; line-height: 1.9; }
  .hl-bonus-row { font-size: 12px; }
  .hl-more { height: 42px; font-size: 12.5px; }
  .hl-foot { font-size: 10.5px; margin: 10px 0 4px; }
  .hl-foot img { width: 16px; height: 16px; }
}
@media (max-width: 430px) {
  .hl-title { font-size: 17px; }
  .hl-pick-name { font-size: 13px; }
  .hl-pick-nums { font-size: 16px; }
  .hl-pick.is-on::after { font-size: 9px; padding: 2px 6px; }
  .hl-chip { height: 36px; font-size: 12px; }
  .hl-allin { height: 36px; font-size: 12px; }
  .hl-recent-item { flex: 0 0 54px; }
}

/* ============================================================
   룰렛 (roulette.css) 반응형
   PC(1200↑)는 시안 3열 그대로 — 여기서는 손대지 않는다.
   ⚠ 반응형은 --rl-wheel 변수와 배치만 바꾼다. 회전 엔진과는 무관하다.
   ============================================================ */

/* ---------- 태블릿 : 룰렛을 위로 올리고 정보 카드는 2열 ---------- */
@media (max-width: 1199px) {
  .rl-page { --rl-wheel: clamp(300px, 46vw, 420px); padding: 0 12px; }
  .rl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rl-mid { grid-column: 1 / -1; order: -1; }
  .rl-setup-body { grid-template-columns: minmax(0, 1fr); }
  .rl-setup-btns { grid-template-columns: repeat(3, 1fr); }
  .rl-save { height: 48px; font-size: 15px; }
  .rl-rule-list li:nth-last-child(-n+2) { padding-right: 74px; }
}

/* ---------- 모바일 : 시안 순서대로 한 줄 배치 ---------- */
@media (max-width: 767px) {
  .rl-page { --rl-wheel: min(84vw, 330px); padding: 0 10px; margin-top: 12px; }
  /* 칸 설정(.rl-setup)은 .rl-grid 바깥에 있어서, 그리드만 flex 로 바꾸면 순서에 낄 수 없다.
     페이지 전체를 flex 로 만들고 감싼 div 들을 display:contents 로 없애 모두 형제로 만든다. */
  .rl-page { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .rl-grid, .rl-left, .rl-right { display: contents; }
  /* 모바일 순서: 룰렛 → 최근 결과 → 칸 설정 → 안내/규칙
     (내 정보는 모바일에서 숨긴다 — 헤더에 이미 닉네임·포인트가 있다) */
  .rl-mid     { order: 1; }
  .rl-players { order: 2; }
  .rl-recent  { order: 3; }
  .rl-setup   { order: 4; margin-top: 0; }
  .rl-guide   { order: 5; }
  .rl-rules   { order: 6; }
  .rl-me      { display: none; }

  .gg-card.rl-mid, .gg-card.rl-guide,
  .gg-card.rl-recent, .gg-card.rl-rules,
  .gg-card.rl-players,
  .gg-card.rl-setup { border-radius: 14px; padding: 12px; }

  .rl-mid-title h1 { font-size: 18px; }
  .rl-mid-title p { font-size: 10.5px; }
  .rl-mid-title img { width: 28px; height: 30px; }
  .rl-full-btn { height: 30px; padding: 0 10px; font-size: 11px; }

  .rl-stage { height: calc(var(--rl-wheel) + 58px); border-radius: 14px; }
  .rl-frame { padding: 10px; }
  .rl-wheel-effects { inset: 10px; }
  .rl-pointer { width: 28px; height: 38px; margin-left: -14px; top: -13px; }
  .rl-pointer::after { width: 10px; height: 10px; margin-left: -5px; top: 10px; }
  .rl-center { width: 66px; height: 66px; margin: -33px 0 0 -33px; border-width: 3px; }
  .rl-center img { width: 40px; height: 40px; }
  .rl-rim-dots i { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
  .rl-deco-coins { width: 62px; left: 6px; bottom: 6px; }
  .rl-deco-duck { width: 52px; right: 6px; bottom: 6px; }

  /* 터치 영역 44px 이상 */
  .rl-spin-btn { max-width: 100%; height: 50px; font-size: 16px; }
  .rl-btn { height: 44px; }
  .rl-sbtn { height: 44px; }
  .rl-save { height: 50px; }
  .rl-del { width: 34px; height: 34px; }
  .rl-preset-load, .rl-preset-del { height: 38px; }

  .rl-result { min-height: 56px; padding: 10px 12px; }
  .rl-result-tx b { font-size: 13px; }
  .rl-recent-tx { font-size: 12px; }
  .rl-rule-list li { font-size: 11.5px; }
  .rl-rule-list li:nth-last-child(-n+2) { padding-right: 0; }
  .rl-rules-duck { display: none; }

  .rl-wait b { font-size: 15px; padding: 7px 15px; }
  .rl-wait span { font-size: 11px; padding: 4px 11px; }

  /* 참가희망자 모드 — 좁은 화면에서 버튼·카드가 겹치지 않게 세로로 접는다 */
  .rl-party-bar { padding: 10px 12px; gap: 8px; }
  .rl-pb-main { width: 100%; }
  .rl-pb-count { font-size: 18px; }
  .rl-pb-sub { font-size: 11.5px; }
  .rl-join-btn { width: 100%; height: 46px; }
  .rl-items { padding: 10px 12px; }
  .rl-items-row { grid-template-columns: 1fr; }
  .rl-my-weight { margin-left: 0; }
  .rl-item-desc { min-height: 0; }
  .rl-item-num, .rl-item-btn { height: 44px; }
  .rl-op { height: 40px; font-size: 11.5px; }
  .rl-players { min-height: 0; }
  .rl-players-list { min-height: 0; }
  .rl-player { font-size: 12px; }

  /* 칸 설정 : 카드형 행 (입력창이 겹치지 않게 2줄로 접는다) */
  .rl-setup-head { flex-wrap: wrap; gap: 4px 10px; }
  .rl-setup-sub { width: 100%; }
  .rl-sum { margin-left: 0; }
  .rl-table { padding: 8px; }
  .rl-thead { display: none; }
  .rl-rows { gap: 8px; }
  .rl-row {
    grid-template-columns: 20px 66px minmax(0, 1fr) 52px;
    grid-template-areas: "no color label end" ". weight pct .";
    gap: 6px 7px;
    padding: 8px; border: 1px solid #eef3fa; border-radius: 10px; background: #fff;
  }
  .rl-row .rl-no { grid-area: no; }
  .rl-row .rl-swatch-wrap { grid-area: color; }
  .rl-row .rl-swatch { width: 46px; height: 32px; }
  .rl-row .rl-label { grid-area: label; }
  .rl-row .rl-weight { grid-area: weight; }
  .rl-row .rl-pct { grid-area: pct; text-align: left; }
  .rl-row .rl-row-end { grid-area: end; gap: 2px; }
  .rl-row .rl-mark { font-size: 11px; }
  .rl-input { height: 36px; font-size: 12.5px; }
  .rl-setup-btns { grid-template-columns: 1fr 1fr; }

  /* 전체 화면 모드도 가로 스크롤이 생기지 않게 */
  .rl-page.is-full { --rl-wheel: min(88vw, 400px); }
  .rl-page.is-full .rl-mid { max-width: 100%; }
}

/* ---------- 소형(320~430px) ---------- */
@media (max-width: 430px) {
  .rl-page { --rl-wheel: min(86vw, 300px); padding: 0 8px; }
  .rl-mid-title h1 { font-size: 17px; }
  .rl-setup-btns { grid-template-columns: 1fr; }
  .rl-row { grid-template-columns: 18px 60px minmax(0, 1fr) 32px; }
}

/* ============================================================
   DC 충전 안내 모달 — 반응형
     1199↓ : QR 열 폭 축소   /   767↓ : 1열 스택   /   430↓ : 소형 화면 여백·글자 조정
   ============================================================ */
@media (max-width: 1199px) {
  .cg-modal { max-width: 680px; }
  .cg-body { grid-template-columns: 1fr 280px; }
}

@media (max-width: 767px) {
  .cg-back { padding: 12px; align-items: flex-start; }
  .cg-modal { max-width: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  /* 금액 입력 → 지급 예정 DC → 안내 → QR → 송금 → 확인 요청 순서 (한 열) */
  .cg-body { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .cg-top { padding: 14px 16px; gap: 11px; }
  .cg-top-duck-box { width: 48px; height: 48px; border-radius: 14px; }
  .cg-top-duck { width: 34px; height: 34px; }
  .cg-title { font-size: 17px; }
  .cg-sub { font-size: 11.5px; }
  .cg-close { width: 34px; height: 34px; }
  .cg-amount { height: 50px; }
  .cg-amount-in { font-size: 20px; }
  .cg-reward-value { font-size: 23px; }
  .cg-qr { max-width: 220px; }
}

@media (max-width: 430px) {
  .cg-back { padding: 8px; }
  .cg-modal { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .cg-body { padding: 13px; }
  .cg-top { padding: 12px 13px; gap: 9px; }
  .cg-top-duck-box { width: 42px; height: 42px; border-radius: 12px; }
  .cg-top-duck { width: 30px; height: 30px; }
  .cg-title { font-size: 15.5px; }
  .cg-sub { font-size: 11px; }
  .cg-close { width: 32px; height: 32px; font-size: 18px; }
  .cg-quick { grid-template-columns: repeat(2, 1fr); }
  .cg-quick-btn { height: 40px; font-size: 12.5px; }
  .cg-reward-value { font-size: 21px; }
  .cg-qr { max-width: 190px; }
  .cg-act { height: 44px; font-size: 13px; }
  .cg-notice { font-size: 11px; }
}

/* ============================================================
   DUCK BACCARAT — 반응형
     900↓ : 게임판이 맨 위 전체 폭, 아래에 내 정보 · 최근 결과 2열
     620↓ : 한 열로 쌓고 하단 내비게이션과 겹치지 않게 여백 확보
     390↓ / 320↓ : 베팅 영역 · 칩 · 버튼이 잘리지 않게 축소
   ============================================================ */
@media (max-width: 1199px) {
  /* 1172~1199px 에서도 시안과 같은 2열 구조를 유지한다.
     예전에는 .bcr-table 에 좌우 172px 패딩을 줘서 중앙 베팅 영역이 크게 압축됐다 —
     중앙 정렬은 .bcr-center 의 max-width + margin:auto 로만 처리한다. */
  /* 열 구성(레일 286 · 간격 16)과 중앙 베팅 영역 폭(758)은 1200px 경계에서 그대로 유지한다.
     → 1199px 와 1200px 사이에 레이아웃이 튀지 않는다. */
  .bcr-title { font-size: 25px; }
  .bcr-streak { width: 150px; left: 16px; top: 16px; }
  .bcr-table { padding: 16px 16px 35px; }
  .bcr-chiprow { column-gap: 8px; }
  .bcr-center .bcr-guide { font-size: 12.5px; }
  .bcr-chiprow .bcr-act-btns .bcr-btn { padding: 0 14px; font-size: 13px; }
}

@media (max-width: 900px) {
  .bcr-page { padding: 12px 12px 0; }
  /* 게임 영역이 먼저, 정보 레일은 그 아래에 한 열로 */
  .bcr-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bcr-main { order: 1; }
  .bcr-rail { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .bcr-histbtn { grid-column: 1 / -1; }
  /* 연승 카드가 가운데 요소를 밀거나 덮지 않게 — 위쪽에 한 줄로 놓는다 */
  .bcr-streak { position: static; width: 100%; margin: 0 auto 12px; }
  .bcr-table { padding: 16px; }
  .bcr-center { max-width: 700px; }
  /* 좁은 화면에서는 말풍선을 다시 흐름 안에 넣어 오리 오른쪽에 나란히 둔다 */
  .bcr-center .bcr-dealer { justify-content: center; }
  /* position:relative 를 유지해야 말풍선 꼬리(::before)가 말풍선 왼쪽에 붙는다 */
  .bcr-bubble { position: relative; left: auto; top: auto; width: auto; max-width: 320px; margin-left: 14px; }
  .bcr-bubble::before { top: 50%; margin-top: -9px; }
  .bcr-center .bcr-bets { max-width: 100%; }
  .bcr-center .bcr-hands { max-width: 100%; margin: 18px auto 10px; }
  .bcr-hero { flex-wrap: wrap; row-gap: 10px; }
  .bcr-hero-tx { flex: 1 1 auto; }
  .bcr-purse { order: 4; margin-left: auto; }
}

@media (max-width: 767px) {
  .bcr-hero { padding: 12px 14px; gap: 11px; }
  .bcr-hero-duck { width: 44px; height: 44px; }
  .bcr-bgm { width: 34px; height: 34px; font-size: 15px; }
  .bcr-title { font-size: 21px; }
  .bcr-desc { font-size: 11.5px; }
  .bcr-bet-en { font-size: 15px; }
  .bcr-card-face { width: 42px; height: 58px; }
  .bcr-chip { width: 50px; height: 50px; font-size: 11px; }
}

@media (max-width: 620px) {
  .bcr-grid { grid-template-columns: 1fr; }
  .bcr-rail { grid-template-columns: 1fr; }
  .bcr-hero { gap: 9px; }
  .bcr-live { order: 3; height: 30px; padding: 0 11px; font-size: 11px; }
  .bcr-bgm { order: 3; width: 30px; height: 30px; font-size: 14px; border-radius: 10px; }
  .bcr-purse { order: 4; width: 100%; margin-left: 0; }
  .bcr-purse .bcr-charge { margin-left: auto; }
  /* 하단 모바일 내비게이션과 베팅 버튼이 겹치지 않게 */
  .gg-bcr { padding-bottom: 84px; }
  /* 좁은 화면에서는 단계 / (진행시간 · 오늘 기록) 을 두 줄로 나눈다 */
  .bcr-board-h { flex-wrap: wrap; gap: 7px; }
  .bcr-board-h-r { width: 100%; justify-content: space-between; }
  .bcr-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .bcr-act-btns { width: 100%; }
  .bcr-act-btns .bcr-btn { flex: 1; }
  .bcr-guide { text-align: center; }
}

@media (max-width: 430px) {
  .bcr-page { padding: 10px 10px 0; }
  .bcr-title { font-size: 19px; }
  .bcr-table { padding: 12px; }
  .bcr-dealer-duck { width: 48px; height: 48px; }
  .bcr-bubble { font-size: 11.5px; padding: 8px 11px; }
  .bcr-hands { gap: 8px; margin: 12px 0 12px; }
  .bcr-hand { padding: 8px; }
  .bcr-cards { gap: 5px; min-height: 56px; }
  .bcr-card-face { width: 36px; height: 50px; border-radius: 7px; }
  .bcr-card-r { font-size: 13px; }
  .bcr-card-s { font-size: 12px; }
  .bcr-bets { gap: 7px; }
  .bcr-bet { padding: 11px 4px 10px; border-width: 2px; }
  .bcr-bet-en { font-size: 13.5px; }
  .bcr-bet-ko { font-size: 10.5px; }
  .bcr-bet-mult { padding: 2px 7px; font-size: 10.5px; }
  .bcr-chips { gap: 9px; padding: 12px 10px 2px; }
  .bcr-chip { width: 46px; height: 46px; font-size: 10.5px; border-width: 3px; }
  .bcr-lock { padding: 34px 14px 30px; }
  .bcr-lock-title { font-size: 17px; }
  .bcr-lock-timer b { font-size: 34px; }
  .bcr-lock-duck { max-width: 96px; max-height: 92px; }
}

@media (max-width: 360px) {
  /* 아주 좁은 화면에서는 "카드 대기" 를 접는다 (카드 두 장이 우선) */
  .bcr-wait { display: none; }
}

@media (max-width: 340px) {
  /* 320px 급 화면: 상태줄 배지 두 개가 줄바꿈되며 들어가게 */
  .bcr-board-h-r { flex-wrap: wrap; gap: 6px; }
  .bcr-times { font-size: 10.5px; padding: 4px 8px; }
  .bcr-live { height: 26px; padding: 0 9px; font-size: 10.5px; }
  .bcr-card-face { width: 32px; height: 45px; }
  .bcr-bet-en { font-size: 12.5px; }
  .bcr-bet-ko { display: none; }
  .bcr-chip { width: 42px; height: 42px; font-size: 10px; }
  .bcr-chips { gap: 7px; }
  .bcr-timer b { min-width: 26px; height: 26px; font-size: 13px; }
}

/* ============================================================
   회원 간 포인트 거래 모달 (gt-)  — 좌우 10px 여백 안에 완전히 들어오게
   ============================================================ */
@media (max-width: 767px) {
  .gt-back { padding: 12px 10px; align-items: flex-start; }
  .gt-modal { width: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; }

  .gt-head { padding: 15px 16px 14px; gap: 11px; }
  .gt-head-ico { width: 44px; height: 44px; border-radius: 13px; }
  .gt-head-ico svg { width: 38px; height: 38px; }
  .gt-title { font-size: 18px; }
  .gt-sub { font-size: 11.5px; }
  .gt-x { top: 12px; right: 12px; width: 29px; height: 29px; font-size: 16px; }

  .gt-body { padding: 14px 16px 4px; }
  .gt-have { padding: 11px 13px; margin-bottom: 13px; }
  .gt-have-l { font-size: 12.5px; }
  .gt-have-v { font-size: 17px; }

  .gt-flabel label { font-size: 13px; }
  .gt-hint { font-size: 10.5px; }
  .gt-input { height: 44px; font-size: 14px; border-radius: 12px; }
  .gt-find { width: 88px; height: 44px; font-size: 12.5px; border-radius: 12px; }

  .gt-ok { padding: 10px 12px; margin-bottom: 13px; gap: 7px; }
  .gt-ok-name { font-size: 12.5px; }
  .gt-ok-pt { font-size: 10.5px; }

  .gt-amtbox { height: 48px; padding: 0 13px; }
  .gt-amt { font-size: 17px; }

  .gt-recap { margin: 13px 0 12px; }
  .gt-recap-head { padding: 9px 12px; font-size: 12.5px; }
  .gt-recap-body { padding: 9px 12px 10px; }
  .gt-r > span { font-size: 11.5px; }
  .gt-r > b { font-size: 12.5px; }
  .gt-r.is-final > b { font-size: 15px; }

  .gt-notice { padding: 10px 12px; font-size: 11px; }
  .gt-err { font-size: 11.5px; padding: 9px 11px; }

  .gt-foot { padding: 12px 16px 16px; gap: 8px; }
  .gt-btn-ghost { flex: 0 0 104px; height: 46px; font-size: 13.5px; border-radius: 12px; }
  .gt-btn-main { height: 46px; font-size: 14px; border-radius: 12px; }

  .gt-menu { min-width: 164px; }
  .gt-menu button { padding: 11px 12px; font-size: 13px; }
}

@media (max-width: 430px) {
  .gt-back { padding: 10px; }
  .gt-title { font-size: 16.5px; }
  .gt-sub { font-size: 11px; }
  .gt-have-v { font-size: 16px; }
  .gt-find { width: 78px; font-size: 11.5px; }
  .gt-ok { flex-wrap: wrap; }
  .gt-ok-pt { width: 100%; text-align: right; }
  .gt-r > span { font-size: 11px; }
  .gt-notice { font-size: 10.5px; }
  .gt-btn-ghost { flex: 0 0 88px; font-size: 12.5px; }
  .gt-btn-main { font-size: 13.5px; }
}

/* ============================================================
   DUCK BACCARAT — 재구성 레이아웃 반응형 보강
     최근 결과 6칸: 데스크톱 6열 → 태블릿 3열 → 모바일 3×2 → 최소폭 2열
   ============================================================ */
@media (max-width: 900px) {
  .bcr-rec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bcr-recent { margin: 16px 14px 16px; padding: 14px 14px 16px; }
  .bcr-page { padding: 12px 14px 14px; border-radius: 20px; }
  .bcr-hero { padding-left: 14px; }
}

@media (max-width: 767px) {
  .bcr-streak { padding: 9px 11px 10px; }
  .bcr-streak-n b { font-size: 19px; }
  .bcr-recent-h { font-size: 13px; }
  .bcr-recent-note { display: block; margin: 3px 0 0; }
  .bcr-info-row dt { font-size: 11.5px; }
  .bcr-info-row dd b { font-size: 13px; }
  .bcr-rules li { font-size: 11px; }
  .bcr-foot-note { font-size: 11px; text-align: center; }
  /* 칩과 조작 버튼은 손가락으로 누를 수 있는 크기를 유지한다 */
  /* 좁은 화면에서는 안내문구 → 칩 → 버튼 순서로 세로로 쌓는다 */
  .bcr-chiprow { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .bcr-center .bcr-guide { grid-column: 1; justify-self: center; text-align: center; }
  /* 칩 7개는 한 줄에 다 안 들어간다 — 4개 + 3개로 나란히 놓는다 */
  .bcr-chiprow .bcr-chips {
    grid-column: 1; justify-self: center; justify-content: center;
    display: grid; grid-template-columns: repeat(4, auto); justify-items: center;
  }
  .bcr-chiprow .bcr-act-btns { grid-column: 1; justify-self: stretch; width: 100%; }
  .bcr-chiprow .bcr-act-btns .bcr-btn { flex: 1 1 0; height: 44px; font-size: 13px; }
  .bcr-hand-body { gap: 10px; }
  .bcr-wait { font-size: 12px; }
  .bcr-chip { width: 52px; height: 52px; font-size: 12px; }
  .bcr-bet-en { font-size: 17px; }
  .bcr-bet-ko { font-size: 11.5px; }
  .bcr-bet-mult { margin-top: 5px; padding: 3px 11px; font-size: 11.5px; }
  .bcr-dealer-duck { width: 64px; height: 64px; }
  .bcr-bubble { font-size: 12.5px; padding: 10px 14px; margin-left: 16px; }
  .bcr-recent-h { font-size: 14px; flex-wrap: wrap; }
  .bcr-rec { min-height: 138px; padding: 12px 5px; }
  .bcr-rec-mark { width: 40px; height: 40px; font-size: 17px; }
  .bcr-rec-score { margin-top: 8px; font-size: 14px; }
  .bcr-rec-win { margin-top: 6px; font-size: 11.5px; }
  .bcr-rec-net { margin-top: 8px; font-size: 13px; }
  .bcr-rec-bonus { padding: 2px 4px; font-size: 8px; letter-spacing: -.2px; }
  .bcr-card { padding: 14px; }
  .bcr-card-h { font-size: 15px; }
}

@media (max-width: 430px) {
  .bcr-rec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .bcr-rec { min-height: 124px; padding: 10px 3px; gap: 0; }
  /* 카드 두 장 + "카드 대기" 가 좁은 화면에서 패널 밖으로 나가지 않게 */
  .bcr-hand-body { gap: 7px; }
  .bcr-wait { font-size: 11px; }
  .bcr-rec-mark { width: 32px; height: 32px; font-size: 13.5px; border-width: 2px; }
  .bcr-rec-score { font-size: 11.5px; }
  .bcr-rec-win { font-size: 10px; }
  .bcr-rec-net { font-size: 11.5px; }
  .bcr-rec-bonus { font-size: 9px; padding: 2px 5px; }
  .bcr-streak-next-b { font-size: 10.5px; }
  .bcr-recent { padding: 12px 12px 14px; }
}

@media (max-width: 340px) {
  .bcr-rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   게시판 (공지사항 + 자유게시판 통합) — #/board
   ============================================================ */

@media (max-width: 767px) {
  .gg-board { padding-bottom: 76px; }
  .bd-page { margin-top: 0; padding-bottom: 0; }
  .bd-card.bd-sec-board { border: 0; border-radius: 0; padding: 0; box-shadow: none; }
  .bd-sec-board .bd-sec-h { flex-wrap: nowrap; gap: 8px; margin: 0; padding: 11px 14px; border-bottom: 1px solid #e7edf4; }
  .bd-sec-board .bd-sec-t { font-size: 15px; gap: 6px; white-space: nowrap; }
  .bd-sec-board .bd-sec-ico { display: none; }
  .bd-sec-board .bd-sec-r { gap: 6px; min-width: 0; }
  .bd-sec-board .bd-count { display: none; }
  .bd-sec-board .bd-write { height: 32px; padding: 0 11px; font-size: 11.5px; }

  /* 분류는 한 줄 가로 스크롤, 검색창은 그 아래 전체 폭 */
  .bd-sec-board .bd-listtop { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 0 14px 10px; border-bottom: 1px solid #e7edf4; }
  .bd-sec-board .bd-cats { flex-wrap: nowrap; overflow-x: auto; padding: 0 0 2px; scrollbar-width: none; }
  .bd-sec-board .bd-cats::-webkit-scrollbar { display: none; }
  .bd-sec-board .bd-cat { flex: none; padding: 5px 11px; font-size: 11px; }
  .bd-sec-board .bd-search { width: 100%; }
  .bd-sec-board .bd-search-in { flex: 1 1 auto; width: auto; min-width: 0; }
  .bd-sec-board .bd-search-btn { flex: none; white-space: nowrap; }

  /* 대댓글 들여쓰기는 좁은 화면에서 줄인다 (본문 폭 확보) */
  .bd-cmt.is-reply { margin-left: 12px; padding-left: 10px; }
  .bd-cmt-reply-box .gg-btn { flex: 1 1 0; }

  /* 모바일 목록: 분류+제목 / 작성자·조회·날짜 */
  .bd-table { border-top: 0; }
  .bd-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center; gap: 6px 7px; min-height: 75px; padding: 9px 14px;
    border-bottom-color: #e3e8ee; font-size: 13px;
  }
  .bd-row.is-featured-notice { border-left: 3px solid #ff4f4f; padding-left: 11px; }
  .bd-row .bd-no { display: none; }
  .bd-row .bd-badge { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; padding: 0; background: none; font-size: 11.5px; color: #8b8f97; }
  .bd-row .bd-t { grid-column: 2; grid-row: 1; padding: 0; gap: 5px; }
  .bd-row .bd-t-link { font-size: 16px; font-weight: 800; }
  /* 오른쪽 댓글 전용 칸은 없애되 제목 옆의 간단한 [댓글 수]는 유지 */
  .bd-row .bd-t-cnt { display: inline; font-size: 11px; }
  .bd-row-meta { grid-column: 1 / 3; grid-row: 2; display: flex; align-items: center; gap: 8px; min-width: 0; color: #7c828c; }
  .bd-row .bd-author { grid-column: auto; justify-content: flex-start; gap: 6px; min-width: 0; }
  .bd-row .bd-view, .bd-row .bd-like-n, .bd-row .bd-date { grid-column: auto; display: inline; text-align: left; font-size: 12px; color: #7c828c; }
  .bd-row .bd-view::before { content: "조회 "; }
  .bd-row .bd-like-n::before { content: "추천 "; }
  .bd-row .bd-author-btn { font-size: 12px; }
  .bd-row .bd-author .gg-avatar-box { width: 20px !important; height: 20px !important; }
  .bd-row-meta .bd-author-tslot { width: auto; height: 20px; }
  .bd-row-meta .bd-author-tslot > .bd-author-title { position: static; transform: none; height: 20px; max-width: 96px; }
  .bd-row-head { display: none; }
  .bd-pager { margin: 0; padding: 14px 0 18px; border-bottom: 1px solid #e7edf4; }
  /* 추천 버튼은 좁은 화면에서 조금 작게 */
  .bd-like { height: 28px; padding: 0 10px; font-size: 11.5px; }
  .bd-dt-like .bd-like { height: 38px; padding: 0 18px; font-size: 13px; }
}

@media (max-width: 430px) {
  .bd-sec-board .bd-sec-h { padding-inline: 11px; }
  .bd-sec-board .bd-listtop { padding-inline: 11px; }
  .bd-row { grid-template-columns: auto minmax(0, 1fr); min-height: 75px; padding: 9px 11px; }
  .bd-row.is-featured-notice { padding-left: 8px; }
  .bd-row .bd-t-link { font-size: 15px; }
  .bd-row-meta { gap: 6px; }
  .bd-row .bd-author-btn, .bd-row .bd-view, .bd-row .bd-date { font-size: 11.5px; }
}

/* ============================================================
   칭호 — 좁은 화면
   ------------------------------------------------------------
   · 비율(150:32)은 그대로 두고 폭만 줄인다. 원본은 손대지 않는다.
   · 칭호 때문에 옆 칸을 덮거나 가로 스크롤이 생기지 않게 max-width 로 묶는다.
   ============================================================ */
@media (max-width: 1199px) {
  .gg-title.is-sm:not(.bd-author-title):not(.tt-mode-tt) { height: min(var(--tt-h, 32px), 22px); }
}
@media (max-width: 767px) {
  .gg-title { height: min(var(--tt-h, 32px), 28px); }
  .gg-title.is-sm:not(.bd-author-title):not(.tt-mode-tt) { height: min(var(--tt-h, 32px), 20px); }
  /* 모바일 랭킹 — 칭호 위, 닉네임 아래가 분명히 보이게 세로로 */
  .gg-rk-cell-user .gg-ident { align-items: flex-start; }
  /* 게시판 작성자 칸이 좁아져도 칭호가 다음 칸을 밀지 않게 */
  .bd-author .gg-ident, .bd-cmt-head .gg-ident { max-width: 100%; }
  /* 게시판(글 상세·댓글)은 «한 줄» 배치라 높이만 줄인다 (폭은 비율대로 따라온다) */
  .bd-author-inline .bd-author-title { height: min(var(--tt-h, 32px), 18px); max-width: 92px; }
  /* 목록의 칭호 칸은 그 화면의 아바타와 «같은 자리(20×20)» — 그림만 왼쪽으로 삐져나간다 */
  .bd-author-tslot { width: 20px; height: 20px; }
  .bd-author-tslot > .bd-author-title { height: min(var(--tt-h, 32px), 20px); max-width: 96px; }
  /*  모바일은 «제목이 윗줄 · 작성자가 아랫줄» 이라 칭호가 제목 글자를 덮을 수 없다.
      그래서 제목을 미리 줄일 필요가 없다 (제목을 최대한 길게 보여 준다). */
  .bd-row:has(.bd-author-tslot) .bd-t { padding-right: 0; }
  .bd-post-meta-author .bd-author-title { height: min(var(--tt-h, 32px), 20px); max-width: 100px; }
  /* 모바일 — 날짜·조회는 다음 줄로 내려가도 되지만 «칭호+닉네임» 은 항상 같은 줄 */
  .bd-dt-meta { flex-wrap: wrap; row-gap: 4px; }
  .bd-dt-meta .bd-post-meta-author { flex: 0 0 auto; }
}
@media (max-width: 430px) {
  .gg-title { height: min(var(--tt-h, 32px), 25px); }
  .gg-title.is-sm:not(.bd-author-title):not(.tt-mode-tt) { height: min(var(--tt-h, 32px), 17px); }
  .bd-author-inline .bd-author-title { height: min(var(--tt-h, 32px), 16px); max-width: 80px; }
  .bd-post-meta-author .bd-author-title { height: min(var(--tt-h, 32px), 17px); max-width: 84px; }
  .bd-author-tslot > .bd-author-title { height: min(var(--tt-h, 32px), 20px); max-width: 100px; }
  .tt-list { grid-template-columns: 1fr; }
  /* 표시 선택 — 좁으면 위아래로 (가로로 두 개를 욱여넣지 않는다) */
  .tt-mode { padding: 13px; gap: 10px; }
  .tt-mode-opts { flex-direction: column; gap: 10px; }
  .tt-mode-btn { flex: 1 1 auto; padding: 12px; }
  .tt-mode-prev-lab { display: none; }              /* 좁은 칸에서는 미리보기 «줄» 만 남긴다 */
  .tt-mode-btn small { white-space: normal; }
}

/* ============================================================
   홈 배너 — 모바일 전용 그림 (2026-08-17)
   · 768px 이하는 <picture> 가 1408×656 모바일 전용 배너를 내려주므로,
     배너 프레임도 같은 비율(1408/656)로 맞춰 그림이 상하좌우 잘림 없이
     통째로 보이게 한다 (왼쪽 제목·노란 버튼과 오른쪽 게임 그림이 한 화면에).
   · 프레임과 그림 비율이 같아 cover 여도 잘리지 않는다 — contain 으로
     작고 납작하게 줄이는 방식은 쓰지 않는다.
   · 슬라이드끼리 높이가 어긋나 빈칸이 생기지 않도록 모든 배너(슬롯머신·
     덕플라이 포함)가 같은 비율을 쓴다. 두 배너는 HTML 문구·버튼이라
     프레임 높이에 맞춰 그대로 흐르고 구도가 바뀌지 않는다.
   · 투명 버튼(gg-hero-hot)은 JS 가 그림 속 버튼 좌표로 인라인 스타일을
     주지만, 모바일은 배너 «전체» 가 링크여야 하므로 !important 로 덮는다.
   ============================================================ */
@media (max-width: 768px) {
  .gg-home-hero { height: auto; aspect-ratio: 1408 / 656; }
  .gg-home-hero.is-photo .gg-hero-photo {
    object-fit: cover;
    object-position: center;
  }
  .gg-home-hero.is-photo .gg-hero-hot {
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    border-radius: 0;
  }
  .gg-home-hero.is-photo .gg-hero-hot:hover { box-shadow: none; }
}

/* 전역 확성기 — 모바일에서도 현재 화면 최상단에 잔상 팝업으로 표시 */
@media (max-width: 767px) {
  .gg-megaphone-bar {
    top: 10px; left: 10px; right: 10px; width: auto; max-width: none; height: 40px; border-radius: 9px;
    transform: translateY(-14px);
  }
  .gg-megaphone-bar.is-active { transform: translateY(0); }
  .gg-megaphone-track { width: calc(100% - 32px); }
  .gg-megaphone-stream > span { min-width: calc(100vw - 58px); max-width: none; width: auto; padding-right: 10px; font-size: 13px; }
  .gg-megaphone-dismiss { flex-basis: 26px; width: 26px; height: 26px; margin-right: 6px; font-size: 17px; line-height: 22px; }
  /* 확성기 이용 창 — 모바일에서는 열 때 스크립트(startMegaSheet)가 키보드 바로 위·가운데로
     자리를 잡는다. 아래 값은 스크립트가 자리 잡기 전의 예비값이고,
     높이가 모자라면 창 안에서 스크롤되도록 해 둔다 (2026-08-18) */
  .gg-megaphone-pop {
    top: 56px; right: auto; left: 10px; width: min(340px, calc(100vw - 20px)); box-sizing: border-box;
    max-height: calc(100dvh - 66px); overflow-y: auto;
  }
}