110 lines
2.9 KiB
CSS
110 lines
2.9 KiB
CSS
@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;
|
|
}
|
|
|
|
.product-card {
|
|
-webkit-user-select: none; /* Safari/Chrome/iOS 전용 */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* IE/Edge */
|
|
user-select: none; /* 표준 */
|
|
|
|
/* iOS에서 롱 터치 시 링크/이미지 미리보기 팝업이 뜨는 것 방지 */
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
/* 텍스트 입력창이나 모달 내부의 상세 설명 등은 선택이 가능해야 하므로 예외 처리 */
|
|
#product-modal,
|
|
input,
|
|
textarea {
|
|
-webkit-user-select: text;
|
|
user-select: text;
|
|
}
|
|
}
|
|
|
|
@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 *));
|