/* mobile.css — TOSS Bet mobile-specific styles (loaded after styles.css) */

/* ⚠️ 원본 대비 의도적 변경 — "데모 스테이지" 제거 (2026-08-04)
   원본(tossbet-archive)은 데스크탑 브라우저 안에 390x844 기기 프레임을 그려
   화면 중앙에 축소 배치하는 시연용 셸이었다:
     body { background:#e9eaee; display:flex; align-items:center; ... }
     .tb-stage { transform: scale(s) }   ← m-app.jsx 가 뷰포트에 맞춰 계산
   실기기에서는 앱이 화면을 꽉 채워야 하므로 스테이지/스케일을 걷어내고
   풀블리드로 둔다. 이 아래 규칙(.tb-app / .tb-scroll / .tb-press / 시트 등)은
   기기 프레임 '안쪽' 스타일이라 원본 그대로다 — 픽셀에 영향 없음. */
html.tb-is-mobile, html.tb-is-mobile body { height: 100%; }
html.tb-is-mobile body {
  background: var(--tb-bg-alt);
  min-height: 100dvh;
  overflow: hidden;
}

/* iOS 입력 포커스 시 화면 확대 방지
   -------------------------------------------------------------
   iOS Safari 는 입력 요소의 폰트가 **16px 미만이면 포커스 순간 페이지를 확대**한다
   (확대된 뒤에는 스스로 되돌아오지 않아 화면이 어긋난 채로 남는다).
   이 앱의 입력 상당수가 13~15px 이라 그대로 두면 로그인/충전/문의 어디서든 확대가 일어난다.

   viewport 에 `maximum-scale=1, user-scalable=no` 를 넣는 방법도 있지만 **쓰지 않는다** —
   회원이 손가락으로 확대하는 것까지 막아버려 접근성을 해치고, iOS 는 이 지시를 무시하기도 한다.
   폰트를 16px 로 올리는 것이 표준 해법이다.

   · `!important` 인 이유: 입력 크기가 인라인 style(components/field.tsx `fieldStyle` 등)로
     지정돼 있어 클래스 규칙으로는 이길 수 없다.
   · 이 파일은 **모바일에서만 로드**되므로(layout.tsx 의 media 스위치) 데스크탑 픽셀은 그대로다.
   · 새 입력을 추가할 때 폰트를 따로 지정할 필요가 없다 — 여기서 일괄 적용된다.
   · ⚠️ 16px 는 "확대를 막는 최소값"이라 **더 큰 폰트까지 16px 로 줄여버린다.** 금액 입력처럼
     의도적으로 크게 쓰는 입력은 `.tb-input-lg` 를 붙여 예외 처리한다(아래 규칙). */
input, select, textarea { font-size: 16px !important; }
/* 크게 보여야 하는 입력(금액 등) — 16px 이상이라 확대는 어차피 일어나지 않는다 */
input.tb-input-lg, textarea.tb-input-lg { font-size: 30px !important; }

/* LiveChat 위젯이 하단 탭바를 가리지 않도록 위로 올린다
   -------------------------------------------------------------
   LiveChat 은 컨테이너를 `bottom: 50px; max-height: calc(100% - 50px)` 인라인으로 고정한다
   (최소화 84x84 / 최대화 392x714 — 실측 2026-08-05). 탭바 높이(54 + 하단 safe-area)보다 낮아
   상담 버튼이 탭바와 겹쳤다.

   ⚠️ bottom 만 올리면 **채팅창을 열었을 때 상단이 잘린다** — max-height 가 `100% - 50px` 라
      올라간 만큼 위로 넘치기 때문. 그래서 max-height 도 같은 만큼 함께 줄인다.
   `!important` 는 LiveChat 이 인라인 style 로 값을 넣기 때문. 모바일에서만 로드되는 파일이라
   데스크탑 위젯 위치는 그대로다. */
#chat-widget-container {
  bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  max-height: calc(100% - 80px - env(safe-area-inset-bottom)) !important;
}

.tb-stage { width: 100%; height: 100%; }

/* Plain screen container (no device bezel) — 실기기에서는 뷰포트 전체 */
.tb-device {
  position: relative;
  overflow: hidden;
  background: var(--tb-bg-alt);
  width: 100%;
  height: 100dvh;
}

/* The app fills the device content area */
.tb-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--tb-bg-alt);
  overflow: hidden;
  font-family: var(--w-font-sans);
  color: var(--tb-text);
}

/* Scrollable content region */
.tb-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.tb-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tb-scroll { scrollbar-width: none; }

/* hide horizontal scrollbars on chip rails */
.tb-hscroll {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tb-hscroll::-webkit-scrollbar { display: none; height: 0; }

/* Tap feedback */
.tb-press { transition: transform .12s cubic-bezier(.2,0,0,1), background .12s, opacity .12s; -webkit-tap-highlight-color: transparent; }
.tb-press:active { transform: scale(0.97); opacity: 0.9; }
.tb-press-sm:active { transform: scale(0.985); }

/* Sheet / overlay */
@keyframes tb-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes tb-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tb-screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tb-screen-in { animation: tb-screen-in .26s cubic-bezier(.2,0,0,1) both; }
.tb-overlay { animation: tb-overlay-in .2s ease both; }
.tb-sheet { animation: tb-sheet-up .32s cubic-bezier(.2,0,0,1) both; }

/* count badge pulse */
@keyframes tb-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.tb-pop { animation: tb-pop .28s cubic-bezier(.2,0,0,1); }

/* shimmer line */
.tb-divider { height: 8px; background: var(--tb-bg-alt); }
[data-theme="dark"] .tb-divider { background: #0e0e10; }

/* icon helpers in dark already handled by styles.css .tb-icon */