/* ===========================================================================
   viewer-mobile.css — 시청자 화면 모바일 정리 (2026-10-17)

   이 플랫폼은 모바일이 기본이다. 코드에서 실제로 확인한 문제만 고친다.

     (1) 주문 시트 입력이 14px 이었다 → iOS 는 16px 미만 입력에 포커스하면
         **화면을 확대한다.** 하필 결제 도중에 일어나고, 확대되면 가로 스크롤이
         생겨 레이아웃이 깨진 것처럼 보인다. 되돌리려면 사용자가 손으로 축소해야 한다.
     (2) 시트 높이가 82vh / 88vh 였다 → 모바일 브라우저에서 vh 는 **주소창을 포함한**
         큰 뷰포트 기준이라, 주소창이 떠 있으면 시트 아래가 화면 밖으로 밀린다.
         주문 시트의 맨 아래는 **결제 버튼**이다. 그게 안 보이면 주문이 끝나지 않는다.
         → dvh(동적 뷰포트)로 바꾸고, 모르는 브라우저를 위해 vh 를 먼저 쓴다.
     (3) 홈 인디케이터/노치 — lv-sheets.css 는 safe-area 를 쓰는데 view.css 는 안 쓴다.

   ⚠️ 이 파일은 lv-sheets.css **뒤에** 실려야 한다. 그 파일이 !important 를 쓰므로
      같은 특이도 + 나중 선언으로만 이길 수 있다.
   ⚠️ body 에 overflow-x:hidden 을 걸지 않는다. position:sticky 가 죽는다.
      넘치는 원인(이미지/표)을 각각 막는 쪽이 안전하다.
   =========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* ===== 한글 줄바꿈을 단어 기준으로 (2026-11-01 요청) =====
   ⚠️ 한글은 글자 사이에서도 줄이 바뀐다(CJK 기본값). 그냥 두면
      "방송목록" 이 "방송목 / 록" 으로 쪼개진다. keep-all 은 **띄어쓰기에서만**
      끊게 한다.
   ⚠️ overflow-wrap 을 반드시 함께 준다. keep-all 만 주면 띄어쓰기가 없는
      긴 문자열(URL·토큰·주문번호)이 한 줄로 뻗어 **가로 스크롤**을 만든다 —
      고치려던 것보다 나쁘다.
   ⚠️ 요소에 직접 선언한 word-break 는 이 상속을 이긴다. 그래서 URL·로그처럼
      글자 단위로 끊어야 하는 곳(code/pre/break-all)은 영향을 받지 않는다. */
html, body { word-break: keep-all; overflow-wrap: break-word; }


/* ===== (1) 입력 확대 방지 — 결제 흐름에서 가장 크게 체감된다 ===== */
#orderModal .ig-input,
#productModal .ig-input,
#orderModal select.ig-input,
#orderModal textarea.ig-input {
  /* 16px 미만이면 iOS 가 확대한다. 14 → 16. */
  font-size: 16px !important;
  padding: 12px 13px !important;
  min-height: 46px;
}
#orderModal textarea.ig-input { min-height: 84px; }
/* 라벨은 그대로 작게 둬도 된다 — 확대는 **입력에 포커스**할 때만 일어난다 */

/* ===== (2) 시트 높이 — 주소창에 가려지지 않게 ===== */
#orderModal .ig-modal-content {
  max-height: 88vh;            /* 구형 브라우저 폴백 */
  max-height: 88dvh;
}
.lv-plist-panel {
  max-height: 82vh;
  max-height: 82dvh;
}
/* 시트 안에서 끝까지 스크롤했을 때 뒤 페이지가 따라 움직이지 않게 */
#orderModal .ig-modal-body,
.lv-plist-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 페이지 자체 높이도 동적 뷰포트로 */
.live-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* ===== (3) 터치 크기 ===== */
#orderModal .ig-btn,
#orderModal button[type="submit"],
.ig-modal-footer button {
  min-height: 46px;
}

/* 작은 아이콘 버튼은 보이는 크기는 그대로 두고 **누를 수 있는 범위**만 넓힌다 */
@media (max-width: 768px) {
  .omk-topbar-actions > button,
  .omk-topbar-actions > a {
    min-width: 38px; min-height: 38px;
  }
}

/* ===== 넘침 방지 — body 에 overflow 를 걸지 않고 원인만 막는다 ===== */
.live-wrap img,
.live-wrap video,
.live-wrap canvas,
#orderModal img {
  max-width: 100%;
  height: auto;
}
.live-wrap table { max-width: 100%; }

/* ===== 숫자 정렬 — 금액이 세로로 읽힌다 ===== */
#orderModal #orderPayableAmount,
#orderModal #orderProductPrice,
#orderModal #orderTotalPrice,
#orderModal #orderDiscountAmount,
#orderModal #orderShippingAmount,
#orderModal #orderVatAmount {
  font-variant-numeric: tabular-nums;
}

/* ===== 전체화면 모달(구 규칙)도 동적 뷰포트로 ===== */
@media (max-width: 640px) {
  .modal-dialog { min-height: 100vh; min-height: 100dvh; }
  .modal-content { min-height: 100vh; min-height: 100dvh; }
}

/* ===== 작은 화면 가독성 ===== */
@media (max-width: 400px) {
  #orderModal .ig-modal-title { font-size: 15.5px; }
  #orderModal .ig-label { font-size: 11.5px !important; }
}

/* 움직임을 줄여 달라고 설정한 사용자 — 시트가 튀어오르지 않게 */
@media (prefers-reduced-motion: reduce) {
  #orderModal .ig-modal-content,
  .lv-plist-panel { animation: none !important; }
}

/* ===========================================================================
   범용 — 시청자/고객 화면 전체
   주문 시트 밖에도 입력이 있다(주문조회 전화번호, 방송 검색, 채팅 입력).
   같은 확대 문제가 똑같이 일어난다.
   ⚠️ 폭/여백은 건드리지 않는다. **글자 크기만** 올린다 — 레이아웃을 흔들지 않으려고.
   =========================================================================== */
@media (max-width: 768px) {
  input[type="text"], input[type="tel"], input[type="number"], input[type="email"],
  input[type="password"], input[type="search"], input[type="url"],
  input[type="date"], input[type="datetime-local"], input[type="time"],
  select, textarea {
    font-size: 16px !important;
  }
}