[fix] landing: 구매자 모드 응수에 목표가 반영 · 무대 선택색 · 플레이 화면 유리 패널

구매 담당자 모드
공급사 모드와 같은 문제가 있었다. simulateBuyerRun 의 에이전트 첫 수가 marketLow 만
읊어서, 목표가를 얼마로 잡든 같은 문장이 나왔다 — 위임한 기준이 반영되는지 확인할
길이 없었다. 이제 목표가를 받았다고 명시하고, 시장 최저가 대비 위치에 따라 태도를
달리한다(근거부터 깔겠다 / 무리 없이 접근하겠다).
여는 말(협력사 정가 제시)은 아직 목표가를 모르는 시점이라 상수로 둔다.

무대 위 드래그 선택색
루트의 selection:text-primary 는 라이트 본문 기준이다. 그 값(#0101F3)을 무대(#070E24)
위에 얹으면 명암비 2.0:1 — app.css 의 --color-primary-on-stage 주석이 경고하는 바로 그
상황이다. 무대 섹션에서 텍스트를 드래그하면 글자가 사라졌다.
.stage-bg / [data-stage-hero] 안에서는 무대용 액센트로 갈아끼운다.

플레이 화면 유리 패널
컨트롤과 대화 로그가 섹션 배경 위에 그냥 얹혀 있어 무대와 같은 색이라 경계가 없었고,
조작 가능한 영역인지 읽히지 않았다. 재질은 무대 위 2차 CTA 와 같게 맞췄다 — 화면 안에
재질이 두 종류면 따로 논다. 테두리는 white/12 로 얕게: 면이지 조작 요소가 아니라
버튼만큼 세우면 카드가 버튼처럼 보인다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

landing/app/app.css

@@ -107,6 +107,17 @@
     radial-gradient(100% 100% at 50% 42%, var(--color-stage) 0%, var(--color-stage-deep) 100%);
 }
 
+/* 드래그 선택 색.
+   루트에 걸린 selection:text-primary 는 라이트 본문 기준이다. 그 값(#0101F3)을 다크 무대
+   위에 얹으면 명암비가 2.0:1 이라 — 위 --color-primary-on-stage 주석이 경고하는 바로 그
+   상황 — 무대 섹션에서 텍스트를 드래그하면 글자가 사라진다.
+   무대 안에서는 무대용 액센트로 갈아끼운다. 라이트 본문은 기존 그대로. */
+.stage-bg ::selection,
+[data-stage-hero] ::selection {
+  background-color: color-mix(in srgb, var(--color-primary-on-stage) 30%, transparent);
+  color: var(--color-on-stage);
+}
+
 html {
   scroll-behavior: smooth;
   background-color: #ffffff;

landing/app/components/sections/negotiation-demo.tsx

@@ -208,8 +208,20 @@ export function NegotiationDemo() {
               initial={{ opacity: 0, y: 16 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.28, ease: EASE_OUT_EXPO }}
-              className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12"
+              /* 유리 패널로 띄운다. 컨트롤과 대화 로그가 섹션 배경 위에 그냥 얹혀 있으면
+                 무대와 같은 색이라 경계가 없고, 조작할 수 있는 영역인지 읽히지 않는다.
+                 재질은 무대 위 2차 CTA 와 같다 — 옅은 흰 채움 + backdrop-blur + 위쪽
+                 안쪽 하이라이트 + 아래로 깔리는 그림자. 화면 안에 재질이 두 종류면 따로 논다.
+                 테두리는 white/12 로 얕게 둔다. 이건 조작 요소가 아니라 면이라 버튼만큼
+                 세울 필요가 없고, 세우면 오히려 카드가 버튼처럼 보인다. */
+              className={
+                "rounded-card border border-white/12 bg-white/[0.06] " +
+                "backdrop-blur-xl backdrop-saturate-150 " +
+                "shadow-[inset_0_1px_0_0_rgba(255,255,255,0.12),0_24px_60px_-24px_rgba(3,6,15,0.9)] " +
+                "p-6 sm:p-8 lg:p-10"
+              }
             >
+              <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
               {/* 좌 — 품목·컨트롤·현재가 */}
               <div className="lg:col-span-5 space-y-8">
                 <div className="flex flex-wrap gap-2">
@@ -412,6 +424,7 @@ export function NegotiationDemo() {
                   </motion.div>
                 )}
               </div>
+              </div>
             </motion.div>
           )}
 

landing/app/lib/negotiation-sim.ts

@@ -153,9 +153,18 @@ export function simulateBuyerRun(item: DemoItem, target: number): { turns: Turn[
   // 에이전트는 기준 밖으로 나가지 않으므로 개찰로 끝난다 — 제품의 안전장치를 보여주는 케이스다.
   const reachable = target >= item.anchor
 
+  /* 에이전트의 첫 수는 사용자가 준 목표가를 물고 있어야 한다. 예전엔 marketLow 만 읊어서
+     목표가를 얼마로 잡든 같은 문장이 나왔다 — 위임한 기준이 반영되는지 확인할 수가 없었다.
+     여는 말(협력사 정가 제시)은 아직 목표가를 모르는 시점이라 상수로 둔다. */
+  const stance =
+    target < item.marketLow
+      ? `시장 최저가보다 낮은 목표라 근거부터 깔겠습니다.`
+      : `시장 최저가 선이라 무리 없이 접근하겠습니다.`
   push(
     "agent",
-    `같은 사양 인터넷 최저가가 ${won(item.marketLow)}원입니다. 연간 물량을 보증하면 어느 선까지 가능하신가요?`,
+    `목표가 ${won(target)}원 받았습니다. ${stance} 같은 사양 인터넷 최저가가 ${won(
+      item.marketLow,
+    )}원입니다. 연간 물량을 보증하면 어느 선까지 가능하신가요?`,
     item.marketLow,
   )