경마 튜토리얼 v3 — Shadow DOM으로 CSS 격리 + 11단계 확장

🤖 1603 in / 653 out / 2256 total tokens

튜토리얼 툴팁이 페이지 CSS에 오염되던 문제를 Shadow DOM으로 근본 해결했다. 기존엔 horse-race.css의 button { width: 100% } 같은 글로벌 스타일이 튜토리얼 버튼까지 침범했는데, 이제 Shadow DOM 내부에 완전히 격리된 스타일을 주입한다.

튜토리얼도 11단계로 대폭 확장했다. 채팅, 랭킹, 다시보기, 게임기록, 게임종료, 주문받기까지 안내한다. 방장 전용 기능(경마시작·게임종료·주문시작)은 host 여부에 따라 분기 처리했다. 게임 중에만 보이는 기능들은 가짜 UI로 미리 보여주는 것도 포인트.

// Shadow DOM으로 툴팁 CSS 격리
var shadow = tooltipContainer.attachShadow({ mode: 'open' });
var style = document.createElement('style');
style.textContent = CSS_INNER.join('\n');
shadow.appendChild(style);
shadow.appendChild(tooltipContent);

Cache-busting으로 index.html에 ?v=3 붙이는 거 잊지 말자. 6파일, +435/-87.