fix: improve mobile navigation and calculator usability

offline/OfflineApp.svelte

@@ -43,6 +43,8 @@
   let currentPath = pathFromHash();
   let CurrentPage = routes.get(currentPath) ?? HomePage;
   let eventNow = Date.now();
+  let menuOpen = false;
+  $: if (currentPath) menuOpen = false;
   $: showEventTab = Boolean(activeEventAt(events, eventNow));
   setOfflinePage(currentPath);
 
@@ -86,7 +88,8 @@
 <header class="site-nav">
   <div class="nav-inner">
     <a class="brand" href="#/" aria-label="홀로도리 계산기 홈">홀로도리 계산기</a>
-    <nav aria-label="주요 메뉴">
+    <button class="menu-toggle" type="button" aria-controls="primary-navigation" aria-expanded={menuOpen} on:click={() => menuOpen = !menuOpen}>{menuOpen ? '메뉴 닫기' : '전체 메뉴'}</button>
+    <nav id="primary-navigation" class:open={menuOpen} aria-label="주요 메뉴">
       <a href="#/cards" aria-current={currentPath.startsWith('/cards') ? 'page' : undefined}>카드 목록</a>
       <a href="#/analysis" aria-current={currentPath.startsWith('/analysis') ? 'page' : undefined}>배치 분석</a>
       <a href="#/rating" aria-current={currentPath.startsWith('/rating') ? 'page' : undefined}>리더 레이팅</a>
@@ -155,8 +158,11 @@
     text-decoration: none;
   }
 
-  nav { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: flex-end; gap: 4px; overflow-x: auto; scrollbar-width: none; }
+  .brand { flex-shrink: 0; }
+  .menu-toggle { display: none; }
+  nav { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: safe flex-end; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
   nav::-webkit-scrollbar { display: none; }
+
   nav a {
     flex: 0 0 auto;
     padding: 8px 12px;
@@ -167,6 +173,7 @@
     text-decoration: none;
     white-space: nowrap;
   }
+
   nav a:hover { color: #e2e6ed; background: rgb(255 255 255 / 5%); }
   nav a[aria-current='page'] { color: #f1a1c3; background: rgb(239 139 182 / 12%); }
   .feedback-link { border: 1px solid #9f5877; color: #edb8cf; background: linear-gradient(135deg, #482c39, #38232e); box-shadow: 0 0 12px rgb(175 91 128 / 10%); }
@@ -176,6 +183,15 @@
   .report-link span { margin-left: 2px; font-size: 11px; }
   a:focus-visible { outline: 3px solid rgb(239 139 182 / 28%); outline-offset: 2px; }
 
+  @media (max-width: 1100px) {
+    .nav-inner { flex-wrap: wrap; padding-block: 5px; }
+    .menu-toggle { display: block; min-height: 44px; padding: 8px 14px; border: 1px solid #694256; border-radius: 9px; color: #f1a1c3; background: #29202a; font: inherit; font-size: 14px; cursor: pointer; }
+    .menu-toggle:focus-visible { outline: 3px solid #ef8bb6; outline-offset: 2px; }
+    nav { display: none; flex: 0 0 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 65dvh; overflow-y: auto; padding: 4px 2px 10px; }
+    nav.open { display: grid; }
+    nav a { display: flex; align-items: center; min-height: 44px; white-space: normal; }
+  }
+
   @media (max-width: 560px) {
     :global(:root) { --page-gutter: 24px; }
     .nav-inner { width: calc(100% - 24px); min-height: 54px; }