responsive: 사이드바 토글 항상 노출 + breakpoint 정렬

- JS isMobile breakpoint 1024→768 (CSS @media 와 정렬)
  기존에 768~1023px 구간에서 사이드바는 숨고 햄버거는 display:none 이라
  사이드바를 열 방법이 없던 버그 수정.
- v5-mobile-toggle 기본 display:flex (모든 화면에서 표시)
  borderless 헤더 아이콘 스타일(32px)과 정합
- 햄버거 onClick 분기: 모바일=sidebarOpen / 데스크톱=sidebarCollapsed
  desktop 에서는 narrow(56px) ↔ full(220px) 토글로 동작
- title/aria-label 다국어 (열기/닫기/펼치기/접기)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/components/layout/AppLayout.tsx

@@ -385,7 +385,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   // 화면 크기 감지 및 사이드바 초기 상태 설정
   useEffect(() => {
     const checkIsMobile = () => {
-      const mobile = window.innerWidth < 1024;
+      const mobile = window.innerWidth < 768;
       setIsMobile(mobile);
       if (mobile) {
         setSidebarOpen(false);
@@ -828,7 +828,15 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         <header className="v5-hdr">
           <div className="v5-hdr-l">
             {/* Mobile hamburger */}
-            <button className="v5-mobile-toggle" onClick={() => setSidebarOpen(!sidebarOpen)}>
+            <button
+              className="v5-mobile-toggle"
+              onClick={() => {
+                if (isMobile) setSidebarOpen(!sidebarOpen);
+                else setSidebarCollapsed(!sidebarCollapsed);
+              }}
+              title={isMobile ? (sidebarOpen ? "사이드바 닫기" : "사이드바 열기") : (sidebarCollapsed ? "사이드바 펼치기" : "사이드바 접기")}
+              aria-label="사이드바 토글"
+            >
               <Menu size={16} />
             </button>
             <div className="v5-hdr-logo">Invy.one</div>

frontend/styles/v5-layout.css

@@ -823,17 +823,16 @@ html:not(.dark) .v5-side{
 .v5-avatar-dd-content [role="menuitem"]:hover{background:var(--v5-surface-hover) !important;transform:translateX(2px);}
 
 /* ===== MOBILE RESPONSIVE ===== */
-.v5-mobile-toggle{display:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--v5-border);
-  background:var(--v5-surface-solid);color:var(--v5-text-muted);cursor:pointer;
-  align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
-.v5-mobile-toggle:hover{border-color:var(--v5-primary);color:var(--v5-primary);}
+.v5-mobile-toggle{display:flex;width:32px;height:32px;border-radius:10px;border:1px solid transparent;
+  background:transparent;color:var(--v5-text-sec);cursor:pointer;
+  align-items:center;justify-content:center;transition:all .2s var(--v5-ease-move);flex-shrink:0;}
+.v5-mobile-toggle:hover{background:var(--v5-surface-hover);color:var(--v5-text);}
 
 .v5-side-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:25;
   opacity:0;transition:opacity .3s;pointer-events:none;}
 .v5-side-overlay.open{opacity:1;pointer-events:auto;}
 
 @media(max-width:768px){
-  .v5-mobile-toggle{display:flex;}
   .v5-side{position:fixed;left:0;top:0;bottom:0;z-index:30;
     transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
     width:260px;padding-top:60px;}