:root { background: #020403; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: #ffea77; }
body { display: flex; justify-content: center; }
main, .poster-wrap, .poster-link { display: block; width: 100%; max-width: 988px; }
.poster-wrap { position: relative; }
.poster-link { position: relative; z-index: 1; line-height: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.poster-image { display: block; width: 100%; height: auto; border: 0; }
.poster-link:focus-visible { outline: 3px solid #4dffd1; outline-offset: -3px; }
.image-hotspot { position: absolute; display: block; z-index: 10; top: 23.58%; height: 2.72%; border-radius: 999px; cursor: pointer; pointer-events: auto; touch-action: manipulation; background: rgba(0,0,0,.001); -webkit-tap-highlight-color: rgba(255,255,255,.18); }
.telegram-hotspot { left: 3.8%; width: 46.6%; }
.kakao-hotspot { left: 50.7%; width: 45.8%; }
.image-hotspot:focus-visible { outline: 4px solid #fff; outline-offset: -4px; }
@media (max-width: 988px) { main, .poster-wrap, .poster-link { max-width: none; width: 100%; } }