zenn
555321fe70
- 태그 AND 검색 도입 - UI/UX 디자인 개선 (칩 & 배지) - 모바일 최적화 및 레이아웃 - 성능 및 리소스 최적화 (Zero-Dependency 아이콘) - 데이터 안정성 및 기타 - 그 외 오류 복구 - Tailwind CDN 제거
73 lines
1.7 KiB
CSS
73 lines
1.7 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;
|
|
}
|
|
}
|
|
|
|
@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 *));
|