/* ============================================================================ 사운즈바디 · assets/site.css (디자인 시스템 정본 — 단일 파일) 로드 순서 : 이 파일 하나. 기존 site.css → responsive.css → motion.css 3벌을 대체한다. 폭 분기·모션이 컴포넌트 바로 옆에 있어야 규칙을 고칠 때 세 파일을 왕복하지 않는다. 파일 최하단의 §17(좁은 폭 일괄 축소)과 §18(모션)만 예외적으로 뒤로 뺀다 — 나중 선언이 이겨야 하는 것들이다. 출처 : 기획팀 샘플(sample.css 577줄)의 레이아웃·컴포넌트를 그대로 옮겼다. 클래스명도 샘플을 따른다(.hdr .rail .det .trk .axis …). 색만 브랜드 팔레트(handoff-package 2 / 04-brand / app_colors.dart)로 갈아끼웠고, 접근성·검수 위반 지점만 고쳤다. 고친 곳에는 전부 "★ 샘플과 다름" 주석과 근거를 붙였다. 금지 사항 1) 다크모드 일절 금지 — color-scheme, prefers-color-scheme, [data-theme], 그리고 샘플의 다크 값 #171E22 #131A1E #A8B4BA #98A5AB #66737A #F5867C. 브랜드 원전에 대응값이 없다. 라이트 전용으로 확정됐다. 2) 팔레트 밖 색 생성 금지. 새 색이 필요해 보이면 기존 값의 알파 파생으로 푼다(--rule = --line α.38, --border = --ink α.50). 실패하면 색을 안 쓴다. 3) 오렌지는 '행동'에만. 면(#F37021)은 CTA 버튼 하나, 글자(#B14A08)는 링크와 화살표. 진행 막대·차트·판정은 잉크로 그린다. 헤더처럼 전 페이지 반복되는 자리에 솔리드 오렌지를 두면 히어로 CTA 의 주목도를 깎는다. 4) 이미지 속 글자 금지. 도해는 전부 HTML + CSS 다. SVG 0개. 이미지에 갇힌 문장은 검색·인용·스크린리더 어디에도 안 잡힌다. 5) 외부 JS 라이브러리 금지. 여닫힘은
/ 와 :focus-within 으로 낸다. 이 파일이 전제하는 JS 는 0줄이다. 6) 등장 애니메이션 금지. 초기 HTML 에 안 보이는 것은 없는 것이다. 모션은 감속 곡선 하나(--ease)만 쓰고 transform/opacity 밖으로 나가지 않는다. 7) body/html 에 overflow-x:hidden 금지. .hdr 과 .rail 이 position:sticky 이고, 조상에 overflow 가 걸리면 sticky 가 뷰포트가 아니라 그 조상을 기준으로 잡혀 둘 다 죽는다. 가로 넘침은 원인 쪽(.dp 폭)에서 막는다 — §6 참조. 검수(verify.py) 전제 — CSS 가 흔드는 지점 ·