/* ============================================================================
   bobusang-mobile.css — 휴대폰 세로판  [2026-08-25 · 기획]

   🔴 이 파일의 규칙은 **전부 @media (orientation:portrait) 안에서만 산다.**
      가로·PC 는 한 픽셀도 안 바뀐다 — 8/26 제출 빌드를 흔들지 않기 위해서다.
      세로 규칙을 이 media 밖으로 꺼내지 마라.

   왜 필요한가 — index.html 의 fitStage() 가 1280x720 무대를 통째로 그린 뒤
   transform:scale() 로 줄인다. 폰 세로(390x844)에서 배율이 0.305 라
   **화면의 26% 만 쓰고 대사 글자가 4.6px** 이 된다(실측 2026-08-25).
   세로판은 배율을 버리고 **폰 폭에 맞춰 진짜 크기로** 그린다 — 15px 이 15px 이 된다.

   ⚠️ 무대가 1280 → 390 으로 좁아지면 `cqw` 값이 3.3배 작아진다.
      clamp(9px, 1.5cqw, 16px) 같은 것들은 전부 **최솟값으로 떨어진다** — 그게 맞다.
      글자는 bobusang-type.css 가 고정 px 라 그대로 산다.
   ============================================================================ */

@media (orientation: portrait) {

  /* ── ① 배율을 버린다 ────────────────────────────────────────────────
     fitStage 가 --bs-w9(1280px) / --bs-k9(0.305) 을 넣어 두지만 여기서 무시한다.
     100dvh 를 쓴다 — 100vh 는 모바일 브라우저 주소창 높이를 포함해서
     아래가 잘리고, 키보드가 올라올 때도 dvh 가 훨씬 얌전하다. */
  html, body { overflow: hidden; }
  .bs-stage {
    min-height: 100dvh; height: 100dvh;
    align-items: stretch; justify-content: stretch;
  }
  .bs-stage > .bs-screen,
  .bs-stage > .bs-title,
  .bs-stage > .bs-op {
    width: 100vw !important; height: 100dvh !important;
    transform: none !important; flex: none;
  }
  /* 배경은 세로로 잘라 채운다 — 가로 그림이라 좌우가 잘리는 게 정상이다 */
  .bs-screen .bs-bg { object-fit: cover; }

  /* 🔴 flowC(로그 모드)는 **가로에서 화면을 좌우로 쪼개는** 구조다 —
     오른쪽 잉크 패널을 ::before 로 깔고(flow.css:143) 배경을 왼쪽 46% 로 줄인다.
     세로엔 오른쪽이 없다. 이 셋을 안 풀면 화면 절반이 검게 덮이고
     배경이 왼쪽 46% 에만 그려진다(실측 2026-08-25: bs-bg 폭 467/1015). */
  .bs-screen.flowC::before { display: none; }
  .bs-screen.flowC .bs-bg { width: 100%; }
  .bs-screen.flowC .bs-char { left: auto; height: 100%; }

  /* 소리 조절대 — 무대 밖 position:fixed 라 배율을 안 탄다.
     세로에선 왼쪽 아래가 **입력바 자리**라 그대로 두면 입력창을 덮는다(실측).
     폰은 하드웨어 볼륨키가 있으니 **막대는 접고 음소거 버튼만** 왼쪽 위로 올린다. */
  #audiobar {
    left: 6px; top: 6px; bottom: auto;
    flex-direction: row; gap: 4px; align-items: center;
  }
  #audiobar input[type=range], #audiobar b { display: none; }
  #bgmbtn, #sfxbtn { font-size: 11px; padding: 3px 7px; }

  /* ══ ② 좌판 — B안(flowC · 채팅)이 세로 기본 ═══════════════════════════
     가로에선 왼쪽 무대 / 오른쪽 로그로 갈라져 있다. 세로엔 왼쪽이 없으므로
     위아래로 쌓는다: 상단바 → 상품 줄 → 초상 배너 → 채팅 → 입력바        */

  /* 상단바 — 골드 칩. 오른쪽 위 고정 */
  .bs-screen.flowC .bs-hud,
  .bs-screen.flowA .bs-hud {
    top: 8px; right: 8px; left: auto; font-size: 13px;
  }
  .bs-screen .bs-laybtn { font-size: 12px; padding: 3px 10px; margin-top: 5px; }

  /* 상품 줄 — 가로에선 오른쪽 세로 패널(22%)이다. 세로에선 폭 전체 띠로 눕힌다 */
  .bs-screen .bs-ip {
    top: 44px; left: 6px; right: 6px; width: auto;
    padding: 6px 8px; z-index: 6;
    background: rgba(12, 11, 8, .90); border: 1px solid #6b5a2e;
  }
  .bs-screen .bs-ip-top { align-items: center; gap: 8px; }
  .bs-screen .bs-ip-frame { width: 34px; height: 34px; }
  .bs-screen .bs-ip-ds { display: none; }        /* 설명은 세로에서 자리를 너무 먹는다 */
  .bs-screen .bs-ip-bar,
  .bs-screen .bs-ip-lab { display: none; }       /* 싸다/비싸다 막대도 뺀다 — 값 두 줄이면 안다 */
  .bs-screen .bs-ip-rows {
    display: flex; gap: 12px; margin: 0; padding: 0;
  }
  .bs-screen .bs-ip-row { display: flex; gap: 5px; align-items: baseline; font-size: 12.5px; }
  .bs-screen .bs-ip-nm { font-size: 14.5px; }

  /* 초상 — 배너로. 채팅판의 위 모서리가 무릎을 자른다(여관 탁자와 같은 수법) */
  .bs-screen.flowC .bs-charwrap {
    /* ⚠️ px 로 박지 마라 — 폰 세로 길이는 667~932 로 제각각이다. **화면 비율**로 잡는다.
       16% = 상품 줄 아래. 채팅판 윗모서리(39%)가 무릎을 자른다(여관 탁자와 같은 수법) */
    left: 50%; top: 16%; bottom: auto; height: 36%;
  }
  /* 이름표·인내심 — 배너 아래쪽에 겹친다 */
  .bs-screen.flowC .bs-npc {
    /* 채팅판(39%) 바로 위에 앉힌다.
       ⚠️ right 를 주지 마라 — 폭이 화면 전체가 되면 인내심 막대가 끝에서 끝까지 늘어진다(실측). */
    left: 8px; right: auto; width: auto; max-width: 68%; top: 29%; transform: none;
    align-items: flex-start; gap: 2px;
    background: rgba(12, 11, 8, .86); border: 1px solid #6b5a2e;
    padding: 5px 10px;
  }
  /* 무대가 1280 → 390 으로 좁아지면 cqw 기반 글자가 제멋대로다. 세로에선 px 로 못 박는다 */
  .bs-screen .bs-npc-name { font-size: 16px; line-height: 1.25; }
  .bs-screen .bs-npc-title { font-size: 11px; }
  .bs-screen .bs-npc-num { font-size: 12px; }
  .bs-screen .bs-gauge { width: 100%; min-width: 150px; height: 7px; }

  /* 채팅판 — 초상 배너 아래부터 입력바 위까지 */
  .bs-screen.flowC .bs-log {
    left: 6px; right: 6px; top: 39%; bottom: 66px;
    background: rgba(12, 11, 8, .82); border: 1px solid #4a4229;
    padding: 8px; border-radius: 3px;
  }
  .bs-screen.flowC .bs-bub,
  .bs-screen.flowC .bs-sys { max-width: 86%; }
  .bs-screen .bs-bub { font-size: 14.5px; line-height: 1.62; }

  /* 입력바 — 화면 아래 고정. 세로에선 폭 전체 */
  .bs-screen.flowC .bs-input,
  .bs-screen.flowA .bs-input {
    left: 6px; right: 6px; width: auto; transform: none; bottom: 8px;
    padding: 4px 4px 4px 10px;
  }
  /* 🔴 폰 입력창 글자는 16px 미만이면 iOS 사파리가 **화면을 확대해 버린다.**
     확대되면 fitStage 와 싸워 판이 어긋난다. 16px 아래로 내리지 마라. */
  .bs-screen .bs-input input { font-size: 16px; }
  .bs-screen .bs-send { font-size: 15px; padding: 8px 14px; }

  /* ══ ③ 좌판 A안(flowA · 미연시) — 스위치로 넘어왔을 때 ══════════════ */
  .bs-screen.flowA { --char-h: 74%; }
  .bs-screen.flowA .bs-charwrap { left: 50%; bottom: -4%; top: auto; }
  .bs-screen.flowA .bs-npc {
    left: 8px; right: 8px; width: auto; transform: none;
    top: auto; bottom: 29%; align-items: flex-start;
  }
  .bs-screen.flowA .bs-vnband {
    left: 8px; right: 8px; bottom: 26.5%;
  }
  .bs-screen.flowA .bs-vn {
    left: 8px; right: 8px; top: auto; bottom: 66px; height: 18%; min-height: 120px;
    padding: 10px 12px;
  }

  /* ══ ④ 나머지 화면 — 세로에서 안 깨지게만 ═══════════════════════════ */

  /* 도매상 — 5칸 격자를 2열로. 봇짐 격자는 그 아래로 */
  .bs-screen.bs-shop .bs-grid {
    grid-template-columns: repeat(2, 1fr); gap: 8px;
  }
  /* 저녁 — 명패 셋을 세로로 쌓는다. 좌표는 판의 중심 기준이다(CLAUDE.md) */
  .bs-screen .bs-spots .bs-spot:nth-child(1) { left: 50%; top: 40%; }
  .bs-screen .bs-spots .bs-spot:nth-child(2) { left: 50%; top: 57%; }
  .bs-screen .bs-spots .bs-spot:nth-child(3) { left: 50%; top: 74%; }

  /* 여관 — 세로에선 초상 **한 명**으로 되돌린다.
     26%/74% 두 사람 배치는 가로 16:9 에서 잰 값이라 390px 폭에서는 겹친다 */
  .bs-screen.bs-inn .bs-innpor.k { left: 50%; }
  .bs-screen.bs-inn .bs-innpor.g { left: 50%; }
  .bs-screen.bs-inn .bs-innpor.off { display: none; }
  .bs-screen.bs-inn .bs-innpor { height: 56%; }

  /* 대사 한 줄 창(여관·튜토리얼) */
  .bs-screen .bs-tutsay { left: 6px; right: 6px; font-size: 15px; padding: 10px 12px; }

  /* 버튼 띠 — 세로에선 두 줄로 흘러도 된다 */
  .bs-screen .bs-footbar { left: 6px; right: 6px; flex-wrap: wrap; gap: 6px; }
  .bs-screen .bs-btn { font-size: 14px; padding: 9px 13px; }
}