diff --git a/landing/app/app.css b/landing/app/app.css index 3c183e1..e810418 100644 --- a/landing/app/app.css +++ b/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; diff --git a/landing/app/components/sections/negotiation-demo.tsx b/landing/app/components/sections/negotiation-demo.tsx index 7ad9b02..f295053 100644 --- a/landing/app/components/sections/negotiation-demo.tsx +++ b/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" + } > +