@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-'] {
        transition: all 0.6s ease-in-out;
        background-color: #f1f5f9;
    }
}

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