feat: improve analysis and release v1.0.2

src/lib/components/AnalysisResultView.svelte

@@ -97,11 +97,16 @@
   }
 </script>
 
-<ol class="order-list">
-  {#each result.order as cardId, slot}
-    <li><span class="slot">{slot + 1}</span><strong>{cardName(cardId)}</strong><span class="reduction">쿨타임 {result.cooldownReductions[cardId]}% 감소</span></li>
-  {/each}
-</ol>
+<div class="order-sections">
+  <section class="order-section">
+    <h3>추천 스페셜 발동 순서</h3>
+    <ol class="order-list compact">
+      {#each result.order as cardId, slot}
+        <li><span class="slot">{slot + 1}</span><strong>{cardName(cardId)}</strong><span class="reduction">쿨타임 {result.cooldownReductions[cardId]}% 감소</span></li>
+      {/each}
+    </ol>
+  </section>
+</div>
 {#if showScoreSummary}
   <div class="score-grid">
     <div class="score-summary"><span>예상 점수</span><strong>{result.expectedScore.toLocaleString('ko-KR')}</strong>{#if baseline}<small>기준 대비 {delta(result.expectedScore, baseline.expectedScore)}</small>{/if}</div>
@@ -164,7 +169,10 @@
 </section>
 
 <style>
-  .order-list { display: grid; gap: 8px; padding: 0; margin: 18px 0 0; list-style: none; }
+  .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; }
+  .order-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
   .order-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 50px; padding: 8px 12px; border: 1px solid #2d3440; border-radius: 10px; background: #12161c; }
   .slot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #171019; background: #e98ab2; font-weight: 900; }
   .order-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -206,6 +214,7 @@
   .time-axis span:first-child { transform: none; }
   .time-axis span:last-child { transform: translateX(-100%); }
   @media (max-width: 700px) {
+    .order-sections { grid-template-columns: 1fr; }
     .order-list li { grid-template-columns: 30px minmax(0, 1fr); }
     .reduction { grid-column: 2; justify-self: start; }
     .score-grid { grid-template-columns: 1fr; }