From ca9929faac49edb278f09dd2849fe0c26752f5ce Mon Sep 17 00:00:00 2001 From: gahusb Date: Thu, 23 Apr 2026 15:12:24 +0900 Subject: [PATCH] =?UTF-8?q?fix(a11y):=20=EA=B8=80=EB=A1=9C=EB=B2=8C=20pref?= =?UTF-8?q?ers-reduced-motion=20=EC=B6=94=EA=B0=80=20+=20Blog=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - App.css: 글로벌 reduced-motion 블록 (모든 animation/transition 비활성화) - index.css: scroll-behavior: smooth → auto (reduced-motion) - BlogMarketing.css: 스피너 reduced-motion 처리 - Blog.css: 플로팅 토글 버튼 bottom-nav 위로 재배치 Co-Authored-By: Claude Opus 4.6 --- src/App.css | 12 ++++++++++++ src/index.css | 4 ++++ src/pages/blog-marketing/BlogMarketing.css | 4 ++++ src/pages/blog/Blog.css | 2 +- 4 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 081b0cf..a808296 100644 --- a/src/App.css +++ b/src/App.css @@ -492,3 +492,15 @@ flex: none; } } + +/* ── Accessibility: Reduced Motion ──────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/src/index.css b/src/index.css index 5dddb5f..58695cc 100644 --- a/src/index.css +++ b/src/index.css @@ -115,6 +115,10 @@ html { -webkit-text-size-adjust: 100%; } +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } +} + body { height: 100%; overflow: hidden; diff --git a/src/pages/blog-marketing/BlogMarketing.css b/src/pages/blog-marketing/BlogMarketing.css index 9b2e998..811c344 100644 --- a/src/pages/blog-marketing/BlogMarketing.css +++ b/src/pages/blog-marketing/BlogMarketing.css @@ -148,3 +148,7 @@ .bm-write-actions { flex-direction: column; } .bm-post-card__actions { flex-wrap: wrap; } } + +@media (prefers-reduced-motion: reduce) { + .bm-spinner { animation: none; } +} diff --git a/src/pages/blog/Blog.css b/src/pages/blog/Blog.css index 507e513..5a2fa1a 100644 --- a/src/pages/blog/Blog.css +++ b/src/pages/blog/Blog.css @@ -81,7 +81,7 @@ display: none; position: fixed; /* 사이드바 토글 버튼(top-left) 과 겹치지 않도록 오른쪽 하단 배치 */ - bottom: 24px; + bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-area-bottom, 0px) + 16px); right: 24px; top: auto; left: auto;