.goodtaksong-slider { position: relative; max-width: 860px; margin: 30px auto; padding: 12px; border: 1px solid var(--line, #dce4ef); border-radius: 18px; background: var(--soft, #f4f7fb); box-shadow: 0 16px 42px rgba(12, 38, 82, .10); overflow: hidden; }
.goodtaksong-slider-track { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #e9eff7; }
.goodtaksong-slide { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; opacity: 0; visibility: hidden; transition: opacity .32s ease; }
.goodtaksong-slide.is-active { opacity: 1; visibility: visible; }
.goodtaksong-slide-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.goodtaksong-slide figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 26px 20px 16px; color: #fff; background: linear-gradient(transparent, rgba(5, 31, 75, .78)); font-size: 14px; }
.goodtaksong-slider-control { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; color: #fff; background: rgba(11,47,107,.78); font-size: 28px; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.goodtaksong-slider-control:hover, .goodtaksong-slider-control:focus-visible { background: var(--blue, #1352a2); outline: 3px solid rgba(19,82,162,.22); outline-offset: 2px; }
.goodtaksong-slider-control.is-prev { left: 24px; }
.goodtaksong-slider-control.is-next { right: 24px; }
.goodtaksong-slider-dots { display: flex; justify-content: center; gap: 7px; padding: 13px 4px 2px; }
.goodtaksong-slider-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #b8c7da; cursor: pointer; }
.goodtaksong-slider-dot.is-active { width: 24px; border-radius: 99px; background: var(--blue, #1352a2); }
@media (max-width: 640px) { .goodtaksong-slider { margin: 22px 0; padding: 8px; border-radius: 14px; } .goodtaksong-slider-control { width: 34px; height: 34px; font-size: 23px; } .goodtaksong-slider-control.is-prev { left: 15px; } .goodtaksong-slider-control.is-next { right: 15px; } }
@media (prefers-reduced-motion: reduce) { .goodtaksong-slide { transition: none; } }