fix: improve mobile navigation and calculator usability

src/lib/components/AnalysisResultView.svelte

@@ -123,7 +123,9 @@
       {#each result.order as cardId}<span><i style={`background: ${memberColor(cardId)};`}></i>{cardName(cardId)}</span>{/each}
     </div>
   </div>
-  <div class="timeline-scroll" role="region" aria-label="스킬 발동 시간대 그래프">
+  <p class="scroll-guide">그래프를 좌우로 밀면 전체 시간대를 확인할 수 있습니다.</p>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex (Keyboard users must be able to scroll the timeline.) -->
+        <div class="timeline-scroll" role="region" aria-label="스킬 발동 시간대 그래프" tabindex="0">
     <div class="timeline-canvas" style={`width: ${timelineWidth + 156}px;`}>
       <div class="timeline-row note-row">
         <strong class="lane-label">초당 노트</strong>
@@ -172,6 +174,7 @@
 <SpecialNoteSummary {result} {cardName} />
 
 <style>
+  .scroll-guide { color: #adb5c2; font-size: 13px; line-height: 1.5; }
   .order-sections { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
   .order-section { min-width: 0; }
   .order-section h3 { margin: 0 0 9px; color: #aeb7c5; font-size: 14px; }

src/lib/components/AnalyticsConsent.svelte

@@ -71,6 +71,8 @@
     background: rgb(24 28 36 / 97%);
     box-shadow: 0 18px 50px rgb(0 0 0 / 42%);
     color: #e8ebf1;
+    max-height: calc(100dvh - 36px);
+    overflow-y: auto;
   }
 
   .consent-copy { min-width: 0; flex: 1; }
@@ -94,11 +96,10 @@
   .primary { color: #21121a; background: #ef8bb6; }
   .secondary { border-color: #596273; color: #d4dae4; background: #303641; }
   .analytics-settings {
-    position: fixed;
-    z-index: 90;
-    right: 12px;
-    bottom: 12px;
-    min-height: 30px;
+    display: block;
+    margin: 16px 12px max(12px, env(safe-area-inset-bottom));
+    margin-left: auto;
+    min-height: 44px;
     padding: 5px 9px;
     border-color: rgb(255 255 255 / 12%);
     color: #8e98a8;
@@ -107,7 +108,8 @@
   }
 
   @media (max-width: 560px) {
-    .analytics-consent { right: 12px; bottom: 12px; width: calc(100% - 24px); align-items: stretch; flex-direction: column; gap: 14px; }
+    .analytics-consent { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100% - 24px); align-items: stretch; flex-direction: column; gap: 14px; }
     .consent-actions { justify-content: flex-end; }
+    .consent-actions button { min-height: 44px; flex: 1; }
   }
 </style>

src/lib/components/SongPicker.svelte

@@ -11,6 +11,7 @@
   let sort: SongSort = 'title';
 
   $: options = songOptions(charts, difficulty, query, sort);
+  $: selectedTitle = charts.find((chart) => chart.songId === value)?.title;
 
   function selectSong(event: Event) {
     const nextValue = (event.currentTarget as HTMLSelectElement).value;
@@ -48,6 +49,7 @@
       {/if}
     </select>
   </label>
+  {#if selectedTitle}<p class="selected-title">선택한 악곡: {selectedTitle}</p>{/if}
   {#if query.trim()}
     <p class:no-results={options.length === 0} class="search-status" aria-live="polite">
       {options.length > 0
@@ -59,6 +61,7 @@
 
 <style>
   .song-picker { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(140px, .55fr) minmax(260px, 1.4fr); gap: 9px; }
+  .selected-title { grid-column: 1 / -1; margin: 0; color: #b9c1cd; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
   label { display: grid; gap: 7px; min-width: 0; color: #8f98a8; font-size: 14px; font-weight: 750; }
   label > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
   small { color: #737d8d; font-size: 11px; }