fix: use opaque fills and deeper colors for active impact

src/routes/analysis/+page.svelte

@@ -1205,7 +1205,7 @@
               </ol>
             </details>
           {/if}
-          <p class="simulation-guide" aria-live="polite">카드별 색칠된 구간을 클릭하면 해당 액티브만 미발동으로 계산합니다. 다시 클릭하면 복원됩니다. 배치와 쿨타임은 유지됩니다. 색이 진하고 테두리가 굵을수록 현재 설정에서 토글할 때 최고점 변화가 큽니다. 빗금은 미발동 상태이며, 해당 구간은 복원 시 영향력을 표시합니다.
+          <p class="simulation-guide" aria-live="polite">카드별 색칠된 구간을 클릭하면 해당 액티브만 미발동으로 계산합니다. 다시 클릭하면 복원됩니다. 배치와 쿨타임은 유지됩니다. 점수에 영향을 주는 구간은 불투명하게 표시하며, 내부 색이 진하고 테두리가 굵을수록 현재 설정에서 토글할 때 최고점 변화가 큽니다. 빗금은 미발동 상태이며, 해당 구간은 복원 시 영향력을 표시합니다.
             {#if excludedActiveWindows.length}
               <strong>{excludedActiveWindows.length}회 미발동 적용 중</strong>
               <button type="button" on:click={resetActiveWindows}>모두 복원</button>
@@ -1227,7 +1227,7 @@
                       class="skill-window active-window"
                       class:excluded={excludedActiveWindows.some((excluded) => excluded.cardId === window.cardId && excluded.startSeconds === window.startSeconds)}
                       disabled={mode !== 'analysis' || !simulationContext || running}
-                      style={coloredWindowStyle(window, timelineDuration) + (impact ? ` --impact-opacity: ${0.25 + 0.75 * Math.sqrt(impact.strength)}; --impact-border: ${impact.strength > 0 ? 1 + 2 * impact.strength : 0}px;` : '')}
+                      style={coloredWindowStyle(window, timelineDuration) + (impact ? ` --impact-opacity: ${impact.strength > 0 ? 1 : 0.25}; --impact-color-weight: ${55 + 45 * Math.sqrt(impact.strength)}%; --impact-darken: ${20 * Math.sqrt(impact.strength)}%; --impact-border: ${impact.strength > 0 ? 1 + 2 * impact.strength : 0}px;` : '')}
                       title={`${resultCardName(cardId)} 액티브 ${formatSeconds(window.startSeconds)}~${formatSeconds(window.endSeconds)} · ${window.scoreUpPercent}% · 클릭하여 미발동/복원${impact ? ` · 토글 시 최고점 ${signedScoreChange(impact.scoreChange)}` : ''}`}
                       aria-label={`${resultCardName(cardId)} 액티브 ${formatSeconds(window.startSeconds)}부터 ${formatSeconds(window.endSeconds)}까지 미발동 처리${impact ? ` · 토글 시 최고점 ${signedScoreChange(impact.scoreChange)}` : ''}`}
                       aria-pressed={excludedActiveWindows.some((excluded) => excluded.cardId === window.cardId && excluded.startSeconds === window.startSeconds)}
@@ -1414,9 +1414,9 @@
   .timeline-track::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / 9%) 1px, transparent 1px); background-size: var(--time-grid-step, 10%) 100%; pointer-events: none; }
   .skill-track { height: 36px; }
   .skill-window { position: absolute; min-width: 2px; border-radius: 3px; background: var(--member-color); }
-  .active-window { top: 8px; height: 20px; opacity: var(--impact-opacity, .72); padding: 0; border: 0; box-shadow: inset 0 0 0 var(--impact-border, 0px) rgb(255 255 255 / 85%); cursor: pointer; }
+  .active-window { top: 8px; height: 20px; opacity: var(--impact-opacity, .72); --impact-fill: color-mix(in srgb, color-mix(in srgb, var(--member-color) var(--impact-color-weight, 100%), white), black var(--impact-darken, 0%)); background: var(--impact-fill); padding: 0; border: 0; box-shadow: inset 0 0 0 var(--impact-border, 0px) rgb(255 255 255 / 85%); cursor: pointer; }
   .active-window:hover:not(:disabled), .active-window:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
-  .active-window.excluded { opacity: var(--impact-opacity, .28); border: 1px dashed var(--member-color); background: repeating-linear-gradient(135deg, transparent 0 3px, var(--member-color) 3px 4px); }
+  .active-window.excluded { opacity: var(--impact-opacity, .28); border: 1px dashed var(--member-color); background: repeating-linear-gradient(135deg, transparent 0 3px, rgb(255 255 255 / 55%) 3px 4px), var(--impact-fill); }
   .active-window:disabled { cursor: default; }
   .timeline-score-summary { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 16px; margin-bottom: 12px; border: 1px solid #454052; border-radius: 10px; background: #22202a; }
   .timeline-score-summary > div { display: grid; gap: 6px; }