/* ===========================================================================
   보부상 게임 — 협상 화면 UI (확정본)
   2026-08-11 · 기준 문서 D:\해커톤\graphics\STYLE_SPEC.md
   적용 방법 D:\해커톤\graphics\output\ui\UI_APPLY.md

   그대로 붙여 쓰면 된다. 값을 임의로 바꾸지 마라 — 아래 수치는
   서로 겹치지 않도록 계산해서 맞춘 것이다 (특히 --log-bottom).

   모든 선택자는 .bs-screen 안으로 한정했다. 기존 앱 스타일과 충돌하지 않는다.
   =========================================================================== */

/* ── 팔레트 ─────────────────────────────────────────────────────────────────
   그림의 색은 쓰지 않는다. 명도만 뽑아 아래 8단계 램프에 매핑한 것이 화면 색이다.
   마을 전환은 .groknar 클래스 하나로 끝난다 — 이미지는 마을별로 미리 구워 둔다. */
.bs-screen{
  --c1:#1a2612; --c2:#2e3a1c; --c3:#556031; --c4:#8b8f4c;
  --c5:#b5b571; --c6:#cfcd8f; --c7:#e6e4b4; --c8:#f6f4d2;

  /* 신호색 — 팔레트 밖에서 유일하게 허용. 게임플레이 정보에만 쓴다 */
  --gold:#f0b03c;      /* 가격 · 골드 · 인내심 채움 */
  --danger:#b03a30;    /* 위험 · 거절 · 인내심 바닥 */
  --danger-txt:#ff9d8f;

  /* 레이아웃 상수 — 이유는 UI_APPLY.md 참조 */
  --log-side:11%;      /* 로그 칸 좌우 여백. 3%로 넓히면 좌우 시선 이동이 커져 읽기 힘들다 */
  --log-top:17%;       /* 위: 인내심 블록(4~14%)을 피한다 */
  --log-bottom:16.5%;  /* 아래: 입력 바(~13%)를 피한다. ⚠️ 입력 바보다 반드시 커야 한다 */
  --char-h:82%;        /* 캐릭터 높이. 머리 위에 인내심 자리를 남긴다 */
}
/* ⚠️ 2026-08-14 — **마을별 색 구분을 없앴다(사용자 결정).** 게임 전체가 브리델 그린이다.
   원래는 국경을 넘으면 앰버 CRT 로 바뀌는 연출이었다. 아래 블록이 그것이었고 지금은 껐다.
   .groknar 클래스는 game.jsx 가 계속 붙이지만, 램프를 안 바꾸므로 아무 일도 일어나지 않는다.

   ⚠️ 이 블록을 **type.css 쪽에서 덮어쓰는 방식으로 끄면 안 된다.**
      밤 램프(bobusang-screens.css 의 .bs-screen:has(.bs-night-wrap))와 특이도가 같은데
      type.css 가 더 뒤에 로드되어 **밤 화면까지 그린으로 덮어 버린다.**
      밤 파랑은 마을이 아니라 **시간대** 구분이라 남겨야 한다. 그래서 여기서 직접 껐다.

   그림도 같이 바꿨다 — 되돌릴 것이 CSS 만이 아니다:
     · 배경 3장 + 오크 도매상 초상 1장 → 그린 램프로 다시 칠함
       (graphics/scripts/recolor_groknar.py · 램프끼리 대응시켜 계조 보존)
     · output/items/groknar · output/ui/groknar → 브리델 것으로 교체
       (같은 물건·같은 부품이라 그림이 같고 색만 달랐다)
   원본 전부: graphics/_backup_before_green_0814/

.bs-screen.groknar{
  --c1:#301a05; --c2:#452a0b; --c3:#7a4a14; --c4:#b8792a;
  --c5:#e0aa55; --c6:#ecc47e; --c7:#f5dcab; --c8:#fdf0d4;
}
*/

/* ── 무대 ───────────────────────────────────────────────────────────────────
   16:9 고정. 내부 크기는 전부 cqw(컨테이너 폭 기준)라서 화면이 커져도 비율이 유지된다. */
.bs-screen{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:#0d0a08; border:2px solid var(--c1);
  container-type:inline-size;
  font-family:"Galmuri11","DungGeunMo",system-ui,"Malgun Gothic",sans-serif;
  line-height:1.6; -webkit-font-smoothing:none;
}
/* 도트를 뭉개지 않는다 */
.bs-screen *{ image-rendering:pixelated; box-sizing:border-box; }
/* 금지: border-radius, blur, backdrop-filter, linear-gradient, 부드러운 그림자 */

/* ── 레이어 1 · 배경 ────────────────────────────────────────────────────────
   명도 5~8단계로 압축해 구운 이미지를 쓴다 (scripts/palette.py 의 *_bg 램프).
   압축 덕분에 어두운 1~4단계가 비고, 그 자리를 UI 판과 캐릭터가 차지한다. */
.bs-screen .bs-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 64%;
}

/* ── 레이어 2 · 캐릭터 ──────────────────────────────────────────────────────
   ⚠️ 캐릭터에는 명도 압축을 절대 걸지 마라. 8단계를 전부 쓴다.
      표정·재질·실루엣이 전부 게임 정보다. 대역을 좁히면 그 정보가 날아간다. */
.bs-screen .bs-char{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  height:var(--char-h); width:auto; z-index:1;
}

/* ── 우상단 · 내 상태 ───────────────────────────────────────────────────────*/
.bs-screen .bs-hud{
  position:absolute; top:3.5%; right:2.4%; z-index:5;
  font-size:clamp(9px,1.5cqw,15px);
}
.bs-screen .bs-chip{
  display:flex; align-items:center; gap:8px; font-weight:700;
  background:var(--c1); color:var(--c7);
  border:2px solid var(--c5); box-shadow:3px 3px 0 var(--c1);
  padding:clamp(3px,.7cqw,7px) clamp(8px,1.5cqw,15px);
}
.bs-screen .bs-chip b{ color:var(--gold); }

/* ── 손님에게 붙는 이름 + 인내심 ────────────────────────────────────────────
   화면 구석이 아니라 손님 머리 위에 둔다. 누구의 인내심인지 바로 보이고
   시선이 구석으로 새지 않는다. 이름이 여기 있으므로 말풍선에는 이름을 달지 않는다.
   ⚠️ 글자에 그림자만 주면 밝은 배경 위에서 읽히지 않는다. 반드시 판을 깐다. */
/* 2026-08-12 감수: 26% → 21%. 26%는 캐릭터 세이프존(중앙 26%)과 폭이 정확히 같아
   게이지가 세이프존을 꽉 채웠다. 인내심이 가득 찼을 때 화면에서 가장 밝고 큰 덩어리가
   되어 시선이 얼굴보다 먼저 그리로 갔다. 이름표는 자체 폭이라 영향 없다. */
/* [개정 2026-08-16 · HANDOFF_ui_style 작업 지시 ②] 세로 3단(이름→게이지→숫자) ·
   네모 패널 제거(검은 글자만) · 채움 붉은색 · 크기는 type.css 가 12px 로 고정한다 */
.bs-screen .bs-npc{
  position:absolute; left:50%; top:3%; transform:translateX(-50%); z-index:5;
  width:30%; display:flex; flex-direction:column; align-items:center; gap:0;
}

/* 이름 — 네모 패널을 완전히 제거하고 검은 글자만 */
.bs-screen .bs-npc-name{
  display:block; white-space:nowrap; text-align:center;
  background:none; border:0; box-shadow:none; padding:0;
  color:#0e0f06; letter-spacing:.04em;
}
.bs-screen .bs-npc-name.low{ color:#0e0f06; }   /* 이름은 상태와 무관하게 검정 */

/* 인내심 숫자 — 게이지 아래, 붉은 글자 */
.bs-screen .bs-npc-num{
  display:block; text-align:center; color:#8e2018;
  background:none; border:0; box-shadow:none; padding:0;
}
.bs-screen .bs-npc-num b{ color:#8e2018; }

/* 게이지 — 폭 78%, 채움 붉은색, 위 0.7cqw / 아래 0.55cqw 여백 */
.bs-screen .bs-gauge{
  width:78%; height:1.05cqw; overflow:hidden;
  margin:0.7cqw auto 0.55cqw;
  border:0; background:rgba(10,12,6,.85);
  box-shadow:inset 0 0 0 1px rgba(20,22,10,.9), 1px 1px 0 rgba(8,10,4,.4);
}
.bs-screen .bs-gauge > i{
  display:block; height:100%; background:#b8362a;
  box-shadow:none;
  transition:width .35s steps(8);
}
.bs-screen .bs-gauge.low > i{ background:#8e2018; }   /* 위험 구간은 더 짙게 */

/* ── 기세(press) 게이지는 **은퇴했다** [2026-08-24 · 사용자 지시] ──
   하루도 못 가고 걷어냈다. 이유: 초상 아래가 다섯 줄이 됐고, 특히 「기세 밀린다」가
   인내심 숫자와 같은 색(#8e2018)이라 **인내심이 둘로 보였다.**
   ⚠️ `.bs-press` 를 되살리지 마라. press 라는 기제 자체는 살아 있고(cowerP·angerP·pressF),
      누적 상태는 이제 **대화 로그의 말**이 진다 — game.jsx 의 PRESS_LINE 이 단계가 오른 턴에만
      한 줄 찍는다. 화면에 늘어나는 줄은 0 개다. */

/* ── 대화 로그 ──────────────────────────────────────────────────────────────
   로그는 절대 사라지지 않는다. 이 게임의 재미가 대화에 있다.
   대신 최근 3줄만 진하게 두고 지난 줄은 한 단계 조용하게 낮춘다. */
/* ⚠️ 2026-08-12 감수 — 여기에 justify-content:flex-end 를 다시 넣지 마라.
   flex-end + overflow-y:auto 는 넘친 줄이 컨테이너 위로 삐져나가면서 스크롤로
   되돌릴 수 없게 만든다(실측: 첫 4줄의 y좌표가 -170/-128/-86/-44 이고
   scrollHeight === clientHeight). 대화 4턴 만에 앞부분이 영구히 사라졌다.
   "로그는 절대 사라지지 않는다"가 이 게임의 원칙이다.
   아래 정렬은 첫 자식의 margin-top:auto 로 낸다 — 줄이 적을 땐 아래에 붙고,
   넘치면 정상적으로 스크롤된다. */
.bs-screen .bs-log{
  position:absolute; left:var(--log-side); right:var(--log-side);
  top:var(--log-top); bottom:var(--log-bottom);
  display:flex; flex-direction:column;
  gap:clamp(5px,1.05cqw,11px); overflow-y:auto; z-index:4;
  scrollbar-width:thin; scrollbar-color:var(--c3) transparent;
}
.bs-screen .bs-log > *:first-child{ margin-top:auto; }
.bs-screen .bs-log::-webkit-scrollbar{ width:7px }
.bs-screen .bs-log::-webkit-scrollbar-thumb{ background:var(--c3) }
.bs-screen .bs-log::-webkit-scrollbar-track{ background:rgba(0,0,0,.25) }

.bs-screen .bs-row{ display:flex; flex:none }
.bs-screen .bs-row.npc{ justify-content:flex-start }
.bs-screen .bs-row.me { justify-content:flex-end }
/* 가운데 정렬은 쓰지 마라 — 캐릭터 얼굴을 가로지른다.
   서술도 대상이 손님이면 왼쪽(.npc)에 붙인다. */

/* 말풍선 — 잉크 판. 밝은 판은 배경과 명도가 겹쳐 분리가 안 된다 */
.bs-screen .bs-bub{
  max-width:37%; flex:none; position:relative; line-height:1.4;
  background:var(--c1); color:var(--c7);
  font-size:clamp(8px,1.5cqw,17px);
  padding:clamp(5px,1.05cqw,12px) clamp(9px,1.9cqw,21px);
  /* 안쪽 밝은 2px 선이 핵심이다. 판이 어두워도 캐릭터의 어두운 옷과 붙지 않게 한다 */
  box-shadow:inset 0 0 0 2px var(--c5), 3px 3px 0 var(--c1);
}
.bs-screen .bs-row.me .bs-bub{ background:var(--c2) }
.bs-screen .bs-bub.hot  { box-shadow:inset 0 0 0 2px var(--gold),  3px 3px 0 var(--c1) } /* 가격이 오간 줄 */
.bs-screen .bs-bub.angry{ box-shadow:inset 0 0 0 2px var(--danger),3px 3px 0 var(--c1) } /* 화난 대사 */

/* 상황 서술 — 대사가 아니다. 대사판(어두움)과 다른 중간톤 띠로 색 자체를 바꾼다 */
.bs-screen .bs-sys{
  max-width:37%; font-weight:700; letter-spacing:.11em; text-align:center;
  font-size:clamp(7.5px,1.3cqw,14px);
  background:var(--c4); color:var(--c1);
  border:2px solid var(--c1); box-shadow:2px 2px 0 var(--c1);
  padding:clamp(2px,.5cqw,6px) clamp(8px,1.7cqw,19px);
}
.bs-screen .bs-sys.danger{ background:var(--danger); color:#ffe9e4 }

/* 지난 줄 — 남아 있되 조용하다. JS 불필요, CSS가 알아서 최근 3줄을 고른다 */
.bs-screen .bs-row:not(:nth-last-child(-n+3)) .bs-bub{
  background:var(--c2); color:var(--c5);
  font-size:clamp(7px,1.28cqw,14px);
  padding:clamp(3px,.8cqw,9px) clamp(8px,1.55cqw,17px);
  box-shadow:inset 0 0 0 2px var(--c3), 2px 2px 0 var(--c1);
}
.bs-screen .bs-row:not(:nth-last-child(-n+3)) .bs-bub.hot{
  box-shadow:inset 0 0 0 2px var(--c4), 2px 2px 0 var(--c1);
}
.bs-screen .bs-row:not(:nth-last-child(-n+3)) .bs-sys{
  background:var(--c3); color:var(--c7);
  font-size:clamp(7px,1.15cqw,12px);
  padding:clamp(1px,.35cqw,4px) clamp(7px,1.4cqw,15px);
}
.bs-screen .bs-row:not(:nth-last-child(-n+3)) .bs-sys.danger{ background:var(--c3); color:#ffbdb3 }

/* ── 입력 바 ────────────────────────────────────────────────────────────────
   ⚠️ 여기 글자를 키우면 바가 두꺼워져 마지막 말풍선과 겹친다.
      키웠으면 --log-bottom 도 같이 올려라. */
.bs-screen .bs-input{
  position:absolute; left:50%; bottom:3.4%; transform:translateX(-50%);
  width:min(64%,760px); z-index:5; display:flex; align-items:center;
  background:var(--c1); border:2px solid var(--c5); box-shadow:4px 4px 0 var(--c1);
  padding:clamp(3px,.75cqw,8px) clamp(3px,.75cqw,8px)
          clamp(3px,.75cqw,8px) clamp(10px,1.9cqw,19px);
}
.bs-screen .bs-input input,
.bs-screen .bs-input .bs-placeholder{
  flex:1; min-width:0; background:none; border:0; outline:none;
  font:inherit; font-size:clamp(9px,1.5cqw,16px); color:var(--c7);
}
.bs-screen .bs-input input::placeholder{ color:var(--c5) }
.bs-screen .bs-send{
  background:var(--c7); color:var(--c1); border:2px solid var(--c5);
  font:inherit; font-weight:700; cursor:pointer; white-space:nowrap;
  padding:clamp(2px,.6cqw,7px) clamp(10px,1.9cqw,21px);
  font-size:clamp(9px,1.45cqw,15px);
}
.bs-screen .bs-send:disabled{ background:var(--c3); color:var(--c5); cursor:default }

/* ── 거래 결과 ──────────────────────────────────────────────────────────────
   ⚠️ 2026-08-12 감수 — 도장을 화면 정중앙으로 되돌리지 마라.
   가운데에 두면 성사 순간에 ① 손님 얼굴을 정통으로 덮고 ② 대사 첫 줄까지 가린다.
   거래 성사는 1분 영상에 반드시 들어가는 컷인데 그 컷에서 얼굴이 사라졌다.
   오른쪽 위 빈 구간(HUD 아래 ~ 대사창 위)에 앉힌다 — 얼굴도 대사도 안 가린다.
   베일도 .40 → .22. 화면 전체가 회색으로 죽어 배경·캐릭터가 함께 눌렸다. */
/* ⚠️ padding 의 % 는 상하좌우 전부 「폭」 기준이다. 세로로 40% 를 띄우려고 40% 를 쓰면
   폭의 40%(=세로로는 71%)가 되어 도장이 HUD 칩까지 올라간다. 실제로 그렇게 났다.
   세로 기준 x% 를 원하면 16:9 에서는 x × 0.5625 를 쓴다. 23% ≒ 세로 41%. */
.bs-screen .bs-verdict{
  position:absolute; inset:0; z-index:8; display:flex;
  align-items:flex-end; justify-content:flex-end;
  padding:0 6% 23% 0;
  background:rgba(0,0,0,.22);
}
.bs-screen .bs-verdict .mark{ position:relative; width:clamp(80px,18cqw,205px) }
.bs-screen .bs-verdict .mark img{ width:100%; display:block; transform:rotate(-9deg) }
.bs-screen .bs-verdict .txt{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-9deg);
  font-size:clamp(15px,4cqw,44px); font-weight:700; letter-spacing:.06em;
  color:var(--c8); text-shadow:3px 3px 0 var(--c1);
}
.bs-screen .bs-verdict.fail .txt{ color:var(--danger-txt) }