fix: improve mobile navigation and calculator usability

src/routes/+layout.svelte

@@ -10,6 +10,8 @@
 
   let eventClock = createInitialReleaseClock($page.data?.serverNow);
   let eventNow = eventClock.now();
+  let menuOpen = false;
+  $: if ($page.url.pathname) menuOpen = false;
   $: showEventTab = Boolean(activeEventAt(events, eventNow));
 
   onMount(() => {
@@ -32,7 +34,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={$page.url.pathname.startsWith('/cards') ? 'page' : undefined}>카드 목록</a>
       <a href="/analysis" aria-current={$page.url.pathname.startsWith('/analysis') ? 'page' : undefined}>배치 분석</a>
       <a href="/rating" aria-current={$page.url.pathname.startsWith('/rating') ? 'page' : undefined}>리더 레이팅</a>
@@ -101,7 +104,9 @@
     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 {
@@ -124,6 +129,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; }