/* ===========================================================================
   보부상 게임 — 협상 화면 대화부 (확정: 미연시형)  2026-08-12
   배치 실험(현재 로그판 / A 미연시 / C 좌우분리)에서 A가 선택됐다.

   .bs-screen.flowA  기본. 최신 한 마디만 대사창에 크게, 위에 상황 서술 띠.
   .bs-screen.flowC  「📜 채팅 로그」를 누르면 전환 — 좌 무대 46% / 우 잉크 패널에
                     전체 로그. 입력창도 패널에 살아 있어 읽으면서 흥정할 수 있다.

   진입: .bs-vnlog (대사창 오른쪽 위) · 복귀: .bs-laybtn (HUD 아래)
   나중에 bobusang-ui.css 로 합칠 수 있다. 선택자는 전부 .bs-screen 아래로 한정.
   =========================================================================== */

/* ── 복귀 버튼 (flowC 의 HUD 아래) ── */
.bs-screen .bs-laybtn{
  display:block; margin-top:clamp(4px,.7cqw,8px); margin-left:auto;
  background:var(--c2); color:var(--c6); border:2px solid var(--c3);
  box-shadow:2px 2px 0 var(--c1); cursor:pointer;
  font:inherit; font-weight:700; letter-spacing:.03em;
  padding:clamp(2px,.5cqw,5px) clamp(8px,1.4cqw,13px);
  font-size:clamp(8px,1.25cqw,13px);
}
.bs-screen .bs-laybtn:hover{ background:var(--c3); color:var(--c8); }

/* ══════════════════════════════════════════════════════════════════════════
   flowA · 미연시형 (기본)
   ══════════════════════════════════════════════════════════════════════════ */

/* 대사창 위에 뜨는 상황 서술 띠 (이번 턴 것만, 최대 2줄)
   ⚠️ 대사창을 움직이면 이 값도 같이 움직여야 한다. 창 위에 붙어 있어야 하는 띠다 */
.bs-screen .bs-vnband{
  position:absolute; left:17%; right:17%; bottom:38.7%; z-index:4;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(3px,.6cqw,7px);
}

/* 대사창 본체 — 최신 한 마디만 담는다
   ══ 2026-08-12 확정 (시안 vn_window_options / vn_text_options / vn_noscroll_options) ══
   세 가지를 한꺼번에 맞춘 값이다. 하나만 바꾸면 나머지가 깨진다.

     ① 캐릭터를 덜 가린다  → top 60% → 62.8%, 그리고 판을 반투명(90%)으로
     ② 한 줄이 너무 길다   → 창 86% → 66%, 글자 22px → 20px  ⇒ 한 줄 47자 → 39자
                             (한글 대사는 28~40자가 편하다. 글자만 줄이면 한 줄이 되레 길어진다)
     ③ 스크롤 금지         → 4줄 × 39자 = 156자까지 스크롤 없이 들어간다

   ⚠️ top:62.8% 는 「4줄이 딱 들어가는 높이」다. 계산근거:
      창높이 = 720 × (100−15.5−62.8)% = 156px, 안쪽 = 156 − 16 − 12 − 4 = 124px,
      줄높이 = 20 × 1.55 = 31px → 124 / 31 = 4줄.
      top 을 올리면 5줄이 되며 캐릭터를 더 가리고, 내리면 3줄이 되며 117자에서 넘친다.

   ⚠️ 156자를 넘는 대사는 이 창으로 못 막는다 — 아래 「페이지 넘김」이 그 답이다.
      2026-08-12 에는 프롬프트에 글자수 상한을 걸자고 적었지만, 상한은 근본 해결이 아니다.
      AI 는 상한을 자주 어기고, 어긴 순간 화면이 깨진다. 넘치면 잘라서 다음 장으로 민다. */
.bs-screen .bs-vn{
  position:absolute; left:17%; right:17%; top:62.8%; bottom:15.5%; z-index:4;
  background:rgba(26,38,18,.90); border:2px solid var(--c5); box-shadow:4px 4px 0 var(--c1);
  padding:clamp(9px,1.5cqw,16px) clamp(14px,2cqw,24px) clamp(7px,1.1cqw,12px);
}
.bs-screen .bs-vn.me{ background:rgba(46,58,28,.90); }  /* 내 말이 떠 있는 동안(손님 생각 중) */
.bs-screen .bs-vn.angry{ border-color:var(--danger); }  /* 화난 대사는 창 테두리째 붉게 */

.bs-screen .bs-vntxt{
  height:100%; overflow-y:auto; color:var(--c8); line-height:1.55;
  font-size:clamp(10px,1.7cqw,20px);
  /* 대사에 들어온 줄바꿈(\n)을 그대로 살린다 — 문장마다 줄을 나누기 위한 것.
     기본값 normal 이면 \n 이 그냥 공백으로 뭉개져 아무 데서나 끊긴다.
     ⚠️ 이게 먹으려면 AI 대사에 실제로 \n 이 들어와야 한다 (game.jsx 프롬프트 관할) */
  white-space:pre-line;
  scrollbar-width:thin; scrollbar-color:var(--c3) transparent;
}
.bs-screen .bs-vntxt b{ color:var(--gold); }

/* ── 페이지 넘김 ── 확정 2026-08-13 (시안 graphics/vn_page.html)
   긴 대사를 스크롤하지 않는다. 창에 들어가는 만큼만 띄우고 나머지는 다음 장으로 민다.

   스크롤을 버린 이유 세 가지
     ① 스크롤바가 2px 라 「더 있다」를 아무도 못 알아챈다 (픽셀아트 화면)
     ② 손은 입력창에 가 있는데 대사창까지 마우스를 옮겨 굴려야 한다
     ③ 스크롤은 채팅앱 관습이다. 미연시로 가기로 해 놓고 대사창만 채팅앱이 된다

   ⚠️ 장을 나누는 건 CSS 가 못 한다. game.jsx 의 paginate() 가 실제로 넣어 보고
      scrollHeight 로 재서 자른다. 글자수 상한으로 자르면 안 된다 — 창 폭과 글꼴이
      cqw 라 화면 크기에 따라 변한다. 어떤 해상도에서는 반드시 틀린다. */

/* 페이지 방식일 땐 절대 스크롤하지 않는다 */
.bs-screen .bs-vn.paged .bs-vntxt{ overflow:hidden; }

/* 다음 장이 남았다는 표시 — 창 아래 테두리에 걸터앉아 깜빡인다.
   ⚠️ 창 **안쪽**에 두지 마라. 마지막 줄이 오른쪽 끝까지 차는 순간 글자를 덮는다.
      이름표(bs-vntab)처럼 테두리에 걸쳐 두면 글자와 절대 안 부딪친다.
   ⚠️ steps(1) 로 깜빡인다. 부드럽게 사라지면 픽셀아트 화면에서 혼자 매끈해 보인다 */
.bs-screen .bs-vn.more::after{
  content:"▼"; position:absolute;
  right:clamp(8px,1.3cqw,15px); bottom:calc(-1 * clamp(7px,1cqw,11px));
  color:var(--gold); background:var(--c1); border:2px solid var(--c3);
  padding:0 clamp(4px,.7cqw,8px);
  font-size:clamp(9px,1.3cqw,15px); line-height:1.35;
  animation:bsvnmore 1s steps(1) infinite;
}
@keyframes bsvnmore{ 0%,55%{opacity:1} 56%,100%{opacity:0} }

/* 몇 장 중 몇 장째인가. 두 장 이상일 때만 붙인다 (.bs-vnctl 안, 제시가 왼쪽) */
.bs-screen .bs-vnpg{
  background:var(--c1); border:2px solid var(--c3); color:var(--c5);
  font-weight:700; white-space:nowrap;
  padding:1px clamp(7px,1.2cqw,12px);
  font-size:clamp(9px,1.35cqw,15px);
}

/* 이름표 — 창 왼쪽 위 모서리에 걸친다 */
.bs-screen .bs-vntab{
  position:absolute; left:-2px; top:calc(-1 * clamp(13px,2.2cqw,19px));
  background:var(--c5); color:var(--c1); border:2px solid var(--c1);
  font-weight:700; white-space:nowrap;
  padding:1px clamp(9px,1.5cqw,16px);
  font-size:clamp(9px,1.45cqw,16px);
}
.bs-screen .bs-vn.me .bs-vntab{ background:var(--c4); }

/* 오른쪽 위 — 내 마지막 제시가 + 채팅 로그 버튼 */
.bs-screen .bs-vnctl{
  position:absolute; right:-2px; top:calc(-1 * clamp(14px,2.4cqw,20px));
  display:flex; gap:clamp(5px,.9cqw,10px); align-items:stretch;
}
.bs-screen .bs-vnoff{
  background:var(--c1); border:2px solid var(--gold); color:var(--gold);
  font-weight:700; white-space:nowrap;
  padding:1px clamp(8px,1.4cqw,14px);
  font-size:clamp(9px,1.4cqw,16px);
}
.bs-screen .bs-vnlog{
  background:var(--c2); border:2px solid var(--c3); color:var(--c6);
  font:inherit; font-weight:700; cursor:pointer; white-space:nowrap;
  padding:1px clamp(8px,1.4cqw,14px);
  font-size:clamp(9px,1.4cqw,15px);
}
.bs-screen .bs-vnlog:hover{ background:var(--c3); color:var(--c8); }

/* ══════════════════════════════════════════════════════════════════════════
   flowC · 채팅 로그 화면 — DOM은 로그판 그대로, CSS 만으로 좌우를 쪼갠다
   ══════════════════════════════════════════════════════════════════════════ */

/* 오른쪽 잉크 패널 (요소가 아니라 화면의 ::before 로 깐다) */
.bs-screen.flowC::before{
  content:""; position:absolute; left:46%; right:0; top:0; bottom:0;
  background:var(--c1); border-left:3px solid var(--c3); z-index:2;
}
.bs-screen.flowC .bs-bg{ width:46%; }
.bs-screen.flowC .bs-char{ left:23%; height:88%; }
.bs-screen.flowC .bs-npc{ left:23%; width:34%; }

/* HUD 칩을 패널 위쪽으로 */
.bs-screen.flowC .bs-hud{
  left:48.5%; right:2%; top:2.6%;
  display:flex; flex-wrap:wrap; gap:clamp(4px,.7cqw,8px);
  justify-content:flex-start;
}
.bs-screen.flowC .bs-hud .bs-chip{ box-shadow:none; border-color:var(--c3); }
.bs-screen.flowC .bs-laybtn{ margin:0 0 0 auto; }

/* 로그·입력을 패널 안으로
   ⚠️ 2026-08-12 감수 — top 을 13% 아래로 내리지 마라. HUD 칩이 세로로 쌓이면서
   (골드 / 매입가·풍문 / 대화로 돌아가기) 하단이 무대 높이의 약 24% 까지 내려온다.
   13% 로 두면 HUD 가 로그 위쪽 69px 을 덮어 잘린 글자가 칩 뒤로 비친다. */
.bs-screen.flowC .bs-log{ left:48.5%; right:2%; top:26%; bottom:15%; }

/* 도장 — flowC 에서는 오른쪽이 로그 패널이라 기본 위치(오른쪽)면 로그를 덮는다.
   왼쪽 무대(46%) 안, 얼굴 아래로 내린다. 무대가 좁으니 도장도 함께 줄인다.
   ⚠️ padding 의 % 는 세로도 폭 기준이다 (bobusang-ui.css 의 .bs-verdict 주석 참고). */
.bs-screen.flowC .bs-verdict{ justify-content:flex-start; padding:0 0 9% 16%; }
.bs-screen.flowC .bs-verdict .mark{ width:clamp(70px,14cqw,160px) }
/* 도장을 줄였으면 글자도 같이 줄여야 한다. 안 줄이면 「성사」가 두 줄로 깨진다 */
.bs-screen.flowC .bs-verdict .txt{ font-size:clamp(10px,3.1cqw,32px) }
.bs-screen.flowC .bs-bub{ max-width:82%; }
.bs-screen.flowC .bs-sys{ max-width:82%; }
.bs-screen.flowC .bs-input{
  left:48.5%; right:2%; width:auto; transform:none; bottom:3.4%;
  border-color:var(--c3);
}

/* ── 흥정 대사 속 금액 강조 [2026-08-16 · 사용자 확정] ──
   대사창(.bs-vntxt)·로그 말풍선(.bs-bub)·서술 띠(.bs-vnband)의 "N골드"/"NG"만 붉게.
   ⚠️ font-weight 를 추가하지 마라 — 픽셀 폰트는 굵기에 폭이 변해 paginate 실측이 어긋난다. 색만. */
.bs-screen .vn-gold{ color:var(--danger-txt); }

/* ── 응답 대기 연출 [2026-08-22 · 기획 지시] ─────────────────────────
   charanim.css(확정본)의 bsBreathe 는 그대로 두고 busy 동안 클래스로 덮는다.
   선택자를 3클래스로 쓴 이유 — charanim.css 가 이 파일 **뒤에** 로드되므로(index.html 22행)
   특이도로 이겨야 한다. !important 금지. 도트 규칙: steps() 만, 이징·블러 금지. */
.bs-screen .bs-char-br.bs-ponder{ animation:bsPonder 2.2s steps(2) infinite; }
/* [개정 2026-08-23 · 인계_좌판저녁연출 4절 · 근거 기획/ux시안/검수_웃는얼굴_깨짐.html]
   rotate 를 뺐다. 초상은 무대 1920 에서 **거의 1:1**(950 원본 → 950.4 표시)로 맞춰 둔 것이라
   회전이 그 1:1 을 깨서 얼굴 전체가 리샘플된다. 이동(translate)만 안전하다.
   ⚠️ rotate 를 되돌리지 마라 — 머리 위 「…」 이모트가 이미 같은 신호를 준다 */
@keyframes bsPonder{
  0%,100%{ transform:translateY(0) }
  25%    { transform:translateY(-0.7%) translateX(0.6%) }
  50%    { transform:translateY(0) }
  75%    { transform:translateY(-0.7%) translateX(-0.6%) }
}
/* [2026-08-22] 생각 점 승격(.bs-think.big)은 머리 위 이모트가 들어오며 제거했다 —
   「…」이 두 군데면 중복. 점은 build.css 271행 기본 크기로 돌아갔다. */
/* ── 머리 위 「고민 중」 이모트 [2026-08-22 · ASSET_ORDER_WAIT_0822] ──
   자리: .bs-charwrap 기준. charwrap 은 width 가 초상 폭에 맞춰 줄어들므로
   % 로 잡으면 초상이 넓든 좁든(니블 395px ~ 로자 537px) 같은 비율로 따라온다.
   ⚠️ image-rendering:pixelated 금지 — charanim.css 140행 규칙.
      이 그림은 픽셀 런 길이가 1~3 으로 흩어진 도트풍 고해상도라 초상·배경과 같은 부류이고,
      초상 크기에 비례해 연속으로 축소되므로 최근접 이웃은 계단을 깨뜨린다. */
.bs-screen .bs-wait-emote{
  position:absolute; left:68%; top:5%; width:13%;   /* 사용자 확정 좌표 (verify.html 실측) */
  pointer-events:none; z-index:2;
  image-rendering:auto;
  animation:bsEmoteIn .28s steps(3) both;
}
.bs-screen .bs-wait-emote img{
  position:absolute; left:0; top:0; width:100%; height:auto;
  display:block; image-rendering:auto; opacity:0;
}
/* 4프레임 순환 — 없음 → 점1 → 점2 → 점3. 한 칸 .32s · 한 바퀴 1.28s.
   도트 규칙: steps() 만, 이징·블러 금지 */
.bs-screen .bs-wait-emote img:nth-child(1){ animation:bsEmote 1.28s steps(1) infinite       }
.bs-screen .bs-wait-emote img:nth-child(2){ animation:bsEmote 1.28s steps(1) infinite -.32s }
.bs-screen .bs-wait-emote img:nth-child(3){ animation:bsEmote 1.28s steps(1) infinite -.64s }
.bs-screen .bs-wait-emote img:nth-child(4){ animation:bsEmote 1.28s steps(1) infinite -.96s }
@keyframes bsEmote{ 0%,24.9%{ opacity:1 } 25%,100%{ opacity:0 } }
@keyframes bsEmoteIn{
  0%  { transform:translateY(8px) scale(.55); opacity:0 }
  100%{ transform:none; opacity:1 }
}
/* 대기 지문 띠 — vnband(type.css 에서 bottom 42.2%)와 대사창 상단(top 62.8% = 아래에서 37.2%)
   사이의 틈에 산다. 첫 대사 대기 땐 vnband 에 장면 2줄이 실제로 떠 있어 같은 좌표면 겹친다.
   톤은 지난 sys 줄 문법(ui.css 198행: c3 바탕 + c7 글자)을 빌린다 — "장면"보다 한 단 낮은 회색조 */
.bs-screen .bs-waitband{
  position:absolute; left:17%; right:17%; bottom:38.2%; z-index:4;
  text-align:center; pointer-events:none;
  font-size:12px; letter-spacing:.08em;   /* Galmuri11 격자 — 12px 배수 */
  color:var(--c7); opacity:.75;
  text-shadow:2px 2px 0 var(--c1);
  animation:bsWaitIn .3s steps(3) both;
}
@keyframes bsWaitIn{ from{ opacity:0; transform:translateY(4px) } to{ opacity:.75; transform:none } }
/* 🚫 **지금은 안 쓴다** [2026-08-24] — game.jsx 가 이 띠를 그리지 않는다(사용자 지시로 철거).
   12px 이라 너무 작았고 첫 전송 전까지 안 사라져 거슬렸다. 같은 가르침은 입력창 placeholder
   힌트(HINT_ANY)가 15px 로 대신한다. 규칙은 남겨 둔다 — 되살릴 때 이 값이 그대로 필요하다.
   첫 손님 안내 띠 [2026-08-23 · 지시문_입력힌트 【5】] — 대기 지문 띠(.bs-waitband)와
   **같은 계열·같은 자리**다. 지시문은 「입력바 바로 위」였지만 거기엔 자리가 없다 —
   실측: 대사창 하단 616px · 입력바 상단 626px → 틈이 10px 뿐이라 12px 글자가 안 들어간다
   (11.4% 는 입력바를 16px 덮었고, 14.4% 는 대사창을 15px 덮었다).
   그래서 38.2%(대기 지문 자리)로 보냈다. 둘은 busy 로 갈려 절대 같이 안 뜬다 —
   지문은 손님이 생각할 때, 이 띠는 내 차례일 때다.
   판당 한 번만 뜨는 문장이라 대기 지문(.75)보다 한 단 진하게 두고, 핵심 구절만 금색으로 든다. */
.bs-screen .bs-firstbar{
  position:absolute; left:17%; right:17%; bottom:38.2%; z-index:5;
  text-align:center; pointer-events:none;
  font-size:12px; letter-spacing:.06em;   /* Galmuri11 격자 — 12px 배수 */
  color:var(--c7); text-shadow:2px 2px 0 var(--c1);
  animation:bsFirstIn .3s steps(3) both;   /* bsWaitIn 은 .75 로 끝난다 — 이 띠는 1.0 이라 따로 둔다 */
}
@keyframes bsFirstIn{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
.bs-screen .bs-firstbar b{ color:var(--gold); }
@media (prefers-reduced-motion: reduce){
  .bs-screen .bs-char-br.bs-ponder{ animation:none }
  .bs-screen .bs-waitband{ animation:none }
  .bs-screen .bs-firstbar{ animation:none }
  /* 이모트는 점 3개(f4)로 고정해 둔다.
     ⚠️ f1(점 없음)로 굳히면 안 된다 — 빈 말풍선만 떠 있으면 대기 신호가 아니라 버그로 보인다 */
  .bs-screen .bs-wait-emote,
  .bs-screen .bs-wait-emote img{ animation:none }
  .bs-screen .bs-wait-emote img:nth-child(4){ opacity:1 }
}