디자인 토큰 정리 (Visual Quality Sprint 1단계)

Fable 자문 + 시안(G: design/projects/집감-프리미엄-시안) 기준. 기존 규칙을 제자리에서 고쳤고 파일 끝에 덮어쓰기 규칙을 추가하지 않았다.

바뀐 것 (static/style.css)

• 토큰 추가: 반지름 3단계(--r-sm 8 / --r-md 14 / --r-lg 20), 그림자 2단계(--shadow 기본 카드, --shadow-float 띄운 요소), --on-accent. 보조 글자색 --muted를 #5b6472로 진하게(흰 바탕 대비 6.3:1).
• 카드(.panel): 선+그림자 겹침을 그림자 하나로(라이트). 다크는 그림자가 안 보여 선 유지. 반지름 20.
• 버튼: .btn.primary의 색을 남색에서 행동색(--accent) 하나로. .btn 최소 높이 44, 반지름 14.
• 세그먼트: 알약 모양 대신 14 반지름 + 선택 항목 흰 면, 높이 44.
• 하단 탭(휴대폰): 가운데 '임장 준비'만 남색 원+금색 링으로 튀던 것을 제거(금색은 등급에만). 라벨 14px, 높이 56, 활성은 행동색.
• 기존 접근성 문제 2건 함께 수정: 단지 상세 표 칸 키보드 접근(pricechart.js), 다크에서 대비 부족한 파란 글자(.pb-check b).

검증 (데모 브라우저)

• 8개 화면(홈·찾기·비교·나의 집감·단지 상세·일조·프로젝트·둘러보기) × 390 라이트/다크, 768, 1280 라이트/다크: 가로 넘침 0, axe 0, 스크립트 오류 0 (120건). 변경 전엔 기존 문제 3건.
• 전체 자동 시험: 노드 105 / 파이썬 296 통과.
• 실제 기기·사람 시험: 미실시.