[fix] landing: 무대 위 2차 CTA 가 버튼으로 안 읽힘 — stageGhost 대비 확보

GNB "상담 신청" 이 기본 상태에서 버튼으로 인식되지 않았다. 채움이 없고
테두리는 사실상 안 보여서, 남는 건 흰 글자와 화살표뿐 — 옆 nav 링크와
구분될 근거가 없었다.

테두리를 stage-line(#1E2A52)으로 잡은 게 원인이다. 그 색은 무대 바닥(#070E24)
위 카드용인데, 헤더는 방사형 그라데이션의 광원부(#16205A)에 앉는다. 같은 색
가족이라 하필 헤더 자리에서만 선이 배경에 묻힌다.

  수정 전  테두리 대비 1.09:1  (배경과 사실상 동일)
  수정 후  테두리 대비 3.56:1  (WCAG 1.4.11 UI 경계 3:1 통과)

무대색 토큰 대신 흰색 알파로 잡았다 — 무대 어디에 놓여도 같이 성립한다.
옅은 채움(white/10)도 함께 준다. "누를 수 있는 것"은 테두리보다 면이 더
강하게 전달한다.

히어로 "도입 문의" 도 같은 변형이라 함께 해결된다. 1차 CTA(파란 채움)와의
위계는 그대로다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Haewon Kam 2026-08-06 09:28:23 +09:00
parent 7f15bc10d1
commit 63717f5eb9

View File

@ -18,8 +18,13 @@ const buttonVariants = cva(
glass: "bg-white/70 hover:bg-white text-ink-soft hover:text-ink border border-white shadow-sm",
// 다크 무대 위 1차 CTA
stage: "bg-primary hover:bg-primary-deep text-white",
// 다크 무대 위 2차 CTA — 흰 알약
stageGhost: "bg-transparent hover:bg-white text-white hover:text-stage border border-stage-line hover:border-white",
/* 2 CTA .
stage-line(#1E2A52) . (#070E24)
, (#16205A) GNB 1.09:1
. nav .
.
"누를 수 있는 것" . */
stageGhost: "bg-white/10 hover:bg-white text-white hover:text-stage border border-white/40 hover:border-white",
},
/* 레퍼런스(statworx) 실측: 10.4px / 600 / (radius 39px) / 12·24 / 33px.
.