/* ===== 전광판(마퀴) 공용 스타일 최종판 ===== */
.tm-ticker{
    --gap: 24px;
    --duration: 30s;
    --scroll: 1000px;           /* JS가 실제 폭으로 세팅 */
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #004093;        /* 사이트 톤에 맞게 변경 */
    color:#fff;
}

/* 스테이지: 원본 + 복제 트랙을 한 줄에 붙여 무한 루프 */
.tm-stage{
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: tm-marquee var(--duration) linear infinite;
}

/* 오른쪽 방향일 때 */
.tm-ticker.tm-dir-right .tm-stage{
    animation-name: tm-marquee-right;
}

/* 아이템 묶음(원본/복제) */
.tm-track{
    display: inline-flex;
    align-items: center;
    gap: var(--gap);
    white-space: nowrap;
    padding: 10px 14px;
}
.tm-track a, .tm-track span{
    color:#fff ;
    text-decoration:none;
    font-size:14px;
    line-height:1;
    opacity:.95;
    font-weight: 700;
}
.tm-track a:hover{ text-decoration: underline; color:#ff0000; }

/* 호버/포커스 시 일시정지 */
.tm-ticker:hover .tm-stage,
.tm-ticker:focus-within .tm-stage{
    animation-play-state: paused;
}

/* 루프 키프레임: 총 이동거리=원본폭 */
@keyframes tm-marquee{
    from{ transform: translate3d(0,0,0); }
    to  { transform: translate3d(calc(-1 * var(--scroll)),0,0); }
}
@keyframes tm-marquee-right{
    from{ transform: translate3d(calc(-1 * var(--scroll)),0,0); }
    to  { transform: translate3d(0,0,0); }
}

/* 접근성: 모션 줄이기 */
@media (prefers-reduced-motion: reduce){
    .tm-stage{ animation: none; }
}