diff --git a/UPDATES.md b/UPDATES.md
index e720022..ff9096c 100644
--- a/UPDATES.md
+++ b/UPDATES.md
@@ -1,9 +1,13 @@
 ---
-updatedAt: 2026-09-21T01:10:33Z
+updatedAt: 2026-09-21T02:28:48Z
 ---
 
 ## 2026년 9월 21일
 
+### 모바일 화면 사용성 개선
+
+`IMPROVED` 전체 메뉴 버튼으로 모든 메뉴에 접근할 수 있습니다. 배치 분석·조합 탐색의 입력 항목 설명과 선택한 곡명·카드명을 좁은 화면에서도 확인할 수 있으며, 개화 버튼과 입력 영역을 넓혔습니다. 보드에 확대·축소·화면 맞춤 버튼을 추가하고, 연결 카드 선택 창은 화면 높이에 맞춰 목록 끝까지 스크롤할 수 있도록 개선했습니다. 분석 그래프의 작은 구간 대신 누를 수 있는 액티브 발동 목록도 제공합니다. 분석 설정 버튼은 본문을 가리지 않도록 페이지 아래로 옮겼습니다.
+
 ### 초록 보드 간편 활성화 확장
 
 `IMPROVED` 모든 멤버의 초록 보드를 3칸·5칸·7칸 중 선택해 활성화할 수 있습니다. 5칸은 기존 세로 3칸의 가운데 양옆을, 7칸은 그 아래 2칸을 추가합니다. 이미 활성화한 다른 노드는 유지됩니다. 모든 멤버 간편 설정의 3칸·5칸·7칸 버튼에서 적용 범위를 작은 보드 그림으로 확인할 수 있습니다.
diff --git a/offline/OfflineApp.svelte b/offline/OfflineApp.svelte
index a10c7eb..9ba1f69 100644
--- a/offline/OfflineApp.svelte
+++ b/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; }
diff --git a/src/lib/components/AnalysisResultView.svelte b/src/lib/components/AnalysisResultView.svelte
index 52e702a..ba95d03 100644
--- a/src/lib/components/AnalysisResultView.svelte
+++ b/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; }
diff --git a/src/lib/components/AnalyticsConsent.svelte b/src/lib/components/AnalyticsConsent.svelte
index f48cf62..f1bc399 100644
--- a/src/lib/components/AnalyticsConsent.svelte
+++ b/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>
diff --git a/src/lib/components/SongPicker.svelte b/src/lib/components/SongPicker.svelte
index 558eb4f..22c103b 100644
--- a/src/lib/components/SongPicker.svelte
+++ b/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; }
diff --git a/src/lib/styles/layout-tokens.css b/src/lib/styles/layout-tokens.css
index f79bc72..30b982c 100644
--- a/src/lib/styles/layout-tokens.css
+++ b/src/lib/styles/layout-tokens.css
@@ -6,3 +6,12 @@
   --page-header-bottom: 28px;
   --page-description-size: 16px;
 }
+
+@media (max-width: 700px) {
+  :root { --page-title-size: 30px; --page-description-size: 15px; }
+  /* Keep editable text readable without triggering focus zoom on mobile Safari. */
+  body input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
+  body select, body textarea { font-size: 16px; }
+}
+
+html { scroll-padding-top: 80px; }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 743e283..a74004b 100644
--- a/src/routes/+layout.svelte
+++ b/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; }
diff --git a/src/routes/analysis/+page.svelte b/src/routes/analysis/+page.svelte
index a6acc3b..33dae09 100644
--- a/src/routes/analysis/+page.svelte
+++ b/src/routes/analysis/+page.svelte
@@ -1053,8 +1053,10 @@
                 <option value={card.id} disabled={selectedCardIds.some((id, index) => index !== slot && cardById.get(id)?.characterId === card.characterId)}>{collection[card.id]?.owned ? '● ' : ''}{cardLabel(card)}</option>
               {/each}
             </select>
+            {#if selectedId && cardById.get(selectedId)}<small class="selected-card-name">{cardLabel(cardById.get(selectedId)!)}</small>{/if}
           </label>
           <div class="awakening">
+            <span class="mobile-field-label">개화 (0~5)</span>
             <div class="awakening-stepper">
               <button
                 type="button"
@@ -1072,6 +1074,7 @@
             </div>
           </div>
           <div class="cooldown-lock">
+            <span class="mobile-field-label">빈도 감소 고정</span>
             <div class="reduction-options">
               {#each REDUCTION_LOCK_OPTIONS as reduction}
                 <button
@@ -1084,6 +1087,8 @@
             </div>
           </div>
           <div class="board-overrides">
+            <span class="mobile-field-label">파란 노드 전체</span>
+            <span class="mobile-field-label">기수 보너스 덮어쓰기 (0~900)</span>
             <label class="override-checkbox">
               <input type="checkbox" checked={allBlueNodes[slot]} aria-label={`${slot + 1}번 카드 파란 노드 전체 활성화`} on:change={() => toggleAllBlueNodes(slot)}>
               <span aria-hidden="true"></span>
@@ -1237,7 +1242,26 @@
             {/if}
           </p>
         {/if}
-        <div class="timeline-scroll" role="region" aria-label="스킬 발동 시간대 그래프">
+        {#if mode === 'analysis'}
+          <details class="active-window-list">
+            <summary>액티브 발동 목록 · 눌러서 미발동/복원</summary>
+            <p>작은 그래프 대신 아래 버튼으로도 조작할 수 있습니다. 미발동으로 설정한 구간은 다시 누르면 복원됩니다.</p>
+            <div>
+              {#each result.activeWindows as window}
+                {@const excluded = excludedActiveWindows.some((item) => item.cardId === window.cardId && item.startSeconds === window.startSeconds)}
+                {@const impact = activeImpacts.get(activeWindowKey(window))}
+                <button type="button" disabled={!simulationContext || running} aria-pressed={excluded} on:click={() => toggleActiveWindow(window)}>
+                  <strong>{resultCardName(window.cardId)}</strong>
+                  <span>{formatSeconds(window.startSeconds)}~{formatSeconds(window.endSeconds)} · 효과 {window.scoreUpPercent}% · {excluded ? '미발동 (눌러서 복원)' : '발동 (눌러서 제외)'}</span>
+                  {#if impact}<span>변경 시 최고점 {signedScoreChange(impact.scoreChange)}</span>{/if}
+                </button>
+              {/each}
+            </div>
+          </details>
+        {/if}
+        <p class="board-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;`}>
             <ScoreTimelineChart notes={displayedResult!.notes} {maximumScoreProbabilities} durationSeconds={timelineDuration} minimumWidth={timelineWidth} timeTicks={timelineTicks} />
             {#each result.order as cardId, slot}
@@ -1308,6 +1332,14 @@
 </main>
 
 <style>
+  .mobile-field-label, .selected-card-name { display: none; }
+  .active-window-list { margin: 12px 0; padding: 12px; border: 1px solid #343c49; border-radius: 10px; }
+  .active-window-list summary { min-height: 44px; align-content: center; cursor: pointer; font-size: 14px; }
+  .active-window-list p { color: #adb5c2; font-size: 13px; line-height: 1.6; }
+  .active-window-list > div { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
+  .active-window-list button { display: grid; gap: 6px; min-height: 44px; padding: 12px; border: 1px solid #414b5b; border-radius: 8px; background: #202630; color: #e8ebf1; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
+  .active-window-list button[aria-pressed='true'] { border-color: #ef8bb6; background: #37232e; }
+  .active-window-list button span { font-size: 12px; line-height: 1.5; }
   #result-title { scroll-margin-top: 90px; }
   .stale-warning { margin: 14px 0; padding: 11px 14px; border: 1px solid #665333; border-radius: 9px; color: #edcf92; background: #292319; font-size: 13px; line-height: 1.6; }
   main { width: min(var(--page-max-width), calc(100% - var(--page-gutter))); margin: 0 auto; padding: var(--page-content-top) 0 80px; }
@@ -1475,7 +1507,7 @@
     .card-field-header, .card-field { grid-template-columns: minmax(0, 1fr) 120px 280px 180px; }
   }
 
-  @media (max-width: 700px) {
+  @media (max-width: 900px) {
     .order-sections { grid-template-columns: 1fr; }
     main { width: calc(100% - 24px); padding-top: var(--page-content-top); }
     .page-header { align-items: flex-start; }
@@ -1504,4 +1536,19 @@
     .lane-label { flex-basis: 118px; min-width: 118px; }
     .timeline-canvas { padding-right: 0; }
   }
+
+  @media (max-width: 900px) {
+    .song-fields { grid-template-columns: minmax(0, 1fr); }
+    .section-title { flex-wrap: wrap; }
+    .card-field { grid-template-columns: minmax(0, 1fr); padding: 14px 0; border-top: 1px solid #343c49; gap: 12px; }
+    .card-field > label { grid-template-columns: minmax(0, 1fr); gap: 7px; }
+    .mobile-field-label { display: block; color: #aab4c3; font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
+    .selected-card-name { display: block; color: #c1c8d3; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
+    .board-overrides { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
+    .board-overrides .mobile-field-label { margin-bottom: 0; }
+    .override-checkbox, .generation-input { min-height: 44px; }
+    .awakening-stepper { height: 46px; grid-template-columns: 44px minmax(0, 1fr) 44px; }
+    .reduction-options { height: 46px; }
+    .chart-meta span { white-space: normal; }
+  }
 </style>
diff --git a/src/routes/cards/+page.svelte b/src/routes/cards/+page.svelte
index 4d8686c..717d593 100644
--- a/src/routes/cards/+page.svelte
+++ b/src/routes/cards/+page.svelte
@@ -1753,7 +1753,7 @@
     }
 
     .description {
-      display: none;
+      display: block;
     }
 
     .total {
diff --git a/src/routes/combination/+page.svelte b/src/routes/combination/+page.svelte
index 3378a8f..18685c6 100644
--- a/src/routes/combination/+page.svelte
+++ b/src/routes/combination/+page.svelte
@@ -1320,8 +1320,10 @@
               <option value="">고정하지 않음</option>
               {#each candidateCards as card}<option value={card.id} disabled={fixedCardIds.some((id, index) => index !== slot && cardById.get(id)?.characterId === card.characterId)}>{cardLabel(card)}</option>{/each}
             </select>
+            {#if selectedId && cardById.get(selectedId)}<small class="selected-card-name">{cardLabel(cardById.get(selectedId)!)}</small>{/if}
           </label>
           <div class="fixed-awakening">
+            <span class="mobile-field-label">개화 (0~5)</span>
             <div class="awakening-stepper">
               <button type="button" disabled={!selectedId || fixedAwakenings[slot] <= 0} aria-label={`${slot + 1}번 고정 카드 개화 낮추기`} on:click={() => updateFixedAwakening(slot, fixedAwakenings[slot] - 1)}>‹</button>
               <strong>{fixedAwakenings[slot]}</strong>
@@ -1329,6 +1331,7 @@
             </div>
           </div>
           <div class="fixed-reduction">
+            <span class="mobile-field-label">빈도 감소 고정</span>
             <div class="reduction-options">
               {#each REDUCTION_LOCK_OPTIONS as reduction}
                 <button type="button" disabled={!selectedId} class:active={fixedCooldownReductions[slot] === reduction} aria-pressed={fixedCooldownReductions[slot] === reduction} on:click={() => updateFixedReduction(slot, reduction)}>{reduction === null ? '미사용' : `${reduction}%`}</button>
@@ -1336,6 +1339,8 @@
             </div>
           </div>
           <div class="fixed-overrides">
+            <span class="mobile-field-label">파란 노드 전체</span>
+            <span class="mobile-field-label">기수 보너스 덮어쓰기 (0~900)</span>
             <label class="override-checkbox">
               <input type="checkbox" disabled={!selectedId} checked={fixedAllBlueNodes[slot]} aria-label={`${slot + 1}번 고정 카드 파란 노드 전체 활성화`} on:change={() => toggleFixedAllBlueNodes(slot)}>
               <span aria-hidden="true"></span>
@@ -1451,6 +1456,7 @@
 </main>
 
 <style>
+  .mobile-field-label, .selected-card-name { display: none; }
   .result-limit { max-width: 220px; margin-top: 16px; }
   .search-inputs { min-width: 0; margin: 0; padding: 0; border: 0; }
   main { width: min(var(--page-max-width), calc(100% - var(--page-gutter))); margin: 0 auto; padding: var(--page-content-top) 0 80px; }
@@ -1601,7 +1607,7 @@
     .fixed-field { grid-template-columns: minmax(0, 1fr) 120px 304px 180px; }
   }
 
-  @media (max-width: 700px) {
+  @media (max-width: 900px) {
     main { width: calc(100% - 24px); padding-top: var(--page-content-top); }
     .panel { padding: 17px; }
     .song-fields { grid-template-columns: 1fr 100px; }
@@ -1624,4 +1630,19 @@
     .analysis-link { grid-column: 1 / -1; grid-row: 5; }
     .ranking-detail { padding: 0 10px 14px; }
   }
+
+  @media (max-width: 900px) {
+    .song-fields { grid-template-columns: minmax(0, 1fr); }
+    .section-title { flex-wrap: wrap; }
+    .fixed-field { grid-template-columns: minmax(0, 1fr); padding: 14px 0; border-top: 1px solid #343c49; gap: 12px; }
+    .fixed-field > label { grid-template-columns: minmax(0, 1fr); gap: 7px; }
+    .mobile-field-label { display: block; color: #aab4c3; font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
+    .selected-card-name { display: block; color: #c1c8d3; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
+    .fixed-overrides { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
+    .fixed-overrides .mobile-field-label { margin-bottom: 0; }
+    .override-checkbox, .generation-input { min-height: 44px; }
+    .awakening-stepper { height: 46px; grid-template-columns: 44px minmax(0, 1fr) 44px; }
+    .reduction-options { height: 46px; }
+    .chart-meta span { white-space: normal; }
+  }
 </style>
diff --git a/src/routes/data/+page.svelte b/src/routes/data/+page.svelte
index 4419be8..428b4bd 100644
--- a/src/routes/data/+page.svelte
+++ b/src/routes/data/+page.svelte
@@ -317,6 +317,43 @@
     boardViewport.scrollTop = contentY * boardZoom - pointerY;
   }
 
+  async function changeBoardZoom(factor: number) {
+    if (!boardViewport) return;
+    const centerX = boardViewport.clientWidth / 2;
+    const centerY = boardViewport.clientHeight / 2;
+    const contentX = (boardViewport.scrollLeft + centerX) / boardZoom;
+    const contentY = (boardViewport.scrollTop + centerY) / boardZoom;
+    boardZoom = Math.max(0.4, Math.min(1.8, boardZoom * factor));
+    await tick();
+    boardViewport.scrollLeft = contentX * boardZoom - centerX;
+    boardViewport.scrollTop = contentY * boardZoom - centerY;
+  }
+
+  function manageCardDialog(node: HTMLElement) {
+    const previousFocus = document.activeElement;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    node.focus();
+    function keydown(event: KeyboardEvent) {
+      if (event.key === 'Escape') { event.preventDefault(); selectedSocketGroupId = ''; }
+      if (event.key !== 'Tab') return;
+      const controls = Array.from(node.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), [tabindex="0"]'));
+      const first = controls[0];
+      const last = controls.at(-1);
+      if (event.shiftKey && (document.activeElement === first || document.activeElement === node)) {
+        event.preventDefault(); last?.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault(); first?.focus();
+      }
+    }
+    node.addEventListener('keydown', keydown);
+    return { destroy() {
+      node.removeEventListener('keydown', keydown);
+      document.body.style.overflow = previousOverflow;
+      if (previousFocus instanceof HTMLElement) previousFocus.focus({ preventScroll: true });
+    } };
+  }
+
   function startBoardDrag(event: PointerEvent) {
     if (!boardViewport || event.button !== 0 || (event.target as HTMLElement).closest('.board-node')) return;
     boardDragging = true;
@@ -1378,6 +1415,13 @@
         <p><strong>{selectedActiveBoardNodeCount}</strong> / {selectedBoardNodeCount}개 활성화</p>
         <div><button type="button" on:click={activateAllBlueNodes}>모든 파란 노드 활성화</button><button type="button" on:click={() => setAllBoardNodes(true)}>모두 활성화</button><button type="button" on:click={() => setAllBoardNodes(false)}>모두 해제</button></div>
       </div>
+      <div class="board-zoom" aria-label="보드 확대 및 축소">
+        <button type="button" aria-label="보드 축소" disabled={boardZoom <= .4} on:click={() => changeBoardZoom(1 / 1.25)}>−</button>
+        <span>{Math.round(boardZoom * 100)}%</span>
+        <button type="button" aria-label="보드 확대" disabled={boardZoom >= 1.8} on:click={() => changeBoardZoom(1.25)}>+</button>
+        <button type="button" on:click={fitBoardViewport}>화면 맞춤</button>
+      </div>
+      <p class="board-note">보드의 빈 곳을 드래그하면 이동합니다. +·− 버튼으로 확대·축소하고, 보드 바깥을 쓸어 페이지를 이동하세요.</p>
       <div
         class="board-scroll"
         class:dragging={boardDragging}
@@ -1451,7 +1495,7 @@
 
       {#if selectedSocketGroupId}
         <div class="card-picker-backdrop" role="presentation" on:click={(event) => { if (event.target === event.currentTarget) selectedSocketGroupId = ''; }}>
-          <div class="card-picker" role="dialog" aria-modal="true" aria-labelledby="card-picker-title" tabindex="-1">
+          <div class="card-picker" use:manageCardDialog role="dialog" aria-modal="true" aria-labelledby="card-picker-title" tabindex="-1">
             <div class="card-picker-heading">
               <div><p class="section-label">연결 노드</p><h3 id="card-picker-title">배치할 카드 선택</h3></div>
               <button type="button" aria-label="닫기" on:click={() => selectedSocketGroupId = ''}>×</button>
@@ -1753,7 +1797,7 @@
   .board-legend i { width: 9px; height: 9px; border-radius: 50%; }
   .board-note { margin: 10px 0 0; color: #7f8999; font-size: 13px; line-height: 1.5; }
   .card-picker-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgb(5 8 12 / 72%); }
-  .card-picker { width: min(620px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: hidden; border: 1px solid #3b4453; border-radius: 16px; background: #171c24; box-shadow: 0 20px 70px rgb(0 0 0 / 45%); }
+  .card-picker { display: flex; flex-direction: column; width: min(620px, 100%); max-height: min(760px, calc(100dvh - 40px)); overflow: hidden; border: 1px solid #3b4453; border-radius: 16px; background: #171c24; box-shadow: 0 20px 70px rgb(0 0 0 / 45%); }
   .card-picker-heading { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 10px; }
   .card-picker-heading h3 { margin: 2px 0 0; color: #edf0f5; font-size: 20px; }
   .card-picker-heading button { width: 34px; height: 34px; border: 1px solid #3b4453; border-radius: 9px; color: #c9d0da; background: #242b36; font-size: 22px; cursor: pointer; }
@@ -1763,7 +1807,7 @@
   .current-placement span { color: #d990af; font-size: 12px; font-weight: 850; }
   .current-placement strong { overflow: hidden; color: #dce1e9; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
   .current-placement button { padding: 5px 8px; border: 1px solid #65404f; border-radius: 6px; color: #f0a8c5; background: transparent; font-size: 12px; cursor: pointer; }
-  .connect-card-list { display: grid; gap: 6px; max-height: 520px; overflow-y: auto; padding: 0 20px 20px; scrollbar-width: thin; }
+  .connect-card-list { min-height: 0; display: grid; gap: 6px; max-height: 520px; overflow-y: auto; padding: 0 20px 20px; scrollbar-width: thin; }
   .connect-card-list > button { display: grid; grid-template-columns: 38px minmax(0, 1fr) 54px auto; align-items: center; gap: 11px; min-height: 66px; padding: 8px 10px; border: 1px solid #303845; border-radius: 10px; color: inherit; background: #12171e; text-align: left; cursor: pointer; }
   .connect-card-list > button:hover, .connect-card-list > button.selected { border-color: #a95e7f; background: #211a23; }
   .connect-card-rarity { color: #f1a5c5; font-size: 13px; font-weight: 900; }
@@ -1791,7 +1835,7 @@
   aside { margin-top: 16px; padding: 18px 20px; border: 1px solid #292f3b; border-radius: 14px; color: #929cad; background: #151920; font-size: 13px; line-height: 1.6; }
   aside strong { color: #cbd1db; }
   aside p { margin: 5px 0 0; }
-  @media (max-width: 700px) {
+  @media (max-width: 900px) {
     main { width: min(100% - 24px, 900px); padding-top: var(--page-content-top); }
     .summary { grid-template-columns: repeat(2, 1fr); }
     .settings-grid { grid-template-columns: 1fr; }
@@ -1822,11 +1866,31 @@
     .efficiency-table-head, .efficiency-list > button { grid-template-columns: 28px 210px 100px 90px 110px 115px; min-width: 710px; }
     .board-scroll { height: min(58vh, 560px); }
     .card-picker-backdrop { align-items: end; padding: 0; }
-    .card-picker { max-height: 88vh; border-radius: 16px 16px 0 0; }
-    .connect-card-list { max-height: 56vh; }
+    .card-picker { max-height: 88dvh; padding-bottom: env(safe-area-inset-bottom); border-radius: 16px 16px 0 0; }
+    .connect-card-list { max-height: none; overflow-y: auto; }
     .connect-card-list > button { grid-template-columns: 28px minmax(0, 1fr) 48px auto; gap: 7px; padding-inline: 8px; }
     .connect-range-preview { width: 44px; height: 44px; }
     .actions { display: grid; }
     .actions .danger { margin: 10px 0 0; }
   }
+
+  .card-picker-heading, .card-picker-note, .card-picker-search, .current-placement { flex-shrink: 0; }
+  .connect-card-list { grid-auto-rows: max-content; align-content: start; }
+  .board-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+  .board-zoom button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #465064; border-radius: 8px; color: #d5dbe4; background: #202733; cursor: pointer; }
+  .board-zoom button:disabled { opacity: .45; cursor: default; }
+  .board-zoom span { min-width: 42px; text-align: center; }
+  .board-zoom + .board-note { margin-bottom: 10px; }
+  @media (max-width: 900px) {
+    .board-toolbar, .board-toolbar div { flex-wrap: wrap; }
+    .board-toolbar button, .card-picker-heading button { min-height: 44px; }
+    .card-picker-heading button { min-width: 44px; }
+    .card-table .table-row { grid-template-columns: 34px minmax(0, 1fr); }
+    .awakening-field { grid-column: 2; }
+    .awakening-stepper { height: 46px; grid-template-columns: 44px minmax(0, 1fr) 44px; }
+    .identity { flex-wrap: wrap; }
+    .identity strong, .max-awakening-check > strong, .connect-card-name strong, .current-placement strong { white-space: normal; overflow-wrap: anywhere; }
+    .connect-card-list > button { grid-template-columns: 28px minmax(0, 1fr) 48px; }
+    .connect-card-effect { grid-column: 2 / -1; justify-items: start; }
+  }
 </style>