From a750c1098acc7d0a3ffef878435a86cf835feefd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=AF=BC=ED=97=8C?= <min815371@gmail.com>
Date: Mon, 13 Jul 2026 22:51:53 +0900
Subject: [PATCH] =?UTF-8?q?style(design):=20FINDING-001=20=E2=80=94=20?=
 =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC(<md)=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B0=94=EB=A5=BC=20=EC=83=81=EB=8B=A8=20=EB=84=A4=EB=B9=84?=
 =?UTF-8?q?=EB=A1=9C=20=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

375px에서 사이드바가 196px을 고정 점유해 콘텐츠가 낱글자로 세로
분해되고 /jobs 에 가로 스크롤(484px)이 생겼다. <md 에서 상단 바
+가로 스크롤 네비(터치 44px, FINDING-006)로 전환, 로고 그라디언트
hex 를 primary-400 토큰으로 승격. 검증: dashboard/jobs 375px
hscroll=false, 스크린샷 확인.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 lps-admin/src/components/Layout.tsx | 33 +++++++++++++++++------------
 lps-admin/src/index.css             |  1 +
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/lps-admin/src/components/Layout.tsx b/lps-admin/src/components/Layout.tsx
index dd6d192..5f9e76d 100644
--- a/lps-admin/src/components/Layout.tsx
+++ b/lps-admin/src/components/Layout.tsx
@@ -17,24 +17,31 @@ export default function Layout() {
   const health = useQuery({ queryKey: ["healthz"], queryFn: healthz, refetchInterval: 10_000 });
   const up = health.data === true;
   return (
-    <div className="mx-auto flex min-h-screen max-w-[1280px]">
-      <aside className="w-[196px] shrink-0 border-r border-line-200 px-3 py-5">
-        <div className="mb-6 flex items-center gap-2.5 px-2">
-          <span className="grid h-8 w-8 place-items-center rounded-lg bg-gradient-to-br from-primary-600 to-[#8b7bff] text-[14px] font-extrabold text-white">L</span>
-          <div>
-            <div className="text-[14px] font-bold leading-tight">LPS 관리자</div>
-            <div className="text-[10.5px] font-medium text-ink-400">인터넷 최저가 검색</div>
+    <div className="mx-auto flex min-h-screen max-w-[1280px] flex-col md:flex-row">
+      {/* 모바일(<md): 상단 바 + 가로 스크롤 네비(터치 44px). md 이상: 좌측 고정 사이드바. */}
+      <aside className="w-full shrink-0 border-b border-line-200 px-3 py-3 md:w-[196px] md:border-b-0 md:border-r md:py-5">
+        <div className="flex items-center justify-between md:block">
+          <div className="flex items-center gap-2.5 px-2 md:mb-6">
+            <span className="grid h-8 w-8 place-items-center rounded-lg bg-gradient-to-br from-primary-600 to-primary-400 text-[14px] font-extrabold text-white">L</span>
+            <div>
+              <div className="text-[14px] font-bold leading-tight">LPS 관리자</div>
+              <div className="text-[10.5px] font-medium text-ink-400">인터넷 최저가 검색</div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2 px-2 text-[11.5px] font-semibold text-ink-500 md:hidden">
+            <span className={`h-2 w-2 rounded-full ${up ? "bg-ok-600" : "bg-dead-600"}`} aria-hidden />
+            {up ? "연결됨" : "연결 안 됨"}
           </div>
         </div>
-        <nav aria-label="주 메뉴">
-          <ul className="space-y-0.5">
+        <nav aria-label="주 메뉴" className="mt-2 md:mt-0">
+          <ul className="flex gap-1 overflow-x-auto md:flex-col md:gap-0 md:space-y-0.5">
             {MENU.map((m) => (
-              <li key={m.to}>
+              <li key={m.to} className="shrink-0">
                 <NavLink
                   to={m.to}
                   end={m.end}
                   className={({ isActive }) =>
-                    `block rounded-lg px-3 py-2 text-[13px] font-semibold transition-colors ${
+                    `flex min-h-[44px] items-center rounded-lg px-3 text-[13px] font-semibold transition-colors md:min-h-0 md:py-2 ${
                       isActive ? "bg-primary-50 text-primary-700" : "text-ink-700 hover:bg-surface-2"
                     }`
                   }
@@ -45,7 +52,7 @@ export default function Layout() {
             ))}
           </ul>
         </nav>
-        <div className="mt-8 flex items-center gap-2 px-3 text-[11.5px] font-semibold text-ink-500">
+        <div className="mt-8 hidden items-center gap-2 px-3 text-[11.5px] font-semibold text-ink-500 md:flex">
           <span
             className={`h-2 w-2 rounded-full ${up ? "bg-ok-600" : "bg-dead-600"}`}
             aria-hidden
@@ -53,7 +60,7 @@ export default function Layout() {
           {up ? "API 연결됨" : "API 연결 안 됨"}
         </div>
       </aside>
-      <main className="min-w-0 flex-1 px-6 py-5">
+      <main className="min-w-0 flex-1 px-4 py-4 md:px-6 md:py-5">
         <Outlet />
       </main>
     </div>
diff --git a/lps-admin/src/index.css b/lps-admin/src/index.css
index 90d70e7..e48535d 100644
--- a/lps-admin/src/index.css
+++ b/lps-admin/src/index.css
@@ -17,6 +17,7 @@
 
   --color-primary-700: #4338ca;
   --color-primary-600: #4f46e5;
+  --color-primary-400: #8b7bff;
   --color-primary-100: #e5e4fb;
   --color-primary-50: #eef0ff;