설명

peer-checked 로 세운 CSS 변수를 카드 자손까지 상속시키는 구조라, 형제 선택자가 닿지 않는 가격·결제 안내문·절약 배지까지 체크 한 번으로 함께 뒤집힙니다. 포레스트 #166534 를 액션색으로, #f0fdf4 를 지면색으로 깔고 Pretendard 의 tabular-nums 로 금액 자릿수를 고정했습니다. 가운데 스탠다드 플랜은 #166534→#052e16 그라디언트 채움과 음수 마진으로 카드 열 밖으로 들어올려 시선을 몰았고, 연간 전환 시에만 라임 배지로 절약 금액이 드러납니다. 밝은 스위치형, 다크 세그먼트형(밝은 썸 위 라벨을 진한 포레스트로 반전), 사이드바·모달용 컴팩트 리스트형 3변형을 세로로 배열했습니다.

섹션 구성

1. 01변형 A · 스위치 토글 3단 요금 카드 (헤더 + 결제주기 스위치 + 3플랜 + FAQ 링크)
2. 02변형 B · 다크 포레스트 세그먼트 토글 요금표 (반전 강조 카드 + 담당자 스트립 + FAQ 링크)
3. 03변형 C · 컴팩트 세로 스택 요금 리스트 (사이드바·모달용 미니 스위치 + FAQ 링크)
4. 04데모용 가상 정보 고지 한 줄

변경 이력