@charset "utf-8";

/* 푸터 퀵 카드 — Figma 1075-40990 */

@media (min-width: 1024px) {
    .footer-quick-grid > * {
        min-width: 0;
    }
}

/* lg~xl: 고정 치수(227+300)가 컬럼보다 넓을 때 잘림 방지 */
@media (min-width: 1024px) and (max-width: 1279px) {
    .footer-quick-card--compact .footer-quick-card__split,
    .footer-quick-card--full .footer-quick-card__split {
        gap: 1rem;
    }

    .footer-quick-stack {
        height: auto;
        max-height: none;
    }

    .footer-quick-card--mount {
        height: auto;
        max-height: none;
    }
}

/* lg+: 내 차량 정보(등록) — 텍스트 열 높이 맞춤 (본문만 상하 중앙) */
@media (min-width: 1024px) {
    .footer-quick-card--full .footer-quick-card__split {
        align-items: stretch;
    }

    /* Figma 1075-18642/18652 — compact 카드: 텍스트 → 이미지 → CTA 세로형 */
    .footer-quick-grid--trio > .footer-quick-card--compact .footer-quick-card__inner,
    .footer-quick-stack--duo .footer-quick-card--compact .footer-quick-card__inner {
        height: 100%;
    }

    .footer-quick-grid--trio > .footer-quick-card--compact .footer-quick-card__media,
    .footer-quick-stack--duo .footer-quick-card--compact .footer-quick-card__media {
        margin-left: auto;
        margin-right: auto;
    }
}

/* mount 페이지 전용 */
@media (min-width: 1536px) {
    .footer-quick-section--mount .footer-quick-card__split--mount:not(.footer-quick-card__split--compact) {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-quick-section--mount .footer-quick-card--full .footer-quick-card__vehicle-group {
        flex-direction: row;
        align-items: center;
    }

    .footer-quick-section--mount .footer-quick-card--full,
    .footer-quick-section--mount .footer-quick-stack,
    .footer-quick-section--mount .footer-quick-grid {
        height: auto;
        max-height: none;
    }
}

.footer-quick-mount-map > div {
    width: 100% !important;
    height: 100% !important;
}

/* Tailwind 대체 불가 (마퀴 애니메이션) */

.footer-quick-mount-marquee.is-marquee .footer-quick-mount-marquee__track {
    animation: footer-quick-marquee-scroll var(--footer-quick-marquee-duration, 12s) linear infinite;
}

.footer-quick-mount-marquee.is-marquee:hover .footer-quick-mount-marquee__track {
    animation-play-state: paused;
}

@keyframes footer-quick-marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(var(--footer-quick-marquee-distance, -50%));
    }
}