feat: show special note shares and clarify average event rankings

src/lib/components/AnalysisResultView.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import SpecialNoteSummary from './SpecialNoteSummary.svelte';
   import type { EffectiveSkillWindow, ExactOptimizationResult, SkillWindow } from '$lib/engine/index.ts';
 
   type DisplayEffectiveWindow = SkillWindow & {
@@ -115,6 +116,8 @@
   </div>
 {/if}
 
+<SpecialNoteSummary {result} {cardName} />
+
 <section class="skill-timeline" aria-labelledby={`timeline-title-${instanceId}`}>
   <div class="timeline-heading">
     <div><h3 id={`timeline-title-${instanceId}`}>스킬 발동과 노트 분포</h3><p>멤버별 액티브와 실제 적용 구간, 스페셜 순서를 같은 시간축에서 비교합니다.</p></div>

src/lib/components/SpecialNoteSummary.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { ExactOptimizationResult } from '$lib/engine/types.ts';
+  import { summarizeSpecialNotes } from '$lib/engine/special-note-summary.ts';
+  export let result: ExactOptimizationResult;
+  export let cardName: (cardId: string) => string;
+  $: summaries = summarizeSpecialNotes(result.notes, result.specialWindows);
+</script>
+
+<section class="special-note-summary" aria-label="멤버별 스페셜 구간 노트 비중">
+  <h3>스페셜 구간 노트 비중</h3>
+  <p>노트 수는 롱노트 중간 판정을 포함합니다. 기본점수 비중은 스킬 미발동 기준으로 노트 종류·콤보·가창 보너스를 반영한 점수 합계의 비율이며, 실제 스페셜 점수 기여도는 아닙니다. 겹친 구간은 각 멤버에 포함합니다.</p>
+  <div class="summary-grid">
+    {#each summaries as summary}
+      <div class="summary-card">
+        <strong>{cardName(summary.cardId)}</strong>
+        <small>{summary.startSeconds.toFixed(1)}~{summary.endSeconds.toFixed(1)}초</small>
+        <span>노트 {summary.noteCount.toLocaleString('ko-KR')}개 · 전체의 {summary.notePercent.toFixed(1)}%</span>
+        <span>기본점수 합계 {summary.baselineScore.toLocaleString('ko-KR')} · {summary.baselinePercent.toFixed(1)}%</span>
+      </div>
+    {:else}
+      <p>스페셜 발동 구간이 없습니다.</p>
+    {/each}
+  </div>
+</section>
+
+<style>
+  .special-note-summary { margin: 16px 0; padding: 14px; border: 1px solid #303a47; border-radius: 12px; background: #131922; }
+  h3 { margin: 0 0 8px; color: #dce3eb; font-size: 15px; }
+  p { margin: 0 0 12px; color: #9ba8bb; font-size: 12px; line-height: 1.6; }
+  .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
+  .summary-card { display: grid; gap: 5px; padding: 10px; border-radius: 8px; background: #1c2430; overflow-wrap: anywhere; }
+  strong { color: #e0e7f1; font-size: 13px; }
+  small { color: #9ba8bb; }
+  span { color: #c0ccdc; font-size: 12px; }
+</style>