@charset "utf-8";

/* 플로팅 UI — Tailwind로 대체 불가한 스타일 (CSS 변수·상태·전환·특수 셀렉터) */

:root {
    --float-bar-height: 6rem;
    --float-consult-size: 3.5rem;
    --float-quick-toggle-width: 2.1875rem;
    --float-quick-toggle-height: 5.0625rem;
    --float-quick-panel-width: 12.875rem;
    --float-quick-open-gap: 0.75rem;
    --float-quick-menu-bottom-gap: 2.75rem;
    --float-quick-menu-pc-lift: 0;
}

@media (min-width: 768px) {
    :root {
        --float-bar-height: 4.25rem;
        --float-consult-size: 4.25rem;
        --float-quick-panel-width: 13.75rem;
        --float-quick-open-gap: 1rem;
        --float-quick-menu-bottom-gap: 3rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --float-bar-height: 6.1875rem;
        --float-consult-size: 3.75rem;
        --float-quick-panel-width: 12.875rem;
        --float-quick-menu-pc-lift: 4rem;
    }
}

@media (min-width: 1280px) {
    :root {
        --float-consult-size: 4.25rem;
        --float-quick-menu-pc-lift: 3rem;
    }
}

@media (min-width: 1536px) {
    :root {
        --float-consult-size: 5.375rem;
        --float-quick-menu-pc-lift: 2rem;
    }
}

body.has-float-ui {
    padding-bottom: var(--float-bar-height);
    overflow-x: clip;
}

body.has-float-ui.no-float-tire-bar:not(.tire-compare-bar-open),
html.no-float-tire-bar body.has-float-ui:not(.tire-compare-bar-open) {
    padding-bottom: 0;
}

body.tire-finder-login-modal-open {
    overflow: hidden;
}

body.float-tf-modal-open {
    overflow: hidden;
}

/* ── 퀵 메뉴: 위치 ── */
.float-quick-menu {
    bottom: calc(var(--float-bar-height) + var(--float-consult-size) * 2 + 0.5rem + 0.75rem + var(--float-quick-menu-bottom-gap));
}

@media (min-width: 1024px) {
    .float-quick-menu {
        top: calc(50% - var(--float-quick-menu-pc-lift));
        bottom: auto;
        max-width: none;
        transform: translateY(-50%);
    }
}

/* ── 퀵 메뉴: CSS 변수 기반 치수·열림 전환 ── */
.float-quick-menu__toggle {
    width: var(--float-quick-toggle-width);
    height: var(--float-quick-toggle-height);
}

.float-quick-menu__track {
    transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.float-quick-menu.is-open .float-quick-menu__track {
    padding-right: var(--float-quick-open-gap);
}

.float-quick-menu__toggle-icon {
    transition: transform 0.25s ease;
}

.float-quick-menu:not(.is-open) .float-quick-menu__toggle-icon {
    animation: float-quick-menu-arrow-nudge 1.4s ease-in-out infinite;
}

.float-quick-menu.is-open .float-quick-menu__toggle-icon {
    transform: rotate(180deg);
    animation: none;
}

@keyframes float-quick-menu-arrow-nudge {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(0.25rem);
    }
}

.float-quick-menu__panel-wrap {
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.float-quick-menu.is-open .float-quick-menu__panel-wrap {
    overflow: visible;
}

.float-quick-menu.is-open .float-quick-menu__panel-wrap {
    width: min(
        var(--float-quick-panel-width),
        calc(100svw - var(--float-consult-size) - var(--float-quick-toggle-width) - var(--float-quick-open-gap) - 1.5rem)
    );
}

.float-quick-menu__panel {
    width: var(--float-quick-panel-width);
    max-width: calc(100svw - var(--float-consult-size) - var(--float-quick-toggle-width) - var(--float-quick-open-gap) - 1.5rem);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.float-quick-menu__panel[hidden] {
    display: block;
}

/* ── 하단 타이어 찾기 바: 상단 그라데이션 선 ── */
.float-tire-finder {
    border-top: 0;
    background-color: #fff;
    background-image: linear-gradient(100deg, #42E3FF 3.48%, #3C7AFF 92.74%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top left;
}

/* ── 하단 검색: 그누보드 focus 스타일 초기화 ── */
.float-tire-finder__search-field .float-tire-finder__search-input[type="text"]:focus,
.float-tire-finder__search-field .float-tire-finder__search-input[type="text"]:focus-visible,
#float_tire_size_search:focus,
#float_tire_size_search:focus-visible {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.float-tire-finder__search-field:focus-within {
    border-color: #3c7aff;
}

/* PC: 좌(타이틀) · 중(버튼) · 우(검색) 3열 배치 */
@media (min-width: 1024px) {
    .float-tire-finder__inner {
        width: 100%;
    }

    .float-tire-finder__brand {
        justify-self: start;
    }

    .float-tire-finder__actions {
        justify-self: center;
        width: auto;
        max-width: 27.25rem;
    }

    .float-tire-finder__search {
        justify-self: end;
        width: 100%;
        min-width: 0;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .float-tire-finder__inner {
        grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 1fr);
    }

    .float-tire-finder__actions {
        max-width: none;
        min-width: 0;
    }
}

/* ── 상담 FAB: CSS 변수 기반 위치·크기 ── */
.shop-float-consult {
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .shop-float-consult {
        gap: 0.625rem;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .shop-float-consult {
        gap: 0.375rem;
    }
}

.shop-float-consult__btn {
    width: var(--float-consult-size);
    height: var(--float-consult-size);
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .shop-float-consult__label {
        font-size: 0.625rem;
        line-height: 1.2;
    }
}

@media (min-width: 1280px) and (max-width: 1535px) {
    .shop-float-consult__label {
        font-size: 0.6875rem;
        line-height: 1.2;
    }
}

@media (min-width: 1536px) {
    .shop-float-consult__label {
        font-size: 0.9675rem;
    }
}

/* ── 타이어 찾기 모달: 열림·패널 전환 ── */
.float-tf-modal[hidden],
.float-tf-fail[hidden] {
    display: none;
}

.float-tf-modal__backdrop,
.float-tf-fail__backdrop {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.float-tf-fail__backdrop {
    transition-duration: 0.25s;
}

.float-tf-modal.is-open .float-tf-modal__backdrop,
.float-tf-fail.is-open .float-tf-fail__backdrop {
    opacity: 1;
}

.float-tf-modal__dialog {
    opacity: 0;
    height: auto;
    max-height: calc(100dvh - 1rem);
    transform: translate3d(0, 1.25rem, 0);
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease,
        height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.float-tf-modal__dialog.is-expanded {
    height: calc(100dvh - 1rem);
    max-height: calc(100dvh - 1rem);
}

@media (min-width: 768px) {
    .float-tf-modal__dialog.is-expanded {
        height: calc(100dvh - 2rem);
        max-height: calc(100dvh - 2rem);
    }
}

.float-tf-modal__dialog:not(.is-expanded) .float-tf-modal__panel:not([hidden]) {
    flex: 0 0 auto;
}

.float-tf-modal__dialog:not(.is-expanded) .float-tf-modal__scroll {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: visible;
}

.float-tf-modal.is-open .float-tf-modal__dialog {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.float-tf-modal__panel[hidden] {
    display: none;
}

.float-tf-modal__panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.float-tf-modal__scroll {
    -webkit-overflow-scrolling: touch;
}

.float-tf-modal__tab.is-active {
    border-color: var(--color-primary);
    background: #fff;
    color: var(--color-primary);
}

.float-tf-modal__tabs--readonly {
    pointer-events: none;
}

.float-tf-modal__tabs--readonly .float-tf-modal__tab:not(.is-active) {
    color: rgba(0, 0, 0, 0.6);
    border-color: transparent;
    background: transparent;
}

.float-tf-privacy__box.is-checked {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.float-tf-form__submit--static {
    pointer-events: none;
}

.float-tf-result__actions[hidden],
.float-tf-recommend__position-tabs[hidden],
.float-tf-recommend__track-wrap[hidden],
.float-tf-recommend__empty[hidden],
.float-tf-result__spec-single[hidden],
.float-tf-result__spec-split[hidden],
.float-tf-modal__stub-hint[hidden] {
    display: none !important;
}

.float-tf-recommend__position-tab.is-active {
    border-color: var(--color-primary);
    background: #fff;
    color: var(--color-primary);
}

/* ── 추천 Swiper 슬라이드 폭 ── */
.float-tf-recommend__track-wrap {
    overflow: visible;
}

.float-tf-recommend-swiper {
    touch-action: pan-y pinch-zoom;
    overflow-x: hidden;
    overflow-y: visible;
}

.float-tf-recommend-swiper.swiper {
    overflow-x: hidden;
    overflow-y: visible;
}

.float-tf-recommend-swiper .swiper-slide {
    width: 72%;
    max-width: 15.625rem;
    height: auto;
}

@media (min-width: 640px) {
    .float-tf-recommend-swiper .swiper-slide {
        width: 45%;
    }
}

@media (min-width: 1024px) {
    .float-tf-recommend-swiper .swiper-slide {
        width: 15.625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .float-tf-modal__backdrop,
    .float-tf-modal__dialog,
    .float-tf-fail__backdrop,
    .float-quick-menu__track,
    .float-quick-menu__panel-wrap,
    .float-quick-menu__toggle-icon {
        transition: none;
        animation: none !important;
    }

    .float-tf-modal__dialog {
        opacity: 1;
        transform: none;
    }

    .float-tf-modal.is-open .float-tf-modal__backdrop,
    .float-tf-fail.is-open .float-tf-fail__backdrop {
        opacity: 1;
    }
}