/* mobile.css — TOKYO CASINO 모바일 전용 스타일 (styles.css 다음에 로드) */

/* Stage: center the device, scale to fit viewport */
html, body { height: 100%; }
body {
  background: #e9eaee;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}
[data-theme="dark"] body { background: #07050A; }

/* Full-bleed mode (no iPhone bezel): app fills the viewport, capped to a
   phone-width column on wide screens, using device safe-area insets. */
html.bare-mobile, html.bare-mobile body { height: 100%; background: var(--tb-bg-alt); }
html.bare-mobile body { display: block; margin: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
html.bare-mobile #root { display: block; height: 100vh; height: 100dvh; }
html.bare-mobile .tb-app {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
}

#root { display: flex; align-items: center; justify-content: center; }

/* 공통 앱 셸 바깥의 독립 화면(로그인·회원가입) 스크롤 복구
   -------------------------------------------------------------
   모바일은 `body { overflow: hidden }`(위 규칙)이고 스크롤은 앱 셸 안쪽의 `.tb-scroll` 이 맡는다.
   그런데 로그인·회원가입은 **껍데기 바깥의 독립 레이아웃**이라(`app/register/page.tsx` 주석)
   그 셸이 없어 **스크롤 주체가 아예 없었다** — 회원가입처럼 화면보다 긴 폼이 잘린 채
   스크롤되지 않았다(2026-08-07 블루오션·도쿄 제보). 이 컨테이너가 스크롤을 맡는다.

   ⚠️ `align-items` 를 flex-start 로 되돌리는 이유: 원래 인라인 style 이 `center` 인데,
      **내용이 컨테이너보다 길면 center 정렬은 위쪽이 잘려서 스크롤로도 닿을 수 없다**
      (flex 의 알려진 동작 — 넘친 만큼 시작점이 음수가 된다). 대신 자식에 `margin: auto` 를
      줘서 짧은 화면(로그인)은 그대로 가운데 정렬을 유지한다.
   ⚠️ `!important` 는 인라인 style 을 이겨야 하기 때문. 이 파일은 모바일에서만 로드되므로
      데스크탑 픽셀은 그대로다. */
.tb-standalone-page {
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start !important;
}
.tb-standalone-page > * { margin: auto; }

.tb-stage {
  transform-origin: center center;
  transition: transform .18s cubic-bezier(.2,0,0,1);
}

/* The app fills the device content area.
   ⚠️ 배경은 **투명**이다. 세이가이하 패턴 오버레이(TokyoBackdrop)가 body 배경 위,
      이 컨테이너 아래(z-index:0)에 깔리므로 여기서 불투명 배경을 칠하면 패턴이 가려진다.
      캔버스 색은 body(`html.bare-mobile body`)가 담당한다. */
.tb-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  background: transparent;
  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: #0A0610; }

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

/* iOS 입력 포커스 확대 방지 --------------------------------------------------
   iOS Safari(및 WebKit 기반 iOS 브라우저)는 글꼴이 16px 미만인 input/select/
   textarea 에 포커스하면 화면을 확대한다. 로그인·회원가입(13px), 게임 검색,
   충전/환전/포인트전환 금액(14.5~15px) 입력이 전부 해당돼 탭할 때마다 화면이
   튀었다(확대 후 되돌아오지 않아 레이아웃이 깨진 것처럼 보인다).

   viewport 에 maximum-scale=1 / user-scalable=no 를 주면 막히지만 사용자의
   손가락 확대까지 죽어 접근성이 나빠진다. 확대 '조건'인 글꼴 크기만 16px 로
   올려 원인을 없앤다.

   · 이 파일은 모바일에서만 로드된다(layout.tsx 의 media 속성) — PC 는 무영향.
   · iOS 만 골라내는 `@supports (-webkit-touch-callout: none)` 로 감싸지 않는다.
     그 판정은 Chrome 에서 false 라 에뮬레이터로 검증할 수 없고, iOS 가 해당 속성을
     내리면 조용히 무력화된다. 안드로이드가 16px 로 커지는 것은 무해하므로
     모바일 전체에 거는 편이 확실하다.
   · 앱 입력은 대부분 인라인 style 로 fontSize 를 주므로 !important 가 필요하다.
   · 체크박스/라디오는 글꼴과 무관하고 확대 대상도 아니라 제외한다.            */
input:not([type='checkbox']):not([type='radio']),
select,
textarea {
  font-size: 16px !important;
}