@import 'tailwindcss';

@theme {
    /* 기존 HTML에서 쓰던 이름 그대로 등록 (bg-background-light 등) */
    --color-background-light: var(--bg-light);
    --color-background-dark: var(--bg-dark);
    --breakpoint-xs: 480px;
    --color-primary: #137fec;

    --font-display: 'Inter', sans-serif;
    --radius-xl: 0.75rem;
    --aspect-card: 4 / 5;
}

/* 라이트 모드 변수 설정 */
:root {
    --bg-light: #f6f7f8;
    --bg-dark: #ffffff; /* 헤더 등에 쓰이는 밝은색 */
}

/* 다크 모드일 때 변수값 갈아끼우기 */
.dark {
    --bg-light: #101922;
    --bg-dark: #101922; /* 다크모드에선 둘 다 어둡게 */
}

/* 모든 버튼에 마우스 포인터(손가락 모양)를 자동으로 적용 */
@layer base {
    button,
    [type='button'],
    [type='reset'],
    [type='submit'] {
        cursor: pointer;
    }

    /* 비활성화된(disabled) 버튼은 클릭할 수 없으므로 기본 화살표로 유지 */
    button:disabled {
        cursor: default;
    }
}

@layer utilities {
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .modal-open {
        overflow: hidden !important;
        height: 100% !important;
        overscroll-behavior: none !important;
    }
}

@layer components {
    #modal-main-carousel-container {
        scroll-snap-type: none;
        overflow-x: hidden;
    }
    #product-modal {
        overscroll-behavior: contain;
    }
    [id^='thumb-'] {
        /* background-image는 0s로 즉시 교체, transform(확대)만 부드럽게 */
        transition:
            transform 0.4s ease-out,
            background-image 0s !important;

        background-color: #f1f5f9;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;

        aspect-ratio: 1 / 1;
        overflow: hidden;
        will-change: transform;

        /* 기본 상태 */
        transform: scale(1);
    }

    /* 카드에 호버 시 확대 상태 고정 */
    .group:hover [id^='thumb-'] {
        transform: scale(1.1) !important;
    }
}

/* 2. 핵심: 테일윈드 v4에게 클래스 기반 다크모드임을 명시 */
@custom-variant dark (&:where(.dark, .dark *));