fix: improve mobile navigation and calculator usability

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>