/* ============================================================
 * 모바일 1단계 — 컨텐츠 페이지 전용 (게임 페이지 제외)
 *   브레이크포인트: 모바일 ≤ 760px
 *   사용처: lobby/lab/plaza/wallet/market/inventory/index 등
 *   각 페이지가 link 해서 사용 → 페이지별 inline @media 보완
 * ============================================================ */

:root{
  --mobile-tabbar-h: 60px;
  --mobile-header-h: 56px;
  --touch-min: 44px;
}

/* ──────────────────────────────────────────────────────────
 * 데스크탑 ↔ 모바일 표시 토글 유틸
 * ──────────────────────────────────────────────────────────*/
@media (max-width:760px){
  .desktop-only{ display:none !important; }
}
@media (min-width:761px){
  .mobile-only{ display:none !important; }
}

/* ──────────────────────────────────────────────────────────
 * 모바일 하단 탭바 — 4섹션 고정 네비게이션
 *   페이지 어디서나 동일 사용. 활성 탭은 `data-active`로 표시.
 * ──────────────────────────────────────────────────────────*/
.m-tabbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  height: var(--mobile-tabbar-h);
  background: rgba(7,10,16,.95);
  border-top: 1px solid rgba(63,215,201,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width:760px){
  .m-tabbar{ display:flex; }
  /* 탭바 공간 확보 — 본문 하단 padding + 가로 overflow 완전 차단 */
  body{
    padding-bottom: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }
  html{ overflow-x: hidden !important; }
}
.m-tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-decoration:none; color:#9aa3b3;
  font-family:'Pretendard',sans-serif; font-size:10.5px; letter-spacing:.04em;
  position:relative;
  min-height: var(--touch-min);
}
.m-tabbar a .ic{
  font-size:20px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; height:22px;
}
.m-tabbar a .ic svg{ display:block; }
.m-tabbar a[data-active]{ color:#3FD7C9; }
.m-tabbar a[data-active]::before{
  content:''; position:absolute; top:0; left:30%; right:30%; height:2px;
  background:#3FD7C9; box-shadow:0 0 6px #3FD7C9;
}
.m-tabbar a:active{ background:rgba(63,215,201,.10); }

/* 라이트 톤 페이지(wallet/lab_public) 변형 */
body.wallet-light .m-tabbar,
body.lab-light .m-tabbar{
  background: rgba(255,255,255,.95);
  border-top-color: #D6CFB8;
}
body.wallet-light .m-tabbar a,
body.lab-light .m-tabbar a{ color:#6B6B72; }
body.wallet-light .m-tabbar a[data-active],
body.lab-light .m-tabbar a[data-active]{ color:#B8943C; }
body.wallet-light .m-tabbar a[data-active]::before,
body.lab-light .m-tabbar a[data-active]::before{ background:#B8943C; box-shadow:0 0 6px #B8943C; }

/* ──────────────────────────────────────────────────────────
 * 헤더 — 모바일에서 컴팩트 (이름/등급 같은 부가 정보 숨김)
 * ──────────────────────────────────────────────────────────*/
@media (max-width:760px){
  .lobby-top, .l-top, .mini-top, .p-top{
    padding: 10px 12px !important;
    max-width: 100vw !important;
  }
  .lobby-top .gnb, .p-top .gnb, .l-top .gnb,
  .lobby-top .greet, .p-top .greet,
  .lobby-top .right .iconbtn[title*="설정"],
  .l-top .greet,
  .l-top .right .iconbtn[aria-label="로그아웃"]{
    display:none !important;
  }
  .lobby-top .brand .name span,
  .l-top .brand .name span,
  .mini-top .brand .name span,
  .p-top .brand .name span{ font-size:9px !important; letter-spacing:.3em !important; }
  .lobby-top .brand .name b,
  .l-top .brand .name b,
  .mini-top .brand .name b,
  .p-top .brand .name b{ font-size:12.5px !important; }
  .lobby-top .brand .mark,
  .l-top .brand .mark,
  .mini-top .brand .mark,
  .p-top .brand .mark{ width:34px !important; height:38px !important; font-size:14px !important; }

  /* 헤더 우측 — P/C/W 칩 + 정렬 컨트롤은 숨김 (잔액·필터는 본문에서 처리) */
  .lobby-top .right,
  .l-top .right,
  .p-top .right{ gap:6px !important; flex-wrap:nowrap !important; max-width: 60vw !important; }
  .lobby-top .right .cur,
  .l-top .right .cur,
  .p-top .right .cur{ display:none !important; }
  .p-top .right .sort-wrap{ display:none !important; }  /* 플라자 sort는 모바일 본문 필터 사용 */
  .lobby-top .right .logoutbtn span{ display:none !important; }
  .lobby-top .right .logoutbtn{ padding:6px !important; min-height:36px !important; }
  .l-top .right .iconbtn,
  .p-top .right .iconbtn{ width:32px !important; height:32px !important; min-height:32px !important; }
}

/* ──────────────────────────────────────────────────────────
 * 모달 — 모바일에선 풀스크린에 가깝게
 * ──────────────────────────────────────────────────────────*/
@media (max-width:760px){
  .pmod, .swap-modal, .ntc-modal, .result-card, .tmod-card, .slot-alert{
    max-width: 100% !important;
    width: calc(100vw - 24px) !important;
    margin: 12px !important;
    max-height: calc(100vh - 24px - var(--mobile-tabbar-h)) !important;
    overflow-y: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────
 * 터치 친화 — 버튼 최소 사이즈
 * ──────────────────────────────────────────────────────────*/
@media (max-width:760px){
  button, .btn, a.btn-sm, a.cur, .cnv-btn, .add, .reset-mini{
    min-height: var(--touch-min);
    padding-top: 10px; padding-bottom: 10px;
  }
  /* 단, 작은 칩·뱃지·플레이스홀더는 제외 */
  .chip, .badge, .pop-toast, .play-arrow, .soon, .ext, .now-tag{
    min-height: 0 !important;
    padding-top: 3px !important; padding-bottom: 3px !important;
  }
}

/* ──────────────────────────────────────────────────────────
 * 게임 진입 가드 — 모바일에서 게임 CTA 클릭 시 안내
 * (각 페이지 inline JS에서 사용. 여기는 시각 표시만)
 * ──────────────────────────────────────────────────────────*/
.m-pc-only-badge{
  display:none;
  position:absolute; top:8px; right:8px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em;
  padding:3px 8px; border-radius:2px;
  background:rgba(177,155,255,.18); color:#B19BFF; border:1px solid rgba(177,155,255,.5);
  pointer-events:none;
}
@media (max-width:760px){
  .m-pc-only-badge{ display:inline-block; }
}

/* PC 전용 안내 토스트 (모든 페이지 공통) */
.m-pc-toast{
  position:fixed; left:50%; top:18%; transform:translateX(-50%);
  z-index:130; padding:18px 22px; border-radius:6px;
  background:rgba(7,10,16,.96); border:1px solid #B19BFF;
  color:#fff; font-size:13.5px; line-height:1.5; text-align:center;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  animation: m-pc-tin .3s cubic-bezier(.2,.8,.2,1);
  max-width: calc(100vw - 32px);
}
.m-pc-toast .ttl{ font-family:'Pretendard',sans-serif; font-weight:800; font-size:16px; letter-spacing:.02em; color:#3FD7C9; margin-bottom:8px }
@keyframes m-pc-tin{ from{opacity:0; transform:translate(-50%,-8px)} to{opacity:1; transform:translate(-50%,0)} }